SVG honeycomb polygon filling animation

Question

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

<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>

Can you edit your question and explain what kind of animation do you need? Is it like a charging battery animation? — enxaneta, Jun 24 '20 at 12:33
How is it supposed to animate? Like the second hand of a clock? — Robert Longson, Jun 24 '20 at 12:40
@RohitChahar, thanking on StackOverflow is done by upvoting and by answer accepting. If you are satisfied with some answer below, please mark it as accepted on the left side from the answer and / or upvote it. You will also get 2 points of reputation for this action. — Bharata, Jun 25 '20 at 07:39

enxaneta · Answer 1 · 2020-06-24T13:30:42.003

For the animation I'm using a circle path (#test) and I'm animation the stroke-dasharray property. The path is clipped bu the hexagon path.

As an observation the radius of the animated path is 5 (half the needed radius) and the width of the stroke is 10. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10

let l = test.getTotalLength();// the total length of the path
let stroke = 0;// the initial length of the stroke


function Animation(){
  requestAnimationFrame(Animation);
  if(stroke < l){stroke += .1}else{stroke= 0};//increase the length of the stroke
  
  //the stroke-dasharray's stroke (first parameter) == stroke
  //the stroke-dasharray's gap (second parameter) == the total length of the path (l) minus the length of the stroke
  test.setAttribute("stroke-dasharray",`${stroke} ${l-stroke}`)
}
  
Animation()

svg{border:solid; overflow:visible}

body{background:#ccc}

<svg viewBox="-1 0 22 23" width="200">
  <clipPath id="clip">
  <path id="thePath"  d="M9.00035 1.55536L2.02871 5.42849C1.39378 5.78123 1 6.45047 1 7.17681V15.8232C1 16.5495 1.39378 17.2188 2.02871 17.5715L9.00035 21.4446C9.61973 21.7887 10.3749 21.7794 10.9857 21.4202L17.514 17.58C18.1249 17.2206 18.5 16.5648 18.5 15.8561V7.14389C18.5 6.43516 18.1249 5.77936 17.514 5.42002L10.9857 1.57981C10.375 1.22056 9.61973 1.21126 9.00035 1.55536Z"/>
  </clipPath>
  <desc>The next path is drawing a circle with the radius = 5. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10</desc>
  <path d="M10,6.5 A5,5 0 0 1 10,16.5 A5,5 0 0 1 10,6.5 " id="test" fill="none" stroke="black" stroke-dasharray="0 62.43" stroke-width="10"  clip-path="url(#clip)" />
  
   <use xlink:href="#thePath"  stroke="white" fill="none" />
</svg>

+1. Good answer! I have implemented it from your idea without JavaScript and with original path because I think that topic owner wants it in SVG only. I hope that you have nothing against it? But if you have, then write me and I will delete my answer. — Bharata, Jun 24 '20 at 20:45

score 3 · Accepted Answer · answered Jun 24 '20 at 20:31

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>

SVG honeycomb polygon filling animation

2 Answers2