How to animate pattern items sequentially? - css

Question

<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12">
<animate
attributeName="opacity"
values="0; 1"
keyTimes="0; 1"
dur="1s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="38.48" width="100" height="100" fill="white"></circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
This way animation runs simultaneously for all pattern items.
How to run this sequentially? Start next item animation if the previous one completed?

Answer 1

Instead of animating the circles of the pattern I would animate a radial gradient from white to black, and I would use this gradient to fill the mask circle like so:
<svg viewbox="0 0 100 100">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r="0.01">
<stop offset="0%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
<animate
attributeName="r"
values="0.01; 1"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</radialGradient>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="url(#rg)">
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
SECOND Solution
You may fill the mask circle with white and animate the radius like so:
<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
<animate
attributeName="r"
values="0.01; 38.48"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>