Interactive SVG and CSS sandpit

You can edit the svg and css in the text boxes. A pink background indicates that the text has not been rendered since it was last changed. All SVG tags must be properly nested.

Basic Shapes: create and position shapes

cx: cy: r:
x1: y1: x2: y2:
x: y: width: height: rx: ry:
cx: cy: rx: ry:

Grouping: group and transform elements


Re-use: define and re-use symbols

id: x: y:
See the web for more information on CSS, CSS colour names and details of SVG tags.