Search code examples
htmlanimationsvgsvg-animate

SVG honeycomb polygon filling animation

Can I fill the SVG using path with animation? Like this

enter image description here

<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" stroke="white" />
   <g opacity="0.5">
      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="0" width="21" height="17">
         <path d="M10 17V6.5L11 0L30.5 13.5L22 10L10 17Z" fill="white" />
      </mask>
      <g mask="url(#mask0)">
         <path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" fill="white" />
      </g>
   </g>
</svg>
Solution

  • The idea is from @enxaneta answer, but I implement it without JavaScript and with original path. The explanation you can find in his answer. If you want to have the duration in 60 seconds then you can change dur="10s" to dur="60s".

    svg{background:#956}
    <svg width="180" viewBox="0 0 31 29">
<g transform="translate(6 -3)">
    <clipPath id="clip">
        <path id="path" d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z"/>
    </clipPath>
    <path d="M10,12.5A5,5 0 0 1 10,22.5A5,5 0 0 1 10,12.5" fill="none" stroke="#cab" stroke-dasharray="0 62.84" stroke-width="10" clip-path="url(#clip)">
        <animate attributeName="stroke-dasharray"
            values="0 31.4;10 21.4;20 11.4;31.4 0" begin="0s" dur="10s" fill="freeze"/>
    </path>
    <use xlink:href="#path"  stroke="#fff" fill="none"/>
</g>
</svg>