<svg class="flower" x="0px" y="0px" width="319px" height="414px" viewBox="0 50 213 276"  xml:space="preserve">
<style type="text/css">
.st0{fill:#FBB03B;stroke:#000000;stroke-miterlimit:5;}
.st1{fill:#FCEE21;stroke:#000000;stroke-miterlimit:5;}
.st2{fill:#7AC943;stroke:#000000;stroke-miterlimit:5;}
.st3{fill:#7AC943;stroke:#000000;stroke-miterlimit:5;}</style>
<circle class="st1" cx="88" cy="113" r="7"/><path d="M88,107c3.3,0,6,2.7,6,6s-2.7,6-6,6s-6-2.7-6-6S84.7,107,88,107 M88,105c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S92.4,105,88,105L88,105z"/><path id="bluete6" class="st0" d="M81.5,104.2c0,0-45.4-33.2-27.9-46.9S81.5,104.2,81.5,104.2z"/><path id="bluete5" class="st0" d="M92.8,103.1c0,0,8.2-55.6,28.5-46.6S92.8,103.1,92.8,103.1z"/><path id="bluete4" class="st0" d="M98.9,112.6c0,0,53-18.7,54.5,3.5C154.9,138.3,98.9,112.6,98.9,112.6z"/><path id="bluete3" class="st0" d="M93.4,122.5c0,0,41.2,38.2,22.3,49.8S93.4,122.5,93.4,122.5z"/><path id="bluete2" class="st0" d="M82.1,122.2c0,0-14.6,54.3-33.7,43C29.3,153.9,82.1,122.2,82.1,122.2z"/><path id="bluete1" class="st0" d="M77.1,112.1c0,0-54.8,12.4-53.7-9.8C24.5,80.2,77.1,112.1,77.1,112.1z"/><path class="st2" d="M164,158.9c0.3,5.3-4.2,9.8-9.2,11.7s-10.4,1.9-15.7,2.7c-9.6,1.5-18.8,6.2-25,13.6s-9.3,17.7-7.2,27.2c0.1,0.6,0.3,1.3,0.8,1.8c0.5,0.6,1.4,0.8,2.1,0.9c3.4,0.7,6.9,1.1,10.4,1.1c3.8,0,7.8-0.4,11.1-2.2c7.6-4,10.1-13.5,12.2-21.9c2.1-8.4,5.8-17.8,14-20.3L164,158.9z"/><path d="M163.2,158.9c-0.2,12-14.8,12.3-23.4,13.6c-6.9,1-13.7,3.5-19.4,7.6c-10.2,7.3-16.7,20-14.6,32.6c0.9,5.7,5.8,5.5,10.8,5.8c6.2,0.5,12.9,0.1,17.9-4.1c10.1-8.5,8.1-24,15.4-34.2c1.4-2,3.3-3.8,5.5-5c1.2-0.6,2-0.5,2.7-1.3c0.8-0.9,1.2-2.8,1.7-3.9c1.6-3.6,3.1-7.2,4.7-10.8c0.4-0.9-0.9-1.6-1.3-0.8c-1.1,2.6-2.3,5.2-3.4,7.8c-1.1,2.5-1.9,5.7-3.9,7.1c-4.1,2.8-7,5-9.4,9.6c-2.6,5.1-3.7,10.6-5.2,16.1c-2,6.7-4.9,13.8-11.9,16.6c-4,1.6-8.5,1.7-12.8,1.3c-2-0.1-4.9,0-6.7-0.9c-2.8-1.4-2.9-4.6-3-7.3c-0.4-16,11.7-28.9,26.4-33.4c10.2-3.1,31.1-0.9,31.4-16.5C164.7,157.9,163.2,157.9,163.2,158.9z"/><path class="st2" d="M51.1,184.1c4.1,0.5,7,4.6,7.8,8.7c0.8,4.1,0,8.3-0.1,12.5c-0.1,7.6,2.2,15.3,7.1,21.2s12.4,9.6,20,9.3c0.5,0,1.1-0.1,1.5-0.3c0.5-0.3,0.8-0.9,1-1.5c1-2.5,1.8-5.2,2.3-7.9c0.5-2.9,0.8-6-0.1-8.9c-2.1-6.4-9-9.6-15.2-12.4c-6.1-2.8-12.9-6.9-13.7-13.6L51.1,184.1z"/><path d="M50.9,184.6c11.3,2.4,6.5,17.5,7.6,25.6c0.9,7,3.9,13.9,9.1,18.8c4.2,3.9,9.5,6.6,15.3,7.2c2.1,0.2,4.2,0.5,5.6-1.2c1.8-2,2.3-6.4,2.7-8.9c1.1-6.1,0.1-11.6-4.8-15.8c-4.6-4-10.6-5.6-15.8-8.7c-1.9-1.1-3.8-2.4-5.3-4.1c-0.9-0.9-1.6-1.9-2.2-3c-0.6-1.1-0.9-2.3-1.1-3.6c-0.4-0.5-1-0.7-1.5-1.1c-2.7-2.4-6.3-4.2-9.3-6.2c-0.6-0.4-1.2,0.6-0.6,1c2.5,1.7,5.1,3.4,7.6,5.1c1.7,1.1,2,1.4,2.8,2.8c0.9,1.7,1.2,3.3,2.5,4.8c7.5,9.6,26.5,9.2,26.8,24.1c0.1,4.1-0.8,9.7-4.1,12.2c-2.5,1.9-4.2,1.5-7.1,0.7c-2.2-0.6-4.2-1.4-6.1-2.6c-6.8-4-11.3-11-12.9-18.6c-1.9-8.8,3.9-26.9-8.9-29.7C50.5,183.3,50.2,184.5,50.9,184.6z"/><path d="M84,128.3c0.2,22.4,0.5,45.6,9.2,66.5c2.1,5.1,5,10,6.1,15.4c1.4,7-1,13.7-4.8,19.5c-6.9,10.8-16.2,20.5-24.3,30.4c-0.5,0.6,0.3,1.4,0.8,0.8c7.9-9.6,16.6-18.9,23.6-29.2c6.1-9,7.9-18,3.7-28.2c-2.4-5.8-5.2-11.4-7.1-17.4c-1.9-6.2-3.2-12.5-4.1-18.8c-1.8-12.9-1.9-26-2.1-39C85.2,127.5,84,127.5,84,128.3L84,128.3z"/></svg>

svg {
  max-width: 100%;
  display: inline-block;
  margin: auto;
  padding: 5px;
}

svg {
  max-width: 100%;
  display: inline-block;
  margin: auto;
  padding: 5px;
}
svg.flower {
  animation: sway 3s linear infinite alternate;
}
svg.flower .st0 {
  animation: colorize 8s linear infinite alternate;
}
svg.flower .st1 {
  animation: stroke 2s linear infinite alternate;
}
svg.flower .st3 {
  animation: mini-sway 6s 0.25s linear infinite alternate;
}

@keyframes colorize {
  0% {
    fill: #5cd689;
    stroke: #5c78d6;
    stroke-width: 4;
  }
  10% {
    fill: #9dd65c;
    stroke: #5c9fd6;
    stroke-width: 4;
  }
  20% {
    fill: pink;
    stroke: #5cd697;
    stroke-width: 4;
  }
  30% {
    fill: #5cd6c6;
    stroke: #5cd4d6;
    stroke-width: 2;
  }
  40% {
    fill: #d65cc0;
    stroke: #d65cb8;
    stroke-width: 2;
  }
  50% {
    fill: honeydew;
    stroke: #5cd672;
    stroke-width: 3;
  }
  60% {
    fill: mistyrose;
  }
  70% {
    fill: #cc3353;
    stroke: #d6cc5c;
    stroke-width: 1;
  }
  80% {
    fill: #5cd6be;
    stroke: #5cd4d6;
    stroke-width: 2;
  }
  90% {
    fill: #91d65c;
    stroke: #5cd664;
    stroke-width: 1;
  }
  10% {
    fill: #5c72d6;
    stroke: #d65ca9;
    stroke-width: 2;
  }
}
@keyframes stroke {
  0% {
    stroke-width: 3;
    stroke: #ff9255;
  }
  100% {
    stroke-width: 9;
    stroke: white;
  }
}
@keyframes sway {
  0% {
    transform: rotate(2deg) translateY(5px);
  }
  100% {
    transform: rotate(-2deg) translateY(-5px);
  }
}
@keyframes mini-sway {
  0% {
    transform: rotate(0.5deg) translateY(3px);
  }
  100% {
    transform: rotate(-0.5deg) translateY(-3px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.