How to animate pattern items sequentially?

user_11173494 0
Viewed 119

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

animation svg css
1 Answers

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>

user_78973950
Related