JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<svg version="1.1" class="dash" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 1008"><path class="hexagon" fill="#4ABA74" d="M740.265,274.43L424.931,92.376c-16.172-9.341-37.102-9.341-53.28,0L56.324,274.43c-16.433,9.491-26.64,27.168-26.64,46.149v364.109c0,18.975,10.208,36.659,26.64,46.143l315.327,182.061c8.089,4.667,17.299,7.137,26.64,7.137s18.551-2.464,26.64-7.137l315.327-182.55c16.433-9.491,26.64-27.168,26.64-46.143V320.586C766.905,301.599,756.697,283.914,740.265,274.43z"></path></svg>

CSS

.dash:hover .hexagon{
  stroke:#38985A;
  stroke-dasharray: 629; 
  stroke-linecap:round;
  stroke-width: 20;
  stroke-linejoin:round;
  stroke-dashoffset: 120;
  -webkit-animation:dash 4s ease-in-out infinite;
}

@-webkit-keyframes dash {
  to{
    stroke-dashoffset: 2637;   
  }
}