Examples
Open a drawing for its source and plotting controls. Use Setup to begin with your own page.
Frame and wave
A 40 × 25 mm frame with one wave line inside. Plot the complete drawing, then measure the frame to check the scale.
Three lines, one at a time
Make one line, plot it, then make the next. Uses driver.session().
Hatch and circle
A hatched shape, its outline and a circle. Enough to watch the engine order separate hatch strokes, and show in red where the pen still has to lift.
Waves to pen
This example samples 32 rows from vanilla.waves at t = 0 and plots that still drawing. Try another time to make a different sheet.
Wave hatch
Seventy cells. Two wave samplers set the hatch spacing and angle in each cell.
Two pens
Every layer names its pen. The engine draws all the black first, then holds the motors and waits until you have put in the red pen.
Route lab
A drawing with shuffled fragments, duplicates, a 1 440-point circle. Switch each optimizer pass on and off and compare the path count, pen lifts, travel and estimated time.
SVG to pen
Paste an SVG or choose a file, set the drawing width and inspect the plan. Supported paths and basic shapes can be plotted; SVG text, images, styling, clipping and viewBox mapping are not reproduced.
Make a series
Replace the module contents in the Setup page with this code. It makes four stippled drawings with different seeds and adds four SVG download links.
import { PlotterEngine } from "https://cdn.jsdelivr.net/gh/seb-prjcts-be/vanilla.penplotter@v0.5.0/vanilla.penplotter.js";
for (let seed = 1; seed <= 4; seed += 1) {
const plot = new PlotterEngine({ units: "mm", page: { width: 120, height: 80 } });
plot.stipple([{ x: 12, y: 12 }, { x: 108, y: 12 },
{ x: 108, y: 68 }, { x: 12, y: 68 }],
{ count: 80, minDistance: 3, seed });
const link = document.createElement("a");
link.href = URL.createObjectURL(new Blob([plot.exportSVG()], { type: "image/svg+xml" }));
link.download = `sheet-${seed}.svg`;
link.textContent = `Save sheet ${seed}`;
document.body.append(link, document.createElement("br"));
}