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:

points:

Grouping: group and transform elements

transform:

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.