Vector Graphics

More info

Type simple drawing commands and see an SVG (Scalable Vector Graphic) image rendered instantly.
A vector image is stored as a list of geometric objects, each with properties such as position, size, colour, stroke, and text.

Editor

Canvas size is 480 x 360 canvas units (not screen pixels).

Syntax

Command Examples

rect x=40 y=40 width=180 height=100 fill=#ffd24d stroke=#ffffff strokeWidth=3

rect x=250 y=40 width=150 height=100 rx=18 ry=18 fill=#ff5555

circle cx=300 cy=90 r=42 fill=#00c95c stroke=#ffffff strokeWidth=3

ellipse cx=300 cy=210 rx=70 ry=40 fill=#6ee7ff stroke=#ffffff strokeWidth=3

line x1=30 y1=300 x2=440 y2=300 stroke=#ffff00 strokeWidth=5

polygon points="60,260 140,180 220,260" fill=#ff5555 stroke=#ffffff strokeWidth=3

polyline points="250,280 290,250 330,275 370,240 410,265" fill=none stroke=#c8fff1 strokeWidth=4

text x=240 y=170 content="Hello" fill=#ffffff fontSize=36 fontFamily=Verdana textAnchor=middle

Use rx and ry on rect to round the corners.

Preview

Object List

Each line becomes one stored object with its own list of properties.