scribble-forest

Procedurally generated pencil-scribble trees, rocks and grass, as SVG path data.

Every drawing is built from a seed, so the same integer always gives back the same tree. Nothing repeats unless you want it to, and nothing has to be drawn by hand.

• No dependencies. Not one.
• No renderer. It returns path data, so it works with React, Vue, Svelte, plain DOM, canvas, or Node writing .svg files to disk.
• Strokes, not fills. Every drawing is line work, so it can be animated stroke by stroke, recoloured with currentColor, or scaled without the linework thickening.

Install

npm install scribble-forest

What you get back

Generators return plain data. There is no DOM, no canvas, no framework:

import { scribbleConifer } from "scribble-forest";

scribbleConifer(42);
// {
//   width: 60,
//   height: 100,
//   strokes: [
//     { d: "M30 100Q29.4 88.2 30.6 2.8", w: 0.75, o: 0.95 },
//     ...
//   ]
// }

d is an SVG path. w is stroke width in px. o is opacity. The drawing lives in its own width × height box with the ground at y = height, so drawings of different kinds line up on a shared baseline when you scale them to different sizes.

Turning that into pixels is your job, and it is short.

Plain DOM

import { scribbleConifer } from "scribble-forest";

const tree = scribbleConifer(42);
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", `0 0 ${tree.width} ${tree.height}`);
svg.setAttribute("fill", "none");
svg.setAttribute("stroke", "currentColor");

for (const stroke of tree.strokes) {
  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  path.setAttribute("d", stroke.d);
  path.setAttribute("stroke-width", String(stroke.w));
  path.setAttribute("opacity", String(stroke.o));
  svg.append(path);
}
document.body.append(svg);

React

import { scribbleConifer } from "scribble-forest";

function Tree({ seed, height = 100 }) {
  const tree = scribbleConifer(seed);
  return (
    <svg
      viewBox={`0 0 ${tree.width} ${tree.height}`}
      height={height}
      width={(height * tree.width) / tree.height}
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {tree.strokes.map((stroke, i) => (
        <path
          key={i}
          d={stroke.d}
          strokeWidth={stroke.w}
          opacity={stroke.o}
          vectorEffect="non-scaling-stroke"
        />
      ))}
    </svg>
  );
}

Node, straight to a file

import { writeFileSync } from "node:fs";
import { scribbleConifer, toSvg } from "scribble-forest";

writeFileSync("tree.svg", toSvg(scribbleConifer(42), { height: 400, stroke: "#2a2419" }));

toSvg is a convenience for the simple case. For anything more involved, map over strokes yourself.

Generators

| Function | Draws | Box | | --- | --- | --- | | scribbleConifer(seed, detail?) | A pine: tiered branches, a long leader spike, scrub at the foot | 60 × 100 | | scribbleBroadleaf(seed, detail?) | A tangled crown on a short trunk | 60 × 100 | | scribbleRock(seed, detail?) | One or two faceted stones with hatched shading | 48 × 32 | | scribbleGrass(seed, detail?) | A tuft of fanned blades | 44 × 50 |

detail runs 0 to 1 and defaults to 1. It scales stroke count with the size you intend to draw at — a dense scribble shrunk to 40px is just a smudge, so pass a lower number for small or distant drawings.

scribbleConifer(42, 1).strokes.length;    // ~40 strokes
scribbleConifer(42, 0.25).strokes.length; // ~14 strokes

Drawing order

Strokes come back in ground-up order: ground scrub first, then the trunk rising out of it, then branch tiers from the lowest upward. Animate them in order and a tree draws itself as if growing.

The trunk paths also start at the ground and end at the tip, so an SVG line-drawing animation travels upward rather than down.

// Each stroke draws itself on, one after another.
<path
  d={stroke.d}
  pathLength={1}
  style={{
    strokeDasharray: 1,
    strokeDashoffset: 1,
    animation: "draw 1100ms ease-out forwards",
    animationDelay: `${i * 55}ms`,
  }}
/>
// @keyframes draw { to { stroke-dashoffset: 0 } }

pathLength={1} normalises every path to a single dash, so one pair of keyframes draws any stroke regardless of its real length.

Scattering a field

The package also ships the placement maths for laying drawings out as a receding field.

import { nextPlacement, depthFactor, heightForDepth } from "scribble-forest";

const placed = [];
for (let id = 0; id < 60; id++) {
  placed.push(nextPlacement(placed, Math.random, id, "tree"));
}
// → { id, kind, xPct, yPct, heightPx, flipped, seed }

Two things worth knowing:

Vertical position doubles as depth. Something lower in the field is nearer, so it comes back taller (heightPx) and you will usually want to draw it darker. depthFactor(yPct) gives you 0 at the far edge and 1 at the near edge, which is a good input for both opacity and detail.

Placement is best-candidate, not random. Each call throws 14 darts and keeps whichever lands furthest from everything already placed. That fills gaps first and packs tighter as the field fills, instead of clumping the way uniform random does.

Pass only same-kind neighbours in the first argument. A rock belongs at the foot of a tree, so clutter should be spaced off itself rather than pushed away from the trees:

const siblings = placed.filter((p) => p.kind === kind);
nextPlacement(siblings, Math.random, id, kind);

Defaults put things slightly past the container on every side (DEFAULT_BOUNDS), so drawings that overrun the edge read as a stand continuing beyond the frame. Clip the container. Override with { bounds, heights, candidates }.

Determinism

mulberry32(seed) is exported if you want reproducible fields rather than reproducible single drawings:

import { mulberry32, nextPlacement } from "scribble-forest";

const rng = mulberry32(1234);
// Same seed in, same forest out, every time.

Generator output is stable for a given seed within a major version. Treat a changed silhouette as a breaking change; it will not happen in a patch release.

Licence

MIT