JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<div>
      <svg width="200" height="30">
          <line x1="0" y1="0" x2="600" y2="0" />
      </svg>
      <?xml version="1.0" encoding="UTF-8"?>
<svg width="511px" height="460px" viewBox="0 0 511 460" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
    <title>Group 20</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0.613582952 0.508666667 43.9476141 0.508666667 43.9476141 39.4642283 0.613582952 39.4642283"></polygon>
        <polygon id="path-3" points="0 0.486101266 96.413344 0.486101266 96.413344 69.1135718 0 69.1135718"></polygon>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Home-Updation" transform="translate(-746.000000, -199.000000)">
            <g id="Group-20" transform="translate(746.000000, 199.000000)">
                <g id="Asset-5-Copy" fill-rule="nonzero">
                    <path d="M123.104416,0 L160.035145,0 C342.825841,0.0131964752 491,148.628849 491,331.950983 L491,331.950983 C491,401.565933 434.729531,458 365.31639,458 L254.345505,458 C113.874362,458 1.72027537e-14,343.794565 0,202.915022 L0,123.462324 C-8.32621334e-15,55.2759653 55.1157243,1.25256309e-14 123.104416,0 Z" id="Path" fill="#38265A" opacity="0.02"></path>
                    <polygon id="Path" fill="#8772AD" points="83 70.2847659 108.259742 67 131.158092 127.08805 169 124.931866 162.500208 127.295947 108.879906 135"></polygon>
                    <polygon id="Path" fill="#8772AD" points="101 341.479104 103.851903 337.5011 120.665359 329 132 345.868826 125.347587 351.586483 110.723225 358 108.89898 355.976205 108.52805 352.560688"></polygon>
                    <polygon id="Path" fill="#8772AD" points="291.782772 365.953353 302.703465 441.871711 329 443.092184 301.97498 459 189.43884 456.957941 187.052015 450.927021 182 369.720953"></polygon>
            ...

CSS

svg line {
	stroke-width: 10;
	stroke: #000;
	fill: none;
	stroke-dasharray: 200;
	-webkit-transition: -webkit-transform .6s;
	transition: transform .6s;
}
#Fill-3{
 stroke-dasharray: 200000;
} 

#test{
  stroke-dasharray: 100;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
/* div:hover #test{
   stroke-dasharray: 200000;
} */