JSFiddle - React, Tailwind, and code Playground

by slandmann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 83.3 91.7" style="opacity: 0.377538;" xml:space="preserve" width="300" height="300" class="velocity-animating">
  <defs>
    <linearGradient id="gradient">
      <stop class="stop1" offset="0%"></stop>
      <stop class="stop2" offset="100%"></stop>
    </linearGradient>
  </defs>
  <g id="XMLID_2125_">
    <g id="XMLID_2130_">
      <g id="XMLID_2132_">
        <path id="XMLID_2134_" class="st0" d="M36.8,14.7c0.4,0.9,0.1,2-0.8,2.4c-0.9,0.4-2,0.1-2.4-0.8c-0.4-0.9-0.1-2,0.8-2.4
          C35.2,13.4,36.3,13.8,36.8,14.7" fill="url(#gradient)"></path>
        <path id="XMLID_2135_" class="st0" d="M41,22c0.6,1.2,0.1,2.6-1.1,3.2c-1.2,0.6-2.6,0.1-3.2-1.1c-0.6-1.2-0.1-2.6,1.1-3.2
          C39,20.3,40.4,20.8,41,22" fill="url(#gradient)"></path>
        <path id="XMLID_2136_" class="st0" d="M45.9,30.6c0.7,1.5,0.1,3.3-1.4,4c-1.5,0.7-3.3,0.1-4-1.4c-0.7-1.5-0.1-3.3,1.4-4
          C43.4,28.5,45.1,29.1,45.9,30.6" fill="url(#gradient)"></path>
        <path id="XMLID_2137_" class="st0" d="M18.9,32c0.9,0.4,1.4,1.4,1,2.3c-0.4,0.9-1.4,1.4-2.3,1c-0.9-0.4-1.4-1.4-1-2.3
          C17,32.1,18,31.6,18.9,32" fill="url(#gradient)"></path>
        <path id="XMLID_2138_" class="st0" d="M27,34.6c1.2,0.5,1.8,1.9,1.3,3.1c-0.5,1.2-1.9,1.8-3.1,1.3c-1.2-0.5-1.8-1.9-1.3-3.1
          C24.4,34.7,25.8,34.1,27,34.6" fill="url(#gradient)"></path>
        <path id="XMLID_2139_" class="st0" d="M36.3,37.8c1.5,0.6,2.3,2.4,1.6,3.9c-0.6,1.5-2.4,2.3-3.9,1.6c-1.5-0.6-2.3-2.3-1.6-3.9
          C33.1,37.9,34.8,37.2,36.3,37.8" fill="url(#gradient)"></path>
        <path id="XMLID_2140_" class="st0"...

CSS

#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: #FED208; stop-opacity: 1; }
.stop2 { stop-color: #FED208; stop-opacity: 1; }

JavaScript

$("svg:eq(0)").velocity({ opacity: ".3" }, { loop: true, duration: 1000 });