String Art

About this style

String art, also called curve stitching, makes curves out of straight lines: threads joining evenly spaced points trace a curve, called an envelope, that no single thread contains. Mary Everest Boole, a self-taught mathematician and teacher, devised curve stitching to help children learn geometry, and nail-and-thread string art became a popular home craft in the 1960s and 70s. Joining points on a circle by a times-table rule produces cardioids and nephroids, which keeps it popular in maths teaching and generative art.

Make a 10-second string art animation: nails tap into a painted board, then thread winds from nail to nail until straight lines form curves.

<inputs>
Studio: Copperpin Studio. Line: "Straight thread, curved lines." Detail: String art evenings · Thursdays 6–8 pm. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Board: painted terracotta #B5462F filling the stage, with faint wood grain under the paint (long seeded streaks, ±3% lightness) and a soft vignette.
Nails: 7px steel heads #C8CDD2 with a 2px highlight up-left and a soft shadow down-right (offset 2, 3; blur 3; rgba(40, 15, 8, 0.45)).
Circle: 144 nails on a circle of radius 360 around (600, 540). Cream thread #F4EADB winds the times-two rule: a chord from nail i to nail 2i mod 144 for each i in order (the thread hops behind the board to the next start, unseen), so the envelope of the chords draws a cardioid.
Star: a plus sign of nails centered at (1400, 420): a center nail and four arms of 22 nails at 10px spacing (arms 220px long). Navy thread #1C2541 joins nail j on one arm (counted out from the center) to nail 23 − j on the next arm, quadrant by quadrant, so four parabolic envelopes bow toward the center and form a curved four-point star with its tips at the arm ends.
Rim: mustard thread #E7B04A wraps once around the outside of the circle's nails, a tight 144-sided polygon.
Thread: straight 1.6px lines at 85% opacity, each with a 1px shadow (offset 1.5, 2.5) at 25% so it sits above the board; density builds where chords cross. At each nail the thread wraps around the far side of the head in a tiny arc, never through its center. Thread is always taut and straight between nails.
Winding: the active segment grows from the last nail toward the next, its tip moving like a hand pulling thread. It speeds up like a time-lapse: segment n of a figure with N segments starts at t0 + T·(n/N)^0.6, so the first chords are slow enough to follow and the rest become a rush.
Type, cream, left-aligned at x 1180: Space Grotesk 700, 52px, for the studio (baseline 790); Space Grotesk 500, 30px, for the line (baseline 840); Space Grotesk 500, 22px, uppercase, tracking 0.1em, for the detail (baseline 890).
The real thing is mathematics made by hand: curves that exist only as the envelope of straight threads, with tactile nails and thread. The cheap version draws the curves directly with a glowing stroke.
Banned: curved thread segments, threads that skip or pass through a nail, glow, gradients on thread, a black board, a fourth thread color, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–1.4s: nails tap in: around the circle clockwise from 12 o'clock, then the plus from its center outward; each drops in 0.12s (scale 1.25 → 1 as its shadow grows).
1.4–5.4s: cream thread winds the cardioid, 144 chords, accelerating.
4.2–7.6s: navy thread winds the star, 88 chords, accelerating.
7.4–8.4s: mustard thread wraps the rim in one smooth pass and ties off in a small knot at 12 o'clock.
8.0–8.8s: the studio, line and detail rise 12px and fade in, 0.15s apart.
8.8–10.0s: hold, nothing moving.
For other durations, scale every timestamp proportionally; keep the first chord of each figure at 0.15s or longer.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. No other libraries (no three.js: this style is flat). Draw in Canvas 2D, repainting every frame from scratch, with the backing store sized from the canvas's CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the font wait matters. Precompute every segment's endpoints and start time at load; seek(t) draws all finished segments plus the growing one. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check every thread runs straight and ends on a nail, the cardioid and the star read clearly at 1280×720 as envelopes of lines, threads sit visibly above the board, and nothing shimmers. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Art Deco Gold

Made by us

A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…

Op Art Illusion

Made by us

A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…

Japanese Ma Minimal

Made by us

A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…