Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Spawning randomly placed SVGs with no overlap

Recommended Posts



I'm trying to find out what the best approach to this is. I'd like to create a lander that has a bunch of svgs that spawn in random locations, but don't overlap, on page load. Once they're loaded in, they'll passively bob up and down and rotate a bit. 


Is this possible with GSAP, or should I keep looking? I potentially like the idea of using the 2d physics plugin to make them bump off each other, but that's deff phase two. I've attached a screenshot of the mockups to give you a better idea of what I'm after. The object in the middle has a blue roughly-cut background baked into the image and would be placed on top of everything, so no need to add collision avoidance to that part.


Ya'll are great! Thanks238001407_ScreenShot2021-11-05at14_57_19.thumb.png.948f69d8fb603df7e54777c965124ec6.png

Link to comment
Share on other sites

Hi PixelBakery,


That would be incredibly difficult to do without a complex collision detection algorithm as the bounding boxes would overlap.





If the images didn't overlap, you could do a brute force method where you just check if the space is occupied. Here's an old demo where I do that with boxes.


See the Pen WjWPob by osublake (@osublake) on CodePen



And circle packing...


See the Pen bWJZVB by osublake (@osublake) on CodePen


  • Like 4
Link to comment
Share on other sites

@OSUblake The first demo looks pretty spot on! I believe all I would need to do is remove the random size portion to use the actual svg size, correct? And obviously remove the looping animation. I'm guessing I could just add two more variables to each object for x and y, right?

Link to comment
Share on other sites

Yeah, give it a shot, and if you get stuck, just throw it a codepen and I can take a look. But like I mentioned earlier, it won't allow overlaps so the images won't be as tightly packed as your image.


12 minutes ago, pixelbakery said:

I'm guessing I could just add two more variables to each object for x and y, right?


You can replace left and top with x and y. They would be the same thing. The object I used is just to represent the bounds of a rectangle, so the names really don't matter. 


  • Like 1
Link to comment
Share on other sites

You could fake it a little by using Blakes first pen to arrange the images and then scale them slightly larger to take out some of the extra space.

  • Like 1
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.