Skip to content

Instantly share code, notes, and snippets.

@kobitoDevelopment

kobitoDevelopment/html

Created February 17, 2025 14:32
Show Gist options
  • Save kobitoDevelopment/8b57a66a2e75dfac7be0413bbbbb92ba to your computer and use it in GitHub Desktop.
Save kobitoDevelopment/8b57a66a2e75dfac7be0413bbbbb92ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html
<svg
class="ho-top-fv-animation-svg"
viewBox="0 0 120 158"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Path1 -->
<path
d="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
fill="#FFCAE3"
>
<!-- Path1-1 ~ Path1-2 -->
<animate
id="path1-1"
attributeName="d"
from="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path1-8.end + 0.2s"
fill="freeze"
/>
<!-- Path1-2 ~ Path1-3 -->
<animate
id="path1-2"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path1-1.end + 0.2s"
fill="freeze"
/>
<!-- Path1-3 ~ Path1-4 -->
<animate
id="path1-3"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M106.93 25.877C114.071 25.877 119.86 20.0842 119.86 12.9385C119.86 5.79276 114.071 0 106.93 0C99.789 0 94 5.79276 94 12.9385C94 20.0842 99.789 25.877 106.93 25.877Z"
dur="0.2s"
begin="path1-2.end +0.2s"
fill="freeze"
/>
<!-- Path1-4 ~ Path1-5 -->
<animate
id="path1-4"
attributeName="d"
from="M106.93 25.877C114.071 25.877 119.86 20.0842 119.86 12.9385C119.86 5.79276 114.071 0 106.93 0C99.789 0 94 5.79276 94 12.9385C94 20.0842 99.789 25.877 106.93 25.877Z"
to="M106.93 113.877C114.071 113.877 119.86 108.084 119.86 100.938C119.86 93.7928 114.071 88 106.93 88C99.789 88 94 93.7928 94 100.938C94 108.084 99.789 113.877 106.93 113.877Z"
dur="0.2s"
begin="path1-3.end +0.2s"
fill="freeze"
/>
<!-- Path1-5 ~ Path1-6 -->
<animate
id="path1-5"
attributeName="d"
from="M106.93 113.877C114.071 113.877 119.86 108.084 119.86 100.938C119.86 93.7928 114.071 88 106.93 88C99.789 88 94 93.7928 94 100.938C94 108.084 99.789 113.877 106.93 113.877Z"
to="M59.9263 113.877C67.0674 113.877 72.8565 108.084 72.8565 100.938C72.8565 93.7928 67.0674 88 59.9263 88C52.7851 88 46.9961 93.7928 46.9961 100.938C46.9961 108.084 52.7851 113.877 59.9263 113.877Z"
dur="0.2s"
begin="path1-4.end +0.2s"
fill="freeze"
/>
<!-- Path1-6 ~ Path1-7 -->
<animate
id="path1-6"
attributeName="d"
from="M59.9263 113.877C67.0674 113.877 72.8565 108.084 72.8565 100.938C72.8565 93.7928 67.0674 88 59.9263 88C52.7851 88 46.9961 93.7928 46.9961 100.938C46.9961 108.084 52.7851 113.877 59.9263 113.877Z"
to="M59.9263 113.877C67.0674 113.877 72.8565 108.084 72.8565 100.938C72.8565 93.7928 67.0674 88 59.9263 88C52.7851 88 46.9961 93.7928 46.9961 100.938C46.9961 108.084 52.7851 113.877 59.9263 113.877Z"
dur="0.2s"
begin="path1-5.end +0.2s"
fill="freeze"
/>
<!-- Path1-7 ~ Path1-8 -->
<animate
id="path1-7"
attributeName="d"
from="M59.9263 113.877C67.0674 113.877 72.8565 108.084 72.8565 100.938C72.8565 93.7928 67.0674 88 59.9263 88C52.7851 88 46.9961 93.7928 46.9961 100.938C46.9961 108.084 52.7851 113.877 59.9263 113.877Z"
to="M12.9302 113.877C20.0713 113.877 25.8604 108.084 25.8604 100.938C25.8604 93.7928 20.0713 88 12.9302 88C5.78904 88 0 93.7928 0 100.938C0 108.084 5.78904 113.877 12.9302 113.877Z"
dur="0.2s"
begin="path1-6.end +0.2s"
fill="freeze"
/>
<!-- Path1-8 ~ Path1-1 -->
<animate
id="path1-8"
attributeName="d"
from="M12.9302 113.877C20.0713 113.877 25.8604 108.084 25.8604 100.938C25.8604 93.7928 20.0713 88 12.9302 88C5.78904 88 0 93.7928 0 100.938C0 108.084 5.78904 113.877 12.9302 113.877Z"
to="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
dur="0.2s"
begin="path1-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path2 -->
<path
d="M59.6841 25.877C66.8252 25.877 72.6143 20.0842 72.6143 12.9385C72.6143 5.79276 66.8252 0 59.6841 0C52.5429 0 46.7539 5.79276 46.7539 12.9385C46.7539 20.0842 52.5429 25.877 59.6841 25.877Z"
fill="#BFE5FF"
>
<!-- Path2-1 ~ Path2-2 -->
<animate
id="path2-1"
attributeName="d"
from="M59.6841 25.877C66.8252 25.877 72.6143 20.0842 72.6143 12.9385C72.6143 5.79276 66.8252 0 59.6841 0C52.5429 0 46.7539 5.79276 46.7539 12.9385C46.7539 20.0842 52.5429 25.877 59.6841 25.877Z"
to="M106.684 25.877C113.825 25.877 119.614 20.0842 119.614 12.9385C119.614 5.79276 113.825 0 106.684 0C99.5429 0 93.7539 5.79276 93.7539 12.9385C93.7539 20.0842 99.5429 25.877 106.684 25.877Z"
dur="0.2s"
begin="path2-8.end + 0.2s"
fill="freeze"
/>
<!-- Path2-2 ~ Path2-3 -->
<animate
id="path2-2"
attributeName="d"
from="M106.684 25.877C113.825 25.877 119.614 20.0842 119.614 12.9385C119.614 5.79276 113.825 0 106.684 0C99.5429 0 93.7539 5.79276 93.7539 12.9385C93.7539 20.0842 99.5429 25.877 106.684 25.877Z"
to="M106.684 113.877C113.825 113.877 119.614 108.084 119.614 100.938C119.614 93.7928 113.825 88 106.684 88C99.5429 88 93.7539 93.7928 93.7539 100.938C93.7539 108.084 99.5429 113.877 106.684 113.877Z"
dur="0.2s"
begin="path2-1.end + 0.2s"
fill="freeze"
/>
<!-- Path2-3 ~ Path2-4 -->
<animate
id="path2-3"
attributeName="d"
from="M106.684 113.877C113.825 113.877 119.614 108.084 119.614 100.938C119.614 93.7928 113.825 88 106.684 88C99.5429 88 93.7539 93.7928 93.7539 100.938C93.7539 108.084 99.5429 113.877 106.684 113.877Z"
to="M59.9341 113.877C67.0752 113.877 72.8643 108.084 72.8643 100.938C72.8643 93.7928 67.0752 88 59.9341 88C52.7929 88 47.0039 93.7928 47.0039 100.938C47.0039 108.084 52.7929 113.877 59.9341 113.877Z"
dur="0.2s"
begin="path2-2.end +0.2s"
fill="freeze"
/>
<!-- Path2-4 ~ Path2-5 -->
<animate
id="path2-4"
attributeName="d"
from="M59.9341 113.877C67.0752 113.877 72.8643 108.084 72.8643 100.938C72.8643 93.7928 67.0752 88 59.9341 88C52.7929 88 47.0039 93.7928 47.0039 100.938C47.0039 108.084 52.7929 113.877 59.9341 113.877Z"
to="M59.9341 113.877C67.0752 113.877 72.8643 108.084 72.8643 100.938C72.8643 93.7928 67.0752 88 59.9341 88C52.7929 88 47.0039 93.7928 47.0039 100.938C47.0039 108.084 52.7929 113.877 59.9341 113.877Z"
dur="0.2s"
begin="path2-3.end +0.2s"
fill="freeze"
/>
<!-- Path2-5 ~ Path2-6 -->
<animate
id="path2-5"
attributeName="d"
from="M59.9341 113.877C67.0752 113.877 72.8643 108.084 72.8643 100.938C72.8643 93.7928 67.0752 88 59.9341 88C52.7929 88 47.0039 93.7928 47.0039 100.938C47.0039 108.084 52.7929 113.877 59.9341 113.877Z"
to="M12.9302 113.877C20.0713 113.877 25.8604 108.084 25.8604 100.938C25.8604 93.7928 20.0713 88 12.9302 88C5.78904 88 0 93.7928 0 100.938C0 108.084 5.78904 113.877 12.9302 113.877Z"
dur="0.2s"
begin="path2-4.end +0.2s"
fill="freeze"
/>
<!-- Path2-6 ~ Path2-7 -->
<animate
id="path2-6"
attributeName="d"
from="M12.9302 113.877C20.0713 113.877 25.8604 108.084 25.8604 100.938C25.8604 93.7928 20.0713 88 12.9302 88C5.78904 88 0 93.7928 0 100.938C0 108.084 5.78904 113.877 12.9302 113.877Z"
to="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
dur="0.2s"
begin="path2-5.end +0.2s"
fill="freeze"
/>
<!-- Path2-7 ~ Path2-8 -->
<animate
id="path2-7"
attributeName="d"
from="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path2-6.end +0.2s"
fill="freeze"
/>
<!-- Path2-8 ~ Path2-1 -->
<animate
id="path2-8"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M59.6841 25.877C66.8252 25.877 72.6143 20.0842 72.6143 12.9385C72.6143 5.79276 66.8252 0 59.6841 0C52.5429 0 46.7539 5.79276 46.7539 12.9385C46.7539 20.0842 52.5429 25.877 59.6841 25.877Z"
dur="0.2s"
begin="path2-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path3 -->
<path
d="M12.9302 69.917C20.0713 69.917 25.8604 64.1243 25.8604 56.9785C25.8604 49.8328 20.0713 44.04 12.9302 44.04C5.78904 44.04 0 49.8328 0 56.9785C0 64.1243 5.78904 69.917 12.9302 69.917Z"
fill="#CDCBFF"
>
<!-- Path3-1 ~ Path3-2 -->
<animate
id="path3-1"
attributeName="d"
from="M12.9302 69.917C20.0713 69.917 25.8604 64.1243 25.8604 56.9785C25.8604 49.8328 20.0713 44.04 12.9302 44.04C5.78904 44.04 0 49.8328 0 56.9785C0 64.1243 5.78904 69.917 12.9302 69.917Z"
to="M59.9302 69.917C67.0713 69.917 72.8604 64.1243 72.8604 56.9785C72.8604 49.8328 67.0713 44.04 59.9302 44.04C52.789 44.04 47 49.8328 47 56.9785C47 64.1243 52.789 69.917 59.9302 69.917Z"
dur="0.2s"
begin="path3-8.end + 0.2s"
fill="freeze"
/>
<!-- Path3-2 ~ Path3-3 -->
<animate
id="path3-2"
attributeName="d"
from="M59.9302 69.917C67.0713 69.917 72.8604 64.1243 72.8604 56.9785C72.8604 49.8328 67.0713 44.04 59.9302 44.04C52.789 44.04 47 49.8328 47 56.9785C47 64.1243 52.789 69.917 59.9302 69.917Z"
to="M59.9302 69.917C67.0713 69.917 72.8604 64.1243 72.8604 56.9785C72.8604 49.8328 67.0713 44.04 59.9302 44.04C52.789 44.04 47 49.8328 47 56.9785C47 64.1243 52.789 69.917 59.9302 69.917Z"
dur="0.2s"
begin="path3-1.end + 0.2s"
fill="freeze"
/>
<!-- Path3-3 ~ Path3-4 -->
<animate
id="path3-3"
attributeName="d"
from="M59.9302 69.917C67.0713 69.917 72.8604 64.1243 72.8604 56.9785C72.8604 49.8328 67.0713 44.04 59.9302 44.04C52.789 44.04 47 49.8328 47 56.9785C47 64.1243 52.789 69.917 59.9302 69.917Z"
to="M106.93 69.917C114.071 69.917 119.86 64.1243 119.86 56.9785C119.86 49.8328 114.071 44.04 106.93 44.04C99.789 44.04 94 49.8328 94 56.9785C94 64.1243 99.789 69.917 106.93 69.917Z"
dur="0.2s"
begin="path3-2.end +0.2s"
fill="freeze"
/>
<!-- Path3-4 ~ Path3-5 -->
<animate
id="path3-4"
attributeName="d"
from="M106.93 69.917C114.071 69.917 119.86 64.1243 119.86 56.9785C119.86 49.8328 114.071 44.04 106.93 44.04C99.789 44.04 94 49.8328 94 56.9785C94 64.1243 99.789 69.917 106.93 69.917Z"
to="M106.93 157.917C114.071 157.917 119.86 152.124 119.86 144.979C119.86 137.833 114.071 132.04 106.93 132.04C99.789 132.04 94 137.833 94 144.979C94 152.124 99.789 157.917 106.93 157.917Z"
dur="0.2s"
begin="path3-3.end +0.2s"
fill="freeze"
/>
<!-- Path3-5 ~ Path3-6 -->
<animate
id="path3-5"
attributeName="d"
from="M106.93 157.917C114.071 157.917 119.86 152.124 119.86 144.979C119.86 137.833 114.071 132.04 106.93 132.04C99.789 132.04 94 137.833 94 144.979C94 152.124 99.789 157.917 106.93 157.917Z"
to="M59.9263 157.917C67.0674 157.917 72.8565 152.124 72.8565 144.979C72.8565 137.833 67.0674 132.04 59.9263 132.04C52.7851 132.04 46.9961 137.833 46.9961 144.979C46.9961 152.124 52.7851 157.917 59.9263 157.917Z"
dur="0.2s"
begin="path3-4.end +0.2s"
fill="freeze"
/>
<!-- Path3-6 ~ Path3-7 -->
<animate
id="path3-6"
attributeName="d"
from="M59.9263 157.917C67.0674 157.917 72.8565 152.124 72.8565 144.979C72.8565 137.833 67.0674 132.04 59.9263 132.04C52.7851 132.04 46.9961 137.833 46.9961 144.979C46.9961 152.124 52.7851 157.917 59.9263 157.917Z"
to="M59.9263 157.917C67.0674 157.917 72.8565 152.124 72.8565 144.979C72.8565 137.833 67.0674 132.04 59.9263 132.04C52.7851 132.04 46.9961 137.833 46.9961 144.979C46.9961 152.124 52.7851 157.917 59.9263 157.917Z"
dur="0.2s"
begin="path3-5.end +0.2s"
fill="freeze"
/>
<!-- Path3-7 ~ Path3-8 -->
<animate
id="path3-7"
attributeName="d"
from="M59.9263 157.917C67.0674 157.917 72.8565 152.124 72.8565 144.979C72.8565 137.833 67.0674 132.04 59.9263 132.04C52.7851 132.04 46.9961 137.833 46.9961 144.979C46.9961 152.124 52.7851 157.917 59.9263 157.917Z"
to="M12.9302 157.917C20.0713 157.917 25.8604 152.124 25.8604 144.979C25.8604 137.833 20.0713 132.04 12.9302 132.04C5.78904 132.04 0 137.833 0 144.979C0 152.124 5.78904 157.917 12.9302 157.917Z"
dur="0.2s"
begin="path3-6.end +0.2s"
fill="freeze"
/>
<!-- Path3-8 ~ Path3-1 -->
<animate
id="path3-8"
attributeName="d"
from="M12.9302 157.917C20.0713 157.917 25.8604 152.124 25.8604 144.979C25.8604 137.833 20.0713 132.04 12.9302 132.04C5.78904 132.04 0 137.833 0 144.979C0 152.124 5.78904 157.917 12.9302 157.917Z"
to="M12.9302 69.917C20.0713 69.917 25.8604 64.1243 25.8604 56.9785C25.8604 49.8328 20.0713 44.04 12.9302 44.04C5.78904 44.04 0 49.8328 0 56.9785C0 64.1243 5.78904 69.917 12.9302 69.917Z"
dur="0.2s"
begin="path3-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path4 -->
<path
d="M59.6841 69.917C66.8252 69.917 72.6143 64.1243 72.6143 56.9785C72.6143 49.8328 66.8252 44.04 59.6841 44.04C52.5429 44.04 46.7539 49.8328 46.7539 56.9785C46.7539 64.1243 52.5429 69.917 59.6841 69.917Z"
fill="#B8F3DE"
>
<!-- Path4-1 ~ Path4-2 -->
<animate
id="path4-1"
attributeName="d"
from="M59.6841 69.917C66.8252 69.917 72.6143 64.1243 72.6143 56.9785C72.6143 49.8328 66.8252 44.04 59.6841 44.04C52.5429 44.04 46.7539 49.8328 46.7539 56.9785C46.7539 64.1243 52.5429 69.917 59.6841 69.917Z"
to="M106.684 69.917C113.825 69.917 119.614 64.1243 119.614 56.9785C119.614 49.8328 113.825 44.04 106.684 44.04C99.5429 44.04 93.7539 49.8328 93.7539 56.9785C93.7539 64.1243 99.5429 69.917 106.684 69.917Z"
dur="0.2s"
begin="path4-8.end + 0.2s"
fill="freeze"
/>
<!-- Path4-2 ~ Path4-3 -->
<animate
id="path4-2"
attributeName="d"
from="M106.684 69.917C113.825 69.917 119.614 64.1243 119.614 56.9785C119.614 49.8328 113.825 44.04 106.684 44.04C99.5429 44.04 93.7539 49.8328 93.7539 56.9785C93.7539 64.1243 99.5429 69.917 106.684 69.917Z"
to="M106.684 157.917C113.825 157.917 119.614 152.124 119.614 144.979C119.614 137.833 113.825 132.04 106.684 132.04C99.5429 132.04 93.7539 137.833 93.7539 144.979C93.7539 152.124 99.5429 157.917 106.684 157.917Z"
dur="0.2s"
begin="path4-1.end + 0.2s"
fill="freeze"
/>
<!-- Path4-3 ~ Path4-4 -->
<animate
id="path4-3"
attributeName="d"
from="M106.684 157.917C113.825 157.917 119.614 152.124 119.614 144.979C119.614 137.833 113.825 132.04 106.684 132.04C99.5429 132.04 93.7539 137.833 93.7539 144.979C93.7539 152.124 99.5429 157.917 106.684 157.917Z"
to="M59.9341 157.917C67.0752 157.917 72.8643 152.124 72.8643 144.979C72.8643 137.833 67.0752 132.04 59.9341 132.04C52.7929 132.04 47.0039 137.833 47.0039 144.979C47.0039 152.124 52.7929 157.917 59.9341 157.917Z"
dur="0.2s"
begin="path4-2.end +0.2s"
fill="freeze"
/>
<!-- Path4-4 ~ Path4-5 -->
<animate
id="path4-4"
attributeName="d"
from="M59.9341 157.917C67.0752 157.917 72.8643 152.124 72.8643 144.979C72.8643 137.833 67.0752 132.04 59.9341 132.04C52.7929 132.04 47.0039 137.833 47.0039 144.979C47.0039 152.124 52.7929 157.917 59.9341 157.917Z"
to="M59.9341 157.917C67.0752 157.917 72.8643 152.124 72.8643 144.979C72.8643 137.833 67.0752 132.04 59.9341 132.04C52.7929 132.04 47.0039 137.833 47.0039 144.979C47.0039 152.124 52.7929 157.917 59.9341 157.917Z"
dur="0.2s"
begin="path4-3.end +0.2s"
fill="freeze"
/>
<!-- Path4-5 ~ Path4-6 -->
<animate
id="path4-5"
attributeName="d"
from="M59.9341 157.917C67.0752 157.917 72.8643 152.124 72.8643 144.979C72.8643 137.833 67.0752 132.04 59.9341 132.04C52.7929 132.04 47.0039 137.833 47.0039 144.979C47.0039 152.124 52.7929 157.917 59.9341 157.917Z"
to="M12.9302 157.917C20.0713 157.917 25.8604 152.124 25.8604 144.979C25.8604 137.833 20.0713 132.04 12.9302 132.04C5.78904 132.04 0 137.833 0 144.979C0 152.124 5.78904 157.917 12.9302 157.917Z"
dur="0.2s"
begin="path4-4.end +0.2s"
fill="freeze"
/>
<!-- Path4-6 ~ Path4-7 -->
<animate
id="path4-6"
attributeName="d"
from="M12.9302 157.917C20.0713 157.917 25.8604 152.124 25.8604 144.979C25.8604 137.833 20.0713 132.04 12.9302 132.04C5.78904 132.04 0 137.833 0 144.979C0 152.124 5.78904 157.917 12.9302 157.917Z"
to="M12.9302 69.917C20.0713 69.917 25.8604 64.1243 25.8604 56.9785C25.8604 49.8328 20.0713 44.04 12.9302 44.04C5.78904 44.04 0 49.8328 0 56.9785C0 64.1243 5.78904 69.917 12.9302 69.917Z"
dur="0.2s"
begin="path4-5.end +0.2s"
fill="freeze"
/>
<!-- Path4-7 ~ Path4-8 -->
<animate
id="path4-7"
attributeName="d"
from="M12.9302 69.917C20.0713 69.917 25.8604 64.1243 25.8604 56.9785C25.8604 49.8328 20.0713 44.04 12.9302 44.04C5.78904 44.04 0 49.8328 0 56.9785C0 64.1243 5.78904 69.917 12.9302 69.917Z"
to="M59.9302 69.917C67.0713 69.917 72.8604 64.1243 72.8604 56.9785C72.8604 49.8328 67.0713 44.04 59.9302 44.04C52.789 44.04 47 49.8328 47 56.9785C47 64.1243 52.789 69.917 59.9302 69.917Z"
dur="0.2s"
begin="path4-6.end +0.2s"
fill="freeze"
/>
<!-- Path4-8 ~ Path4-1 -->
<animate
id="path4-8"
attributeName="d"
from="M59.9302 69.917C67.0713 69.917 72.8604 64.1243 72.8604 56.9785C72.8604 49.8328 67.0713 44.04 59.9302 44.04C52.789 44.04 47 49.8328 47 56.9785C47 64.1243 52.789 69.917 59.9302 69.917Z"
to="M59.6841 69.917C66.8252 69.917 72.6143 64.1243 72.6143 56.9785C72.6143 49.8328 66.8252 44.04 59.6841 44.04C52.5429 44.04 46.7539 49.8328 46.7539 56.9785C46.7539 64.1243 52.5429 69.917 59.6841 69.917Z"
dur="0.2s"
begin="path4-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path5 -->
<path
d="M60.3189 113.957C67.46 113.957 73.249 108.164 73.249 101.019C73.249 93.8728 67.46 88.0801 60.3189 88.0801C53.1777 88.0801 47.3887 93.8728 47.3887 101.019C47.3887 108.164 53.1777 113.957 60.3189 113.957Z"
fill="#FFCAE3"
>
<!-- Path5-1 ~ Path5-2 -->
<animate
id="path5-1"
attributeName="d"
from="M60.3189 113.957C67.46 113.957 73.249 108.164 73.249 101.019C73.249 93.8728 67.46 88.0801 60.3189 88.0801C53.1777 88.0801 47.3887 93.8728 47.3887 101.019C47.3887 108.164 53.1777 113.957 60.3189 113.957Z"
to="M12.9302 113.957C20.0713 113.957 25.8604 108.164 25.8604 101.019C25.8604 93.8728 20.0713 88.0801 12.9302 88.0801C5.78904 88.0801 0 93.8728 0 101.019C0 108.164 5.78904 113.957 12.9302 113.957Z"
dur="0.2s"
begin="path5-8.end + 0.2s"
fill="freeze"
/>
<!-- Path5-2 ~ Path5-3 -->
<animate
id="path5-2"
attributeName="d"
from="M12.9302 113.957C20.0713 113.957 25.8604 108.164 25.8604 101.019C25.8604 93.8728 20.0713 88.0801 12.9302 88.0801C5.78904 88.0801 0 93.8728 0 101.019C0 108.164 5.78904 113.957 12.9302 113.957Z"
to="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
dur="0.2s"
begin="path5-1.end + 0.2s"
fill="freeze"
/>
<!-- Path5-3 ~ Path5-4 -->
<animate
id="path5-3"
attributeName="d"
from="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path5-2.end +0.2s"
fill="freeze"
/>
<!-- Path5-4 ~ Path5-5 -->
<animate
id="path5-4"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path5-3.end +0.2s"
fill="freeze"
/>
<!-- Path5-5 ~ Path5-6 -->
<animate
id="path5-5"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M106.93 25.877C114.071 25.877 119.86 20.0842 119.86 12.9385C119.86 5.79276 114.071 0 106.93 0C99.789 0 94 5.79276 94 12.9385C94 20.0842 99.789 25.877 106.93 25.877Z"
dur="0.2s"
begin="path5-4.end +0.2s"
fill="freeze"
/>
<!-- Path5-6 ~ Path5-7 -->
<animate
id="path5-6"
attributeName="d"
from="M106.93 25.877C114.071 25.877 119.86 20.0842 119.86 12.9385C119.86 5.79276 114.071 0 106.93 0C99.789 0 94 5.79276 94 12.9385C94 20.0842 99.789 25.877 106.93 25.877Z"
to="M106.93 113.877C114.071 113.877 119.86 108.084 119.86 100.938C119.86 93.7928 114.071 88 106.93 88C99.789 88 94 93.7928 94 100.938C94 108.084 99.789 113.877 106.93 113.877Z"
dur="0.2s"
begin="path5-5.end +0.2s"
fill="freeze"
/>
<!-- Path5-7 ~ Path5-8 -->
<animate
id="path5-7"
attributeName="d"
from="M106.93 113.877C114.071 113.877 119.86 108.084 119.86 100.938C119.86 93.7928 114.071 88 106.93 88C99.789 88 94 93.7928 94 100.938C94 108.084 99.789 113.877 106.93 113.877Z"
to="M59.9341 113.877C67.0752 113.877 72.8643 108.084 72.8643 100.938C72.8643 93.7928 67.0752 88 59.9341 88C52.7929 88 47.0039 93.7928 47.0039 100.938C47.0039 108.084 52.7929 113.877 59.9341 113.877Z"
dur="0.2s"
begin="path5-6.end +0.2s"
fill="freeze"
/>
<!-- Path5-8 ~ Path5-1 -->
<animate
id="path5-8"
attributeName="d"
from="M59.9341 113.877C67.0752 113.877 72.8643 108.084 72.8643 100.938C72.8643 93.7928 67.0752 88 59.9341 88C52.7929 88 47.0039 93.7928 47.0039 100.938C47.0039 108.084 52.7929 113.877 59.9341 113.877Z"
to="M60.3189 113.957C67.46 113.957 73.249 108.164 73.249 101.019C73.249 93.8728 67.46 88.0801 60.3189 88.0801C53.1777 88.0801 47.3887 93.8728 47.3887 101.019C47.3887 108.164 53.1777 113.957 60.3189 113.957Z"
dur="0.2s"
begin="path5-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path6 -->
<path
d="M107.069 113.957C114.21 113.957 119.999 108.164 119.999 101.019C119.999 93.8728 114.21 88.0801 107.069 88.0801C99.9277 88.0801 94.1387 93.8728 94.1387 101.019C94.1387 108.164 99.9277 113.957 107.069 113.957Z"
fill="#BFE5FF"
>
<!-- Path6-1 ~ Path6-2 -->
<animate
id="path6-1"
attributeName="d"
from="M107.069 113.957C114.21 113.957 119.999 108.164 119.999 101.019C119.999 93.8728 114.21 88.0801 107.069 88.0801C99.9277 88.0801 94.1387 93.8728 94.1387 101.019C94.1387 108.164 99.9277 113.957 107.069 113.957Z"
to="M59.6802 113.957C66.8213 113.957 72.6104 108.164 72.6104 101.019C72.6104 93.8728 66.8213 88.0801 59.6802 88.0801C52.539 88.0801 46.75 93.8728 46.75 101.019C46.75 108.164 52.539 113.957 59.6802 113.957Z"
dur="0.2s"
begin="path6-8.end + 0.2s"
fill="freeze"
/>
<!-- Path6-2 ~ Path6-3 -->
<animate
id="path6-2"
attributeName="d"
from="M59.6802 113.957C66.8213 113.957 72.6104 108.164 72.6104 101.019C72.6104 93.8728 66.8213 88.0801 59.6802 88.0801C52.539 88.0801 46.75 93.8728 46.75 101.019C46.75 108.164 52.539 113.957 59.6802 113.957Z"
to="M59.6802 113.957C66.8213 113.957 72.6104 108.164 72.6104 101.019C72.6104 93.8728 66.8213 88.0801 59.6802 88.0801C52.539 88.0801 46.75 93.8728 46.75 101.019C46.75 108.164 52.539 113.957 59.6802 113.957Z"
dur="0.2s"
begin="path6-1.end + 0.2s"
fill="freeze"
/>
<!-- Path6-3 ~ Path6-4 -->
<animate
id="path6-3"
attributeName="d"
from="M59.6802 113.957C66.8213 113.957 72.6104 108.164 72.6104 101.019C72.6104 93.8728 66.8213 88.0801 59.6802 88.0801C52.539 88.0801 46.75 93.8728 46.75 101.019C46.75 108.164 52.539 113.957 59.6802 113.957Z"
to="M12.9302 113.957C20.0713 113.957 25.8604 108.164 25.8604 101.019C25.8604 93.8728 20.0713 88.0801 12.9302 88.0801C5.78904 88.0801 0 93.8728 0 101.019C0 108.164 5.78904 113.957 12.9302 113.957Z"
dur="0.2s"
begin="path6-2.end +0.2s"
fill="freeze"
/>
<!-- Path6-4 ~ Path6-5 -->
<animate
id="path6-4"
attributeName="d"
from="M12.9302 113.957C20.0713 113.957 25.8604 108.164 25.8604 101.019C25.8604 93.8728 20.0713 88.0801 12.9302 88.0801C5.78904 88.0801 0 93.8728 0 101.019C0 108.164 5.78904 113.957 12.9302 113.957Z"
to="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
dur="0.2s"
begin="path6-3.end +0.2s"
fill="freeze"
/>
<!-- Path6-5 ~ Path6-6 -->
<animate
id="path6-5"
attributeName="d"
from="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path6-4.end +0.2s"
fill="freeze"
/>
<!-- Path6-6 ~ Path6-7 -->
<animate
id="path6-6"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
dur="0.2s"
begin="path6-5.end +0.2s"
fill="freeze"
/>
<!-- Path6-7 ~ Path6-8 -->
<animate
id="path6-7"
attributeName="d"
from="M59.9302 25.877C67.0713 25.877 72.8604 20.0842 72.8604 12.9385C72.8604 5.79276 67.0713 0 59.9302 0C52.789 0 47 5.79276 47 12.9385C47 20.0842 52.789 25.877 59.9302 25.877Z"
to="M106.93 25.877C114.071 25.877 119.86 20.0842 119.86 12.9385C119.86 5.79276 114.071 0 106.93 0C99.789 0 94 5.79276 94 12.9385C94 20.0842 99.789 25.877 106.93 25.877Z"
dur="0.2s"
begin="path6-6.end +0.2s"
fill="freeze"
/>
<!-- Path6-8 ~ Path6-1 -->
<animate
id="path6-8"
attributeName="d"
from="M106.93 25.877C114.071 25.877 119.86 20.0842 119.86 12.9385C119.86 5.79276 114.071 0 106.93 0C99.789 0 94 5.79276 94 12.9385C94 20.0842 99.789 25.877 106.93 25.877Z"
to="M107.069 113.957C114.21 113.957 119.999 108.164 119.999 101.019C119.999 93.8728 114.21 88.0801 107.069 88.0801C99.9277 88.0801 94.1387 93.8728 94.1387 101.019C94.1387 108.164 99.9277 113.957 107.069 113.957Z"
dur="0.2s"
begin="path6-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path7 -->
<path
d="M60.3189 158C67.46 158 73.249 152.207 73.249 145.062C73.249 137.916 67.46 132.123 60.3189 132.123C53.1777 132.123 47.3887 137.916 47.3887 145.062C47.3887 152.207 53.1777 158 60.3189 158Z"
fill="#CDCBFF"
>
<!-- Path7-1 ~ Path7-2 -->
<animate
id="path7-1"
attributeName="d"
from="M60.3189 158C67.46 158 73.249 152.207 73.249 145.062C73.249 137.916 67.46 132.123 60.3189 132.123C53.1777 132.123 47.3887 137.916 47.3887 145.062C47.3887 152.207 53.1777 158 60.3189 158Z"
to="M12.9302 158C20.0713 158 25.8604 152.207 25.8604 145.062C25.8604 137.916 20.0713 132.123 12.9302 132.123C5.78904 132.123 0 137.916 0 145.062C0 152.207 5.78904 158 12.9302 158Z"
dur="0.2s"
begin="path6-8.end + 0.2s"
fill="freeze"
/>
<!-- Path7-2 ~ Path7-3 -->
<animate
id="path7-2"
attributeName="d"
from="M12.9302 158C20.0713 158 25.8604 152.207 25.8604 145.062C25.8604 137.916 20.0713 132.123 12.9302 132.123C5.78904 132.123 0 137.916 0 145.062C0 152.207 5.78904 158 12.9302 158Z"
to="M12.9302 69.92C20.0713 69.92 25.8604 64.1272 25.8604 56.9815C25.8604 49.8357 20.0713 44.043 12.9302 44.043C5.78904 44.043 0 49.8357 0 56.9815C0 64.1272 5.78904 69.92 12.9302 69.92Z"
dur="0.2s"
begin="path7-1.end + 0.2s"
fill="freeze"
/>
<!-- Path7-3 ~ Path7-4 -->
<animate
id="path7-3"
attributeName="d"
from="M12.9302 69.92C20.0713 69.92 25.8604 64.1272 25.8604 56.9815C25.8604 49.8357 20.0713 44.043 12.9302 44.043C5.78904 44.043 0 49.8357 0 56.9815C0 64.1272 5.78904 69.92 12.9302 69.92Z"
to="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
dur="0.2s"
begin="path7-2.end +0.2s"
fill="freeze"
/>
<!-- Path7-4 ~ Path7-5 -->
<animate
id="path7-4"
attributeName="d"
from="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
to="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
dur="0.2s"
begin="path7-3.end +0.2s"
fill="freeze"
/>
<!-- Path7-5 ~ Path7-6 -->
<animate
id="path7-5"
attributeName="d"
from="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
to="M106.93 69.92C114.071 69.92 119.86 64.1272 119.86 56.9815C119.86 49.8357 114.071 44.043 106.93 44.043C99.789 44.043 94 49.8357 94 56.9815C94 64.1272 99.789 69.92 106.93 69.92Z"
dur="0.2s"
begin="path7-4.end +0.2s"
fill="freeze"
/>
<!-- Path7-6 ~ Path7-7 -->
<animate
id="path7-6"
attributeName="d"
from="M106.93 69.92C114.071 69.92 119.86 64.1272 119.86 56.9815C119.86 49.8357 114.071 44.043 106.93 44.043C99.789 44.043 94 49.8357 94 56.9815C94 64.1272 99.789 69.92 106.93 69.92Z"
to="M106.93 157.92C114.071 157.92 119.86 152.127 119.86 144.981C119.86 137.836 114.071 132.043 106.93 132.043C99.789 132.043 94 137.836 94 144.981C94 152.127 99.789 157.92 106.93 157.92Z"
dur="0.2s"
begin="path7-5.end +0.2s"
fill="freeze"
/>
<!-- Path7-7 ~ Path7-8 -->
<animate
id="path7-7"
attributeName="d"
from="M106.93 157.92C114.071 157.92 119.86 152.127 119.86 144.981C119.86 137.836 114.071 132.043 106.93 132.043C99.789 132.043 94 137.836 94 144.981C94 152.127 99.789 157.92 106.93 157.92Z"
to="M59.9341 157.92C67.0752 157.92 72.8643 152.127 72.8643 144.981C72.8643 137.836 67.0752 132.043 59.9341 132.043C52.7929 132.043 47.0039 137.836 47.0039 144.981C47.0039 152.127 52.7929 157.92 59.9341 157.92Z"
dur="0.2s"
begin="path7-6.end +0.2s"
fill="freeze"
/>
<!-- Path7-8 ~ Path7-1 -->
<animate
id="path7-8"
attributeName="d"
from="M59.9341 157.92C67.0752 157.92 72.8643 152.127 72.8643 144.981C72.8643 137.836 67.0752 132.043 59.9341 132.043C52.7929 132.043 47.0039 137.836 47.0039 144.981C47.0039 152.127 52.7929 157.92 59.9341 157.92Z"
to="M60.3189 158C67.46 158 73.249 152.207 73.249 145.062C73.249 137.916 67.46 132.123 60.3189 132.123C53.1777 132.123 47.3887 137.916 47.3887 145.062C47.3887 152.207 53.1777 158 60.3189 158Z"
dur="0.2s"
begin="path7-7.end +0.2s"
fill="freeze"
/>
</path>
<!-- Path8 -->
<path
d="M107.069 158C114.21 158 119.999 152.207 119.999 145.062C119.999 137.916 114.21 132.123 107.069 132.123C99.9277 132.123 94.1387 137.916 94.1387 145.062C94.1387 152.207 99.9277 158 107.069 158Z"
fill="#B8F3DE"
>
<!-- Path8-1 ~ Path8-2 -->
<animate
id="path8-1"
attributeName="d"
from="M107.069 158C114.21 158 119.999 152.207 119.999 145.062C119.999 137.916 114.21 132.123 107.069 132.123C99.9277 132.123 94.1387 137.916 94.1387 145.062C94.1387 152.207 99.9277 158 107.069 158Z"
to="M59.6802 158C66.8213 158 72.6104 152.207 72.6104 145.062C72.6104 137.916 66.8213 132.123 59.6802 132.123C52.539 132.123 46.75 137.916 46.75 145.062C46.75 152.207 52.539 158 59.6802 158Z"
dur="0.2s"
begin="path8-8.end + 0.2s"
fill="freeze"
/>
<!-- Path8-2 ~ Path8-3 -->
<animate
id="path8-2"
attributeName="d"
from="M59.6802 158C66.8213 158 72.6104 152.207 72.6104 145.062C72.6104 137.916 66.8213 132.123 59.6802 132.123C52.539 132.123 46.75 137.916 46.75 145.062C46.75 152.207 52.539 158 59.6802 158Z"
to="M59.6802 158C66.8213 158 72.6104 152.207 72.6104 145.062C72.6104 137.916 66.8213 132.123 59.6802 132.123C52.539 132.123 46.75 137.916 46.75 145.062C46.75 152.207 52.539 158 59.6802 158Z"
dur="0.2s"
begin="path8-1.end + 0.2s"
fill="freeze"
/>
<!-- Path8-3 ~ Path8-4 -->
<animate
id="path8-3"
attributeName="d"
from="M59.6802 158C66.8213 158 72.6104 152.207 72.6104 145.062C72.6104 137.916 66.8213 132.123 59.6802 132.123C52.539 132.123 46.75 137.916 46.75 145.062C46.75 152.207 52.539 158 59.6802 158Z"
to="M12.9302 158C20.0713 158 25.8604 152.207 25.8604 145.062C25.8604 137.916 20.0713 132.123 12.9302 132.123C5.78904 132.123 0 137.916 0 145.062C0 152.207 5.78904 158 12.9302 158Z"
dur="0.2s"
begin="path8-2.end +0.2s"
fill="freeze"
/>
<!-- Path8-4 ~ Path8-5 -->
<animate
id="path8-4"
attributeName="d"
from="M12.9302 158C20.0713 158 25.8604 152.207 25.8604 145.062C25.8604 137.916 20.0713 132.123 12.9302 132.123C5.78904 132.123 0 137.916 0 145.062C0 152.207 5.78904 158 12.9302 158Z"
to="M12.9302 69.92C20.0713 69.92 25.8604 64.1272 25.8604 56.9815C25.8604 49.8357 20.0713 44.043 12.9302 44.043C5.78904 44.043 0 49.8357 0 56.9815C0 64.1272 5.78904 69.92 12.9302 69.92Z"
dur="0.2s"
begin="path8-3.end +0.2s"
fill="freeze"
/>
<!-- Path8-5 ~ Path8-6 -->
<animate
id="path8-5"
attributeName="d"
from="M12.9302 69.92C20.0713 69.92 25.8604 64.1272 25.8604 56.9815C25.8604 49.8357 20.0713 44.043 12.9302 44.043C5.78904 44.043 0 49.8357 0 56.9815C0 64.1272 5.78904 69.92 12.9302 69.92Z"
to="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
dur="0.2s"
begin="path8-4.end +0.2s"
fill="freeze"
/>
<!-- Path8-6 ~ Path8-7 -->
<animate
id="path8-6"
attributeName="d"
from="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
to="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
dur="0.2s"
begin="path8-5.end +0.2s"
fill="freeze"
/>
<!-- Path8-7 ~ Path8-8 -->
<animate
id="path8-7"
attributeName="d"
from="M59.9302 69.92C67.0713 69.92 72.8604 64.1272 72.8604 56.9815C72.8604 49.8357 67.0713 44.043 59.9302 44.043C52.789 44.043 47 49.8357 47 56.9815C47 64.1272 52.789 69.92 59.9302 69.92Z"
to="M106.93 69.92C114.071 69.92 119.86 64.1272 119.86 56.9815C119.86 49.8357 114.071 44.043 106.93 44.043C99.789 44.043 94 49.8357 94 56.9815C94 64.1272 99.789 69.92 106.93 69.92Z"
dur="0.2s"
begin="path8-6.end +0.2s"
fill="freeze"
/>
<!-- Path8-8 ~ Path8-1 -->
<animate
id="path8-8"
attributeName="d"
from="M106.93 69.92C114.071 69.92 119.86 64.1272 119.86 56.9815C119.86 49.8357 114.071 44.043 106.93 44.043C99.789 44.043 94 49.8357 94 56.9815C94 64.1272 99.789 69.92 106.93 69.92Z"
to="M107.069 158C114.21 158 119.999 152.207 119.999 145.062C119.999 137.916 114.21 132.123 107.069 132.123C99.9277 132.123 94.1387 137.916 94.1387 145.062C94.1387 152.207 99.9277 158 107.069 158Z"
dur="0.2s"
begin="path8-7.end +0.2s"
fill="freeze"
/>
</path>
</svg>
Raw
js
const path1_1 = document.querySelector("#path1-1")
const path2_1 = document.querySelector("#path2-1")
const path3_1 = document.querySelector("#path3-1")
const path4_1 = document.querySelector("#path4-1")
const path5_1 = document.querySelector("#path5-1")
const path6_1 = document.querySelector("#path6-1")
const path7_1 = document.querySelector("#path7-1")
const path8_1 = document.querySelector("#path8-1")
path1_1.beginElement()
path2_1.beginElement()
path3_1.beginElement()
path4_1.beginElement()
path5_1.beginElement()
path6_1.beginElement()
path7_1.beginElement()
path8_1.beginElement()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment