butterfly icoder

by avgustre

HTML

<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve">
  <defs>
    <filter id="blur" x="0" y="0" width="100%" height="100%">
      <feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  
<g id="Body" filter="url(#blur)">
  <path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1
    c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/>
  <path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9
    C451.5,251,411,265.5,411,265.5"/>
  <path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301
    c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7
    c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6
    c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1
    C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9
    c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3
    c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301
    c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199
    c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899
   ...

CSS

body {
  background: #000;
}
#Body path {
  stroke: #00ff30;
}
#TopRed path {
  stroke: #ff0000;
}
#Bottom_Blue path {
  stroke: #00c6ff;
}
#Bottom_Green path {
  stroke: #69e692;
}
#TopYellow path {
  stroke: #fff000;
}
#BottomYellow path {
  stroke: #fff000;
}
.st0{
  /*fill:#8CC63F;*/
  /*stroke: #8CC63F;*/
  fill:none;
  stroke:#FBB03B;
  stroke-miterlimit:10;
}
.st1{
  fill:none;
  stroke:#8CC63F;
  stroke-miterlimit:10;
}
.st2{
  fill:none;
  stroke:#FFFF00;
  stroke-miterlimit:10;
}
.st3{
  fill:#65C8D0;
}
.st4{
  fill:#0000FF;
}

.butterfly {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
  x: 0;
  y: 0;
  width: 500px;
  height: 500px;
  viewBox: 0 0 500 500;
  enable-background:new 0 0 500 500;
  animation: wrapper 4s infinite;
}

.st0 {
    stroke-dasharray: 640;
    stroke-dashoffset: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-animation: draw-around 4s infinite;
          animation: draw-around 4s infinite;
}

@-webkit-keyframes draw-around {
  0% {
    stroke-dashoffset: 640;
  }
  10% {
    stroke-dashoffset: 640;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-around {
  0% {
    stroke-dashoffset: 640;
  }
  10% {
    stroke-dashoffset: 640;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes wrapper {
  0% {
    opacity: 0;
    
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
  }
  20% {
    opacity: 1;
    
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
    filter: none;
  }
}

@-webkit-keyframes wrapper {
  0% {
    opacity: 0;
    
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
  }
  20% {
    opacity: 1;
    
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
...