body{
  margin: 0;
  padding: 0;
}
#background{
  width:200px;
  height:200px;
}
#draw{
  position: relative;
  left: 25px;
}
.circle-1{
  width: 70px;
  height: 70px;
  border-radius: 30%;
  background-color: #55C3F1;
}
.circle-2{
  position: absolute;
  top: 0;
  left: 50px;
  width: 70px;
  height: 70px;
  border-radius: 30%;
  background-color: #FDD23E;
  mix-blend-mode: multiply;
}

svg{
  display: none;
  width: 100%;
  height: 100vh;
    vertical-align: bottom;
}
path {
    fill-opacity: 0;
    transition: fill-opacity 1s;
  }
  .fill-1 path:nth-of-type(1){
   fill:#55c3f1;
fill-opacity: 1;
}
.fill-2 path:nth-of-type(2){
 fill:#fdd23e;
fill-opacity: 1;
    mix-blend-mode:multiply;
}
.fill-3 path:nth-of-type(3){
 fill:#221815;
fill-opacity: 1;
}

.clear-stroke path{
  stroke: none;
}

.target{
  transition: .6s ;
}

#draw:hover .target{
	transform: rotateZ( 360deg ) ;
}