Overlapping shapes and circles in HTML and CSS make beautiful designs and are easy to create. However, when complex structures are to be created it is very important to plan the structure of the design.
In this example, the layout is created by breaking it into parts. This shape could be used as a logo which is made up of three shapes. The fundamental is made up of eight large circles, so they are listed in first section of the HTML layout.
Multiple classes are used to make the reuse of CSS simpler, like CSS that applies to all the large elements, circle elements, etc.
Next, there are eight smaller shapes, that are placed in front and on the edges of the large circles. The shapes include, four circles, four squircles (squares with a rounded edge). The eight smaller shapes listed with alternate shapes made up of circle and square. This is essential in order to give them color and to position the shape. Lastly, we have one middle circle.
The CSS is inserted to position each of these circles. When the circles are positioned, a rotation and a color are specified. By using the transform property, the rotate transforms the circle and put them into the correct position without the need for any more CSS.
Now, when all the circles and shapes are in position, here is the final output of the code.