Preview
Errors and warnings
Output
Language
A tiny text language for icons on the 24 grid. Every command becomes a shape, transforms are baked into the points and the result passes the icon lint.
# note- Comments run to the end of the line.
name suntags brightcategory weather- Name, tags and category of the icon.
let r = 4- Names a number; expressions take + - * / and parentheses.
circle cx cy r- Circle from its center and radius.
ellipse cx cy rx ry- Ellipse from its center and both radii.
rect x y w h radius r- Rectangle, with optional rounded corners.
line x1 y1 x2 y2- Straight line between two points.
polyline x y x ypolygon x y x y x y- Open or closed list of points.
arc cx cy r from a to b- Arc in degrees, 0 at 12 o'clock, clockwise.
path "M4 12h16"- Raw SVG path data.
dot x y- A round dot, like an eye.
group move dx dy rotate a around cx cy scale s { }- Moves, turns or scales the shapes inside.
mirror x at 12 { }mirror ymirror xy- Draws the shapes and their mirror image.
repeat n around cx cy step deg { }- Repeats the shapes around a center.
duotone { }- Closed shapes merged into the duotone layer.
Animated favicon
Play a living state or a morph on the browser tab. A small runtime draws the frames through a canvas, and the static SVG and PNG stay as the fallback.
Frames
Paste into the page head
CSS cursor
PNG files at 32 and 64 px with a halo that reads on any page, a hotspot in CSS pixels and the cursor CSS with image-set.
Pen plotter
A single line SVG with strokes only and no fills, ordered for the least pen travel, and G-code with your feed rates and pen commands.
Solid lines draw, dashed lines are pen up moves.
STL for 3D printing
Extrude any icon into a watertight mesh with a flat base, the thickness you need and an optional bevel. The same code runs in Node with glyphfox stl.
Drag the model to turn it, or use the arrow keys.