Jump to content


Flying in particles to form a shape

Moderator Tag

Recommended Posts

After searching for two hours, I dare to ask this in the forum (I am not even at the point to provide a codepen):



I have an SVG that has a shape and the shape is built by hundereds dots (like this image). The goal is to create an animation when the page loads, that all those particles fly in and form the shape (as it is shown on the image).



What path do I need to take to achieve that? Are there already examples that demonstrate such an animation? I could not find anything like it nor a respective tutorial.


Thanks for your help.

Link to comment
Share on other sites

It might be really slow in SVG, but you could just animate the position of each shape from whatever distance you want.


Much better in canvas. Tupac is still alive!

See the Pen MKwebd by vinsongrant (@vinsongrant) on CodePen

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.