JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<svg viewbox="0 0 400 100">
  <defs>
    <rect id="rect" width="150" height="100" style="fill:rgb(0,0,255);" />
    <clipPath id="myClip">
      <path d="M 1.5119047,0 130.02381,0.75595238 99.785714,40.065475 18.898809,40.821427 Z"></path>
      </clipPath>
  </defs>
  <g clip-path="url(#myClip)"">
    <use href="#rect"   transform="translate(0,20)"></use>
  </g>
 
    <g clip-path="url(#myClip)" transform="translate(230)">
    <use id="dep2"  href="#rect"></use>
  </g>
  <g class="">
      <path style="stroke-width:8;   stroke:blue"  d="M 20, 20 H 300"></path>
  </g>
  <g class="energia anime">
      <path style="stroke-width:6;  stroke-dasharray: 20; stroke:lightblue" d="M 20, 20 H 300"></path>
  </g>

</svg>

CSS

.energia{
  
}

 .anime {
  animation-duration: 8s;
  animation-name: dash;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

/** KEY FRAMES **/
@keyframes dash {
  to {
    stroke-dashoffset: 200;
  }
}

#dep2{
  transform: rotate(30deg);
}