A sandbox for building up SVG by hand, combining preset shapes with your own markup and seeing the result immediately. Useful for learning how the coordinate system, viewBox and path syntax actually behave, and for prototyping a shape before writing it into a component.
The viewBox defines the internal coordinate system as min-x, min-y, width and height. The image is then scaled to fill whatever display size you give it. This is why the same markup can be rendered at any size without becoming blurry.
The shape extends beyond the viewBox bounds. Either enlarge the viewBox dimensions or move the shape into range using its coordinate attributes.
No. Everything lives in the current page session and is lost on reload, so copy anything you want to keep.
Copy the markup straight into your project, or send it through the SVG to PNG converter if you need a raster version. Run it through the minifier first if the result is going into production.