SVG animate pattern from top left

Question

I got this simple SVG animation that is transforming the pattern from dots to circles on page load.

I am pretty new to SVG animation and have a hard time figure out how to achieve my goal, in addition to what I already got (dots to circles), to have this animation start/fade-in from the top left dot and end in the bottom right dot - is this even possible to achieve with this SVG pattern setup? Is there a way to isolate the dots, and stagger them in one-by-one?

user_1038015 · Answer

You can fade things in with linearGradients. Here, the linearGradients disappear revealing the pattern below them.

Because we have two linearGradients the animation would look faster in the middle than at the start and end (we're multiplying two opacity numbers) so I'm using keySplines to make the animation faster in the middle and slower at the start and end to counteract that.

user_8620333 · Answer

Here is one idea where I will generate the circles using JS. On each iteration I increment the delay using i/j to create the to top-left to bottom-right animation. The position is trivial, the cx is based on i and cy on j

var d = 20;
var nx = 596/d; /* number of circles in a row */
var ny = 255/d; /* number of circles in a columns */

let svg = document.querySelector("svg");

for(var i=0;i');
  }
}

To have a to-right animation keep only the i (same logic if you want a to-bottom one by keeping only the j)

var d = 20;
var nx = 596/d; /* number of circles in a row */
var ny = 255/d; /* number of circles in a columns */

let svg = document.querySelector("svg");

for(var i=0;i');
  }
}

An infinite animation:

var d = 20;
var nx = 596/d; /* number of circles in a row */
var ny = 255/d; /* number of circles in a columns */

let svg = document.querySelector("svg");

for(var i=0;i');
  }
}

And why not from the center:

var d = 20;
var nx = 596/d; /* number of circles in a row */
var ny = 255/d; /* number of circles in a columns */
var ic = nx/2;
var jc = ny/2;

let svg = document.querySelector("svg");

for(var i=0;i');
  }
}

user_271353 · Answer

Add an animated mask with a linearGradient.

SVG animate pattern from top left

3 Answers