paperplanes.js

Tiny library for interactive paper-plane SVGs. Hand-rolled SVG path generation — no canvas, no WebGL, no runtime dependencies.

Performance

• ~1 KB gzipped — single file, single export, zero dependencies
• Pure string output — generates SVG markup via template literals; no DOM manipulation, no virtual DOM diffing
• Hand-rolled SVG paths — geometry computed inline with basic trigonometry; no SVG framework overhead
• Stateful by design — random geometry is computed once at creation; re-pointing only recalculates the fold

Install

npm install paperplanes

Quick start

import { Plane } from "paperplanes";

const plane = Plane();

document.body.innerHTML = plane.point();

API

Plane(opts?)

Creates a paper plane with random triangle geometry. Returns an object with a .point() method.

const plane = Plane();
const plane = Plane({ fill: "#D0E8FF", foldFill: "#A8D1FF" });

Options:

| Option | Default | Description | | ----------- | -------------------- | ------------------------------- | | fill | "#E8DEF8" | Fill colour of the plane body | | foldFill | "#D0BCFE" | Fill colour of the fold | | foldDepth | 12 | How far the fold extends | | stroke | "black" | Stroke colour | | viewBox | "-15 -15 130 150" | SVG viewBox attribute |

plane.point(x?, y?)

Returns an SVG string with the plane's fold pointed toward (x, y) in coordinate space. The fold appears on the corner closest to the cursor.

plane.point()        // default position (50, 0)
plane.point(x, y)    // fold toward cursor

Example: full-page grid

<div id="grid"></div>

<script type="module">
  import { Plane } from "./paperplanes.js";

  const cols = Math.round(window.innerWidth / 100);
  const rows = Math.round(window.innerHeight / 100);

  const grid = document.getElementById("grid");
  grid.style.display = "grid";
  grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
  grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
  grid.style.width = "100vw";
  grid.style.height = "100vh";

  const planes = [];

  for (let i = 0; i < rows * cols; i++) {
    const plane = Plane();
    const el = document.createElement("div");
    el.innerHTML = plane.point();
    el.querySelector("svg").style.cssText = "width:100%;height:100%;display:block";
    grid.appendChild(el);
    planes.push({ el, plane });
  }

  document.addEventListener("pointermove", (e) => {
    for (const { el, plane } of planes) {
      const rect = el.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;
      el.innerHTML = plane.point(x, y);
    }
  });
</script>

License

MIT