fol

Coldplay's Flower of Life, in CSS.

Preview here

Compare it with the album art.

Yeah, mine is not perfect.

Technical details

• Each circle is a div, with border-radius
• All of them are positioned to the centre of page, and then transformed (using CSS transform, specifically: translateX, translateY, and rotate)
• calc() is heavily used as box-sizing cannot bound the divs to middle of border
• border-image (+linear-gradient) and border-radius does not work well together