在HTML，CSS，JQuery中填充其他小形状的形状[关闭]

Filling a shape with other small shapes

I want to fill in a shape dynamically with random sized & random number of balls using html, css, & jQuery.

For example in the figure attached, "Figure A" is the custom shape I want to fill in when a user add a ball (Ball will actually be user pictures when he puts a comment). For example 100 users put their comment, I want to put 100 balls of random size, color in the shape of "Figure A". Figure A is currently showing a line but when I am filling it with these circles, the line won't be visible, so the shape would become from the circles.

Any idea how to achieve that ? or Any example someone has already done that before in HTML, CSS, jQuery ?

Thanks in Advance.

There are two ways I would approach the problem:

  1. Map out the circles eg hard code the layout and keep them hidden until they have been populated. The cicles would basically be place holders with unique ids.
  2. If the cirles are created dynamically, use box2dweb which is a physics engine with collision detection built in. Its taking a sledge hammer to crack a nut, but it would allow you to extend you project with some arresting animation and user interaction. The circles could be draggable and the user could move their picture around etc. You can set the gravity yourself so they can fall or float up into the containing shape you construct. Seth Ladd has a comprehensive set of tutorials online. You will need a good understanding of html canvas too.