JSFiddle - React, Tailwind, and code Playground
HTML
<svg height="1000" width="1000">
<path d="M150 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M250 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M350 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M450 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M550 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M650 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M750 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M850 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M950 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M1150 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M1150 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M1250 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
<path d="M1350 50 L675 600 L625 600 Z" stroke="#110001" stroke-width="10" fill="none" />
</svg>
<hr/>
<div></div>
<hr/>
CSS
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
path {
stroke-dasharray: 100;
animation: dash 5s linear;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
path:hover + path {
animation: example 5s linear infinite both;
}
path:hover + path + path {
animation: example 5s linear infinite both;
}
path:hover + path + path + path {
animation: example 5s linear infinite both;
}
path:hover + path + path + path + path {
animation: example 5s linear infinite both;
}
path:hover + path + path + path + path + path {
animation: example 5s linear infinite both;
}