These examples show how to generate plotter-friendly SVGs from p5.js using p5.plotSvg. All examples are mirrored in collections at editor.p5js.org and openProcessing.org.
Full demonstration of all p5.js drawing primitives exported to SVG.
here • @editor • @openProcessing
Simplest possible demo, in "static" mode; all art is in setup() only.
here • @editor • @openProcessing
Simple demo; uses setup(), draw() and a keypress to capture an SVG during animation.
here • @editor • @openProcessing
Simple "generative artwork"; press a button to export.
here • @editor • @openProcessing
Records a series of marks drawn by the user.
here • @editor • @openProcessing
Accumulates the traces of some particles over time.
here • @editor • @openProcessing
A trick for exporting hatched ("filled") SVG shapes.
here • @editor • @openProcessing
Using p5.plotSvg in p5's instance mode.
here • @editor
Merge groups of paths computed at different times. Demonstrates per-color "layers".
here • @editor • @openProcessing
Intended for simple typography needs, this demonstration program uses an inlined sens-serif Hershey font. No external files are loaded.
here • @editor
Load and incorporate monoline SVG fonts into your exported designs. (For a large archive of monoline typefaces, see this repository.)
here • @editor • @openProcessing
Exports a tiny flipbook recording from a face-tracker.
here • @openProcessing
