SimplifiedSVG Sandbox

Primitives and required attributes:

The canvas coordinates go from 0 to 100.

point: x, y
segment / ray / line: x1, y1, x2, y2
arrow / double_arrow: x1, y1, x2, y2
rectangle: xmin, ymin, xmax, ymax
circle: x, y, radius
triangle: x1, y1, x2, y2, x3, y3

Optional attributes and their default values:

color: black
fill_color: none
opacity: 1
stroke_width: 0.7 (the thickness of the lines)
stroke_dash: 0 (for dashed lines. 0 is for solid lines)
linecap: butt (endpoint look. Can also be round)
arrow_head_size: 3.5
rotation: 0 (between 0 and 360)

Usage

Format: for more on the syntax of the primitives, see the README on github.

Editor: changes are displayed in real time. Control+Z and Control+Y (or equivalents) can be used to undo/redo changes. If you refresh or return to the page, the last drawing is restored (no guarantees though).

Images can be saved as PNG by clicking Export (if it doesn't work, try Chrome or Firefox)

About

Sandbox for testing the SimplifiedSVG utility. It converts geometric primitives, in JSON format, to SVG, which can be displayed in the browser. This sandbox is not intended for mobile browsers. The Export button may not work on some browser (try Chorme or Firefox). Created by Nil Mamano.

Example 1 (testing)

{primitive: "segment", x1: 15, y1: 5, x2: 25, y2: 15}
{primitive: "segment", x1: 15, y1: 8, x2: 25, y2: 18, color: "blue", stroke_width: 0.6, linecap: "round"}
{primitive: "ray", x1: 25, y1: 22, x2: 5, y2: 32, stroke_width: 0.5, rotation: 20, linecap: "round"}
{primitive: "ray", x1: 25, y1: 22, x2: 5, y2: 32, stroke_width: 0.5, rotation: 30, linecap: "round"}
{primitive: "line", x1: 1, y1: 90, x2: 2, y2: 90, stroke_width: 0.2, stroke_dash: 1}
{primitive: "arrow", x1: 10, y1: 80, x2: 25, y2: 80, stroke_width: 2, arrow_head_size: 5}
{primitive: "arrow", x1: 11, y1: 86, x2: 25, y2: 86, stroke_width: 2, arrow_head_size: 5, linecap: "round", opacity: 0.5}
{primitive: "double_arrow", x1: 15, y1: 55, x2: 25, y2: 65, stroke_width: 1.2, arrow_head_size: 5, color: "purple", rotation: 45}
{primitive: "rectangle", xmin: 55, ymin: 5, xmax: 75, ymax: 25}
{primitive: "circle", x: 85, y: 15, radius: 12, color: "lime", stroke_width: 1.5}
{primitive: "rectangle", xmin: 75, ymin: 25, xmax: 95, ymax: 45, color: "red", fill_color: "lightgray", stroke_width: 2.5}
{primitive: "circle", x: 65, y: 35.85, radius: 11, stroke_width: 2.2, color: "orange", fill_color: "darkblue", opacity: 0.8}
{primitive: "segment", x1: 55, y1: 25, x2: 73, y2: 25}
{primitive: "point", x: 50, y: 50}
{primitive: "point", x: 55, y: 55, stroke_width: 2, color: "red"}
{primitive: "rectangle", xmin: 60, ymin: 60, xmax: 80, ymax: 80, color: "red", fill_color: "yellow", rotation: 45}
{primitive: "rectangle", xmin: 60, ymin: 60, xmax: 80, ymax: 80, color: "blue", stroke_dash: 3, rotation: 0}
{primitive: "circle", x: 70, y: 70, radius: 11.5, color: "none", fill_color: "green", opacity: 0.3}
{primitive: "segment", x1: 55, y1:75, x2: 85, y2: 75, opacity: 0.2}
{primitive: "triangle", x1:5,y1:35, x2:10,y2:30, x3:10,y3:35, fill_color: "cyan", color: "none"}
{primitive: "triangle", x1:5,y1:36, x2:10,y2:36, x3:10,y3:41, fill_color: "darkcyan", color: "none"}

Example 2

{primitive: "rectangle", xmin: 5, ymin: 5, xmax: 90, ymax: 90, stroke_width: 0.1}
{primitive: "rectangle", xmin: 5, ymin: 57.5329, xmax: 57.5329, ymax: 90, fill_color: "orange", stroke_width: 0.1, opacity: 0.999}
{primitive: "rectangle", xmin: 5, ymin: 5, xmax: 57.5329, ymax: 57.5329, fill_color: "seagreen", stroke_width: 0.1}
{primitive: "segment", x1: 5, y1: 57.5329, x2: 57.5329, y2: 5, stroke_width: 0.1}
{primitive: "circle", x: 57.5329, y: 57.5329, radius: 52.5329, stroke_width: 0.1, fill_color: "seagreen", opacity: 0.2}
{primitive: "rectangle", xmin: 57.5329, ymin: 5, xmax: 90, ymax: 37.4671, fill_color: "mediumseagreen", stroke_width: 0.1}
{primitive: "segment", x1: 57.5329, y1: 5, x2: 90, y2: 37.4671, stroke_width: 0.1}
{primitive: "circle", x: 57.5329, y: 37.4671, radius: 32.4671, stroke_width: 0.1, fill_color: "mediumseagreen", opacity: 0.2}
{primitive: "rectangle", xmin: 69.9342, ymin: 37.4671, xmax: 90, ymax: 57.5329, fill_color: "palegreen", stroke_width: 0.1}
{primitive: "segment", x1: 69.9342, y1: 57.5329, x2: 90, y2: 37.4671, stroke_width: 0.1}
{primitive: "circle", x: 69.9342, y: 37.4671, radius: 20.0658, stroke_width: 0.1, fill_color: "palegreen", opacity: 0.2}
{primitive: "rectangle", xmin: 57.5329, ymin: 45.1315, xmax: 69.9342, ymax: 57.5329, fill_color: "yellowgreen", stroke_width: 0.1}
{primitive: "segment", x1: 57.5329, y1: 45.1315, x2: 69.9342, y2: 57.5329, stroke_width: 0.1}
{primitive: "circle", x: 69.9342, y: 45.1315, radius: 12.4013, stroke_width: 0.1, fill_color: "yellowgreen", opacity: 0.2}
{primitive: "rectangle", xmin: 57.5329, ymin: 37.4671, xmax: 65.1973, ymax: 45.1315, fill_color: "greenyellow", stroke_width: 0.1}
{primitive: "segment", x1: 57.5329, y1: 45.1351, x2: 65.1995, y2: 37.4671, stroke_width: 0.1}
{primitive: "circle", x: 65.1973, y: 45.1315, radius: 7.66444, stroke_width: 0.1, fill_color: "greenyellow", opacity: 0.2}
{primitive: "rectangle", xmin: 65.1973, ymin: 37.4671, xmax: 69.9342 , ymax: 42.204, fill_color: "yellow", stroke_width: 0.1}
{primitive: "segment", x1: 65.1973, y1: 37.4671, x2: 69.9342, y2: 42.204, stroke_width: 0.1}
{primitive: "circle", x: 65.1973, y: 42.204, radius: 4.7369, stroke_width: 0.1, fill_color: "yellow", opacity: 0.2}
{primitive: "rectangle", xmin: 67.0066, ymin: 42.204, xmax: 69.9342, ymax: 45.1315, fill_color: "gold", stroke_width: 0.1}
{primitive: "segment", x1: 69.9342, y1: 42.204, x2: 67.0066, y2: 45.131, stroke_width: 0.1}
{primitive: "circle", x: 67.0066, y: 42.204, radius: 2.9275, stroke_width: 0.1, fill_color: "gold", opacity: 0.2}
{primitive: "rectangle", xmin: 65.1973, ymin: 42.204, xmax: 67.0066, ymax: 45.1315, fill_color: "orange", stroke_width: 0.1}
{primitive: "rectangle", xmin: 57.5329, ymin: 57.5329, xmax: 90, ymax: 90, stroke_width: 0.1, fill_color: " mediumseagreen ", opacity: 0.2 }