Benzene Ring

SVG circles, radial and linear gradients, faux shadows

Objective: Draw a simple molecule using SVG with atoms place in precise locations, radial gradients on the atoms, several different colors, and an artistic flair.

Problem: Where do we place the atoms so they form a perfect hexagon?

Solution: We can use a web site that calculates the polygon vertices. We can use SVG translate and scale transforms to move the atoms into precise locations.