From fe79fabb5b8f9798ba3dff5efbfcc6586fb682e1 Mon Sep 17 00:00:00 2001
From: Max Duval <hi@mxdvl.com>
Date: Mon, 26 Aug 2024 23:23:34 +0100
Subject: [PATCH] wip: bobbin

---
 .../components/bobbin/Bobbin.island.svelte    | 305 ++++++++++++++++++
 src/_site/components/bobbin/Control.svelte    | 201 ++++++++++++
 src/_site/components/bobbin/Controls.svelte   | 112 +++++++
 src/_site/components/bobbin/Mirror.svelte     |   8 +
 src/_site/components/bobbin/Path.svelte       |  17 +
 src/_site/components/bobbin/README.md         |  27 ++
 src/_site/components/bobbin/SVG.svelte        |  17 +
 src/_site/components/bobbin/Shape.svelte      |  75 +++++
 src/_site/components/bobbin/Spread.svelte     |  10 +
 src/_site/components/bobbin/Store.svelte      |  74 +++++
 src/_site/components/bobbin/Use.svelte        |  83 +++++
 .../bobbin/catalogue/Crescent.svelte          |  52 +++
 .../components/bobbin/catalogue/Curve.svelte  |  58 ++++
 .../components/bobbin/catalogue/Loop.svelte   |  47 +++
 .../bobbin/catalogue/Polygon.svelte           |  73 +++++
 .../components/bobbin/catalogue/Star.svelte   |  51 +++
 src/_site/components/bobbin/data.js           |  54 ++++
 src/_site/components/bobbin/weaving.js        |  43 +++
 src/_site/routes/bobbin.svelte                |   5 +
 19 files changed, 1312 insertions(+)
 create mode 100644 src/_site/components/bobbin/Bobbin.island.svelte
 create mode 100644 src/_site/components/bobbin/Control.svelte
 create mode 100644 src/_site/components/bobbin/Controls.svelte
 create mode 100644 src/_site/components/bobbin/Mirror.svelte
 create mode 100644 src/_site/components/bobbin/Path.svelte
 create mode 100644 src/_site/components/bobbin/README.md
 create mode 100644 src/_site/components/bobbin/SVG.svelte
 create mode 100644 src/_site/components/bobbin/Shape.svelte
 create mode 100644 src/_site/components/bobbin/Spread.svelte
 create mode 100644 src/_site/components/bobbin/Store.svelte
 create mode 100644 src/_site/components/bobbin/Use.svelte
 create mode 100644 src/_site/components/bobbin/catalogue/Crescent.svelte
 create mode 100644 src/_site/components/bobbin/catalogue/Curve.svelte
 create mode 100644 src/_site/components/bobbin/catalogue/Loop.svelte
 create mode 100644 src/_site/components/bobbin/catalogue/Polygon.svelte
 create mode 100644 src/_site/components/bobbin/catalogue/Star.svelte
 create mode 100644 src/_site/components/bobbin/data.js
 create mode 100644 src/_site/components/bobbin/weaving.js
 create mode 100644 src/_site/routes/bobbin.svelte

diff --git a/src/_site/components/bobbin/Bobbin.island.svelte b/src/_site/components/bobbin/Bobbin.island.svelte
new file mode 100644
index 0000000..9b4e25b
--- /dev/null
+++ b/src/_site/components/bobbin/Bobbin.island.svelte
@@ -0,0 +1,305 @@
+<script>
+	import { derived, get, writable } from "svelte/store";
+	import { onMount } from "svelte";
+
+	import Shape from "./Shape.svelte";
+	import Controls from "./Controls.svelte";
+	import { animate, debug, patterns, selected, selected_index } from "./Store.svelte";
+	import { patterns_to_string, string_to_patterns } from "./data.js";
+	import Polygon from "./catalogue/Polygon.svelte";
+	import Loop from "./catalogue/Loop.svelte";
+	import Crescent from "./catalogue/Crescent.svelte";
+	import Curve from "./catalogue/Curve.svelte";
+	import Star from "./catalogue/Star.svelte";
+
+	const size = 20 * 18 * 2;
+
+	/** @type {SVGSVGElement} */
+	let svg;
+
+	let guides = true;
+
+	let dragging = false;
+	/** @type {import('./data').Point} */
+	const initial_point = { x: 0, y: 0 };
+	$: dragStart = initial_point;
+	$: dragEnd = initial_point;
+	$: dragOffset = initial_point;
+	$: dragDelta = initial_point;
+	$: final_position = initial_point;
+
+	/** @type {(event: MouseEvent) => DOMPointReadOnly} */
+	const point_from_event = (event) => new DOMPointReadOnly(event.offsetX - size / 2, event.offsetY - size / 2);
+
+	const current = derived([patterns, selected], ([$patterns, $selected]) => $patterns.get($selected ?? ""));
+
+	/** @type {import("svelte/store").Writable<DOMMatrixReadOnly | undefined>}*/
+	const current_matrix = writable();
+
+	const state = /** @type {const} */ ({
+		/** @param {string} state */
+		set: (state) => {
+			const saved_patterns = string_to_patterns(state);
+
+			$patterns.clear();
+			for (const saved_pattern of saved_patterns) {
+				$patterns.set(saved_pattern.id, writable(saved_pattern));
+			}
+
+			$patterns = $patterns;
+		},
+		get: () => {
+			/** @type {import('./data').Pattern[]} */
+			const patterns_snapshot = [];
+
+			for (const [, pattern] of $patterns) {
+				patterns_snapshot.push(get(pattern));
+			}
+
+			return patterns_to_string(patterns_snapshot);
+		},
+		write: () => {
+			const search = "?" + new URLSearchParams({ state: state.get() });
+
+			if (window.location.search !== search) {
+				//goto(search, { noScroll: true });
+			}
+		},
+		copy: () => {
+			navigator.clipboard.writeText(state.get());
+		},
+		clear: () => {
+			$patterns = new Map();
+		},
+	});
+
+	/** A seven-sided shape that illustrates advanced features */
+    const default_state = "NoIgpgTAxgdghgWwF4A4DmBrAPgRgCxYCyWAtDgGwDsWADETQDQkDMNAOjAMIQQMCsATgAEAxjmGiGNEAxAIAVjgCezAGYwaARwGqs1YuIhY8zelI5QWYvjSHlyDHLfLWUHDjJB9mmmJqQATlB4ACZKWBAoWAD6ERAEdISMNHAoDChCtrY4Qji8KWkZWblCZPkAWp4hABZQAG4ANgDOcACWAPbkYBE4MRHM5LhRSVKp6ZkTOXmjhRPZpdM0lbIw6nB1AXiOAC5QULgEsfEEJHyDI+zws8VTvCwcY0WTC7zMHMsgqgGUSPJoITAUBBNHo+hA+NRTgIzJdHnMSrk7m8ruMbi8GMwPnAMBgcKlqpQYDgAA4RKJHSjURLJOFoxa055lKQfACu5GqqigIQgLLgACN9vpSIMcChhmIUABBUWOJ7zRhkKVpUXwrKyyoAXSAA";
+
+	const drag = /** @type {const} @satisfies {Record<string, (event: PointerEvent) => void>} */ ({
+		start: (event) => {
+			if (event.target instanceof SVGUseElement) {
+				event.preventDefault();
+				animate.set(false);
+
+				const { id, index } = event.target.dataset;
+				selected.set(id);
+
+				const numeric_index = Number(index);
+				if (!Number.isNaN(numeric_index)) selected_index.set(numeric_index);
+
+				if ($selected !== undefined) {
+					current_matrix.set(
+						DOMMatrixReadOnly.fromMatrix(event.target.transform.baseVal.consolidate()?.matrix),
+					);
+					const point = point_from_event(event);
+					const offset = new DOMPointReadOnly(0, 0).matrixTransform($current_matrix);
+					dragOffset = offset;
+
+					dragStart = point;
+					dragEnd = point;
+					dragDelta = initial_point;
+					final_position = initial_point;
+					dragging = true;
+				}
+			} else {
+				selected.set(undefined);
+			}
+		},
+		update: (event) => {
+			if (dragging && $current_matrix) {
+				event.preventDefault();
+				const point = point_from_event(event);
+				dragEnd = point;
+				const delta = new DOMPointReadOnly(dragEnd.x - dragStart.x, dragEnd.y - dragStart.y);
+				dragDelta = delta;
+
+				const position = new DOMPointReadOnly(dragOffset.x + delta.x, dragOffset.y + delta.y).matrixTransform(
+					$current_matrix.inverse().translate(dragOffset.x, dragOffset.y),
+				);
+				final_position = position;
+
+				$current?.update((current) => ({
+					...current,
+					position,
+				}));
+			}
+		},
+		stop: () => {
+			dragging = false;
+			state.write();
+		},
+	});
+
+	search = "";
+
+/*
+	onMount(async () => {
+		debug.set(window.location.hostname === "localhost");
+
+		// handle legacy hash states
+		const prefix = "#shape/";
+		if (window.location.hash.startsWith(prefix)) {
+			window.location.href = window.location.href.replace(prefix, "?state=");
+		}
+
+		state.set(default_state);
+
+		patterns.subscribe(() => {
+			state.write();
+		});
+
+		selected.subscribe((selected) => {
+			selected === undefined && selected_index.set(0);
+		});
+
+		window.addEventListener("popstate", () => {
+			const previous_state = new URLSearchParams(window.location.search).get("state");
+			if (previous_state) state.set(previous_state);
+		});
+	});
+*/
+</script>
+
+<div id="workspace">
+	<div id="canvas" class="border">
+		<svg bind:this={svg}
+			viewBox={`-${size / 2},-${size / 2} ${size},${size}`}
+			on:pointerdown={drag.start}
+			on:pointermove={drag.update}
+			on:pointerup={drag.stop}
+			on:pointercancel={drag.stop}
+		>
+			<defs>
+				<text>Generated with @mxdvl’s Rosace</text>
+				<text>https://www.mxdvl.com/works/rosace{$state}</text>
+			</defs>
+
+			{#each [...$patterns.entries()] as [id, pattern] (id)}
+				<Shape {pattern} {guides} />
+			{/each}
+
+			{#if $debug && dragging}
+				<g style="pointer-event: none;">
+					<text x={-size / 2} y={size / 2} font-size={12} fill="currentColor" stroke="none"
+						>{$current_matrix?.toString()}</text
+					>
+					<circle cx={dragStart.x} cy={dragStart.y} r={3} fill="currentColor" />
+					<line x1={dragStart.x} y1={dragStart.y} x2={dragEnd.x} y2={dragEnd.y} />
+					<line x1={dragStart.x} y1={dragStart.y} x2={dragEnd.x} y2={dragEnd.y} />
+
+					<circle cx={dragOffset.x} cy={dragOffset.y} r={2} fill="var(--glint)" stroke="none" />
+					<line
+						stroke="var(--glint)"
+						x1={dragOffset.x}
+						y1={dragOffset.y}
+						x2={dragOffset.x + dragDelta.x}
+						y2={dragOffset.y + dragDelta.y}
+					/>
+					<line
+						stroke="var(--glint)"
+						x1={0}
+						y1={0}
+						x2={dragOffset.x + dragDelta.x}
+						y2={dragOffset.y + dragDelta.y}
+					/>
+
+					<line stroke="var(--ocean)" x1={0} y1={0} x2={final_position.x} y2={final_position.y} />
+				</g>
+			{/if}
+		</svg>
+	</div>
+
+	<Controls {patterns} {svg} />
+
+	<ul id="shapes">
+		<li><Polygon /></li>
+		<li><Loop /></li>
+		<li><Crescent /></li>
+		<li><Curve /></li>
+		<li><Star /></li>
+	</ul>
+</div>
+
+<style>
+	#workspace {
+		display: grid;
+		grid-template-columns: auto;
+		column-gap: var(--grid-x);
+		row-gap: var(--grid-y);
+	}
+
+	/** 18 × 61 = 1098 */
+	@media screen and (min-width: 1098px) {
+		#workspace {
+			grid-template-columns: 720px 1fr;
+		}
+	}
+
+	ul {
+		padding: 0;
+		margin: 0;
+	}
+
+	#canvas {
+		background: var(--clouds);
+		aspect-ratio: 1;
+	}
+
+	.border {
+		margin: -1px;
+		border: 2px solid var(--skies);
+	}
+
+	svg {
+		display: block;
+		stroke-width: 1;
+		stroke: var(--earth);
+		fill: none;
+		touch-action: pinch-zoom;
+	}
+
+	svg :global(text) {
+		user-select: none;
+	}
+
+	#shapes {
+		display: flex;
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		flex-wrap: wrap;
+		column-gap: var(--grid-x);
+		row-gap: var(--grid-y);
+	}
+
+	#shapes li {
+		background-color: var(--clouds);
+		border: 2px solid var(--skies);
+		margin: -1px;
+		display: grid;
+		align-items: center;
+		grid-template-columns: min-content auto;
+		width: 100%;
+	}
+
+	#shapes li :global(svg) {
+		grid-row-start: 1;
+		grid-row-end: span 6;
+	}
+
+	#shapes li :global(label) {
+		grid-column-start: 2;
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	#shapes li :global(input) {
+		min-width: calc(2 * var(--grid-x));
+		flex-grow: 1;
+	}
+
+	#shapes li :global(button) {
+		width: max-content;
+	}
+</style>
diff --git a/src/_site/components/bobbin/Control.svelte b/src/_site/components/bobbin/Control.svelte
new file mode 100644
index 0000000..7e88a73
--- /dev/null
+++ b/src/_site/components/bobbin/Control.svelte
@@ -0,0 +1,201 @@
+<script>
+    import { writable } from "svelte/store";
+    import { fly } from "svelte/transition";
+
+    // import Button from "../Button.svelte";
+    import { selected, toggle, uid } from "./Store.svelte";
+
+    /** @typedef {import('./data.js').Pattern} Pattern */
+
+    /** @type {import("svelte/store").Writable<Pattern>} */
+    export let pattern;
+    /** @type {import("svelte/store").Writable<Map<string, import("svelte/store").Writable<Pattern>>>} */
+    export let patterns;
+
+    $: current = $pattern.id === $selected;
+
+    const toggle_selected = () => toggle($pattern.id);
+
+    /** @param {KeyboardEvent} event */
+    const handle_keydown = (event) => {
+        switch (event.key) {
+            case "ArrowRight": {
+                event.preventDefault();
+                $pattern.position.x++;
+                break;
+            }
+            case "ArrowLeft": {
+                event.preventDefault();
+                $pattern.position.x--;
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                $pattern.position.y++;
+                break;
+            }
+            case "ArrowDown": {
+                event.preventDefault();
+                $pattern.position.y--;
+                break;
+            }
+            case "Backspace": {
+                event.preventDefault();
+
+                $patterns.delete($pattern.id);
+                selected.set(undefined);
+                $patterns = $patterns;
+
+                break;
+            }
+        }
+    };
+</script>
+
+<h3>
+    <button on:click={toggle_selected} type={"flex"} subdued={true}>
+        #path-{$pattern.id}
+
+        {#if current}
+            <span class="close">&times;</span>
+        {:else}
+            <span class="open">○</span>
+        {/if}
+    </button>
+</h3>
+
+{#if current}
+    <ul
+        class="further-controls"
+        transition:fly|local={{ y: -12, duration: 240 }}
+    >
+        <li>
+            Count
+            <button
+                on:click={() => {
+                    $pattern.count = Math.max(1, $pattern.count - 1);
+                }}>-</button
+            >
+            <input
+                type="number"
+                bind:value={$pattern.count}
+                min="3"
+                max="120"
+                step="1"
+            />
+            <button
+                on:click={() => {
+                    $pattern.count = Math.min(120, $pattern.count + 1);
+                }}>+</button
+            >
+        </li>
+
+        <li>
+            <label>
+                Mirror
+                <input type="checkbox" bind:checked={$pattern.mirror} />
+            </label>
+        </li>
+
+        <!-- eslint-disable svelte/valid-compile -- this is a tool for myself -->
+        <li tabindex={0} on:keydown={handle_keydown}>
+            {Math.round($pattern.position.x)},{Math.round($pattern.position.y)}
+        </li>
+
+        <li class="path">
+            <textarea bind:value={$pattern.d} cols="20" rows="4" />
+        </li>
+
+        <li class="buttons">
+            <button
+                on:click={() => {
+                    const id = uid();
+                    const pattern_to_copy = $pattern;
+                    const { x, y } = pattern_to_copy.position;
+                    const copy = writable({
+                        ...pattern_to_copy,
+                        id,
+                        position: { x: x + 12, y },
+                    });
+                    $patterns.set(id, copy);
+                    selected.set(id);
+                    $patterns = $patterns;
+                }}>duplicate</button
+            >
+            <button
+                on:click={() => {
+                    selected.set(undefined);
+                    $patterns.delete($pattern.id);
+                    $patterns = $patterns;
+                }}>remove</button
+            >
+        </li>
+    </ul>
+{/if}
+
+<style>
+    h3 {
+        margin: 0;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding: 3px;
+        position: sticky;
+        top: 0;
+        background-image: linear-gradient(
+            to bottom,
+            var(--clouds) 60%,
+            transparent
+        );
+        z-index: 3;
+    }
+
+    .open {
+        color: var(--skies);
+    }
+
+    .close {
+        color: var(--ocean);
+    }
+
+    ul.further-controls {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: 3px;
+        gap: 12px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        list-style-type: none;
+    }
+
+    .buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .path {
+        flex-basis: 50%;
+    }
+
+    input[type="number"] {
+        max-width: 3rem;
+    }
+
+    textarea {
+        display: block;
+        font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+            Consolas, "DejaVu Sans Mono", monospace;
+        background-color: inherit;
+        resize: none;
+        font-size: inherit;
+        border: 2px solid var(--skies);
+        color: inherit;
+    }
+
+    @media (max-width: 342px) {
+        .buttons {
+            flex-direction: row;
+        }
+    }
+</style>
diff --git a/src/_site/components/bobbin/Controls.svelte b/src/_site/components/bobbin/Controls.svelte
new file mode 100644
index 0000000..2db5bab
--- /dev/null
+++ b/src/_site/components/bobbin/Controls.svelte
@@ -0,0 +1,112 @@
+<script>
+    import { fade } from "svelte/transition";
+    import { flip } from "svelte/animate";
+    import { fileSave } from "npm:browser-fs-access";
+
+    import Control from "./Control.svelte";
+    // import Button from "../Button.svelte";
+    import { add_pattern, animate, selected } from "./Store.svelte";
+
+    /** @typedef {import('./data.js').Pattern} Pattern */
+
+    /** @type {import("svelte/store").Writable<Map<string, import("svelte/store").Writable<Pattern>>>} */
+    export let patterns;
+
+    /** @type {SVGSVGElement} */
+    export let svg;
+
+    const duration = 240;
+
+    const animation = /** @type {const} */ (["animate", undefined]);
+    const extra = /** @type {const} */ (["extra", undefined]);
+
+    /** the SVG XML namespace */
+    const xmlns = "http://www.w3.org/2000/svg";
+
+    const save_svg = async () => {
+        const html = svg.outerHTML.replace(
+            /^<svg\b/,
+            `<svg xmlns="${xmlns}" fill="none" stroke="#111" stroke-width="1" `,
+        );
+
+        const blob = new Blob([html], { type: "image/svg+xml" });
+        await fileSave(blob, {
+            fileName: "Bobbin.svg",
+            extensions: [".svg"],
+        });
+    };
+</script>
+
+<ul>
+    {#each [animation, ...$patterns.entries(), extra] as [id, pattern] (id)}
+        <li
+            class:current={$selected === id}
+            class:button={!pattern}
+            transition:fade={{ duration }}
+            animate:flip={{ duration }}
+        >
+            {#if pattern}
+                <Control {pattern} {patterns} />
+            {:else if id === "animate"}
+                <button on:click={() => animate.update((_) => !_)}
+                    >{#if $animate}
+                        Pause
+                    {:else}
+                        Play
+                    {/if} Animation
+                </button>
+            {:else if id === "extra"}
+                <button
+                    on:click={() => {
+                        add_pattern();
+                    }}>Add new shape</button
+                >
+                <button on:click={save_svg}>Save SVG</button>
+            {/if}
+        </li>
+    {/each}
+</ul>
+
+<style>
+    ul {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        grid-row-end: span 2;
+    }
+
+    li {
+        list-style-type: none;
+        box-sizing: border-box;
+        border: 2px solid var(--skies);
+        margin: -1px;
+        overflow-y: scroll;
+        height: calc(2 * var(--grid-y));
+        transition: height 240ms;
+        background-color: var(--clouds);
+    }
+
+    li.current {
+        height: calc(10 * var(--grid-y));
+        border-color: var(--ocean);
+        z-index: 1;
+    }
+
+    li.button {
+        padding: 6px;
+    }
+
+    ul {
+        padding: 0;
+    }
+
+    @media (max-width: 342px) {
+        ul {
+            font-size: 14.5px;
+        }
+
+        li.current {
+            height: calc(12 * var(--grid-y));
+        }
+    }
+</style>
diff --git a/src/_site/components/bobbin/Mirror.svelte b/src/_site/components/bobbin/Mirror.svelte
new file mode 100644
index 0000000..ad4a306
--- /dev/null
+++ b/src/_site/components/bobbin/Mirror.svelte
@@ -0,0 +1,8 @@
+<script>
+	/** @type {[1] | [-1, 1]} */
+	export let scales;
+</script>
+
+{#each scales as scale}
+	<slot {scale}><text>Missing shape to mirror</text></slot>
+{/each}
diff --git a/src/_site/components/bobbin/Path.svelte b/src/_site/components/bobbin/Path.svelte
new file mode 100644
index 0000000..e742591
--- /dev/null
+++ b/src/_site/components/bobbin/Path.svelte
@@ -0,0 +1,17 @@
+<script>
+	/** @type {string} */
+	export let d;
+	/** @type {string | undefined} */
+	export let id = undefined;
+	/** @type {import('./data').Point} */
+	export let position = { x: 0, y: 0 };
+	export let angle = 0;
+	export let scale = 1;
+
+	/** @type {string | undefined} */
+	export let colour = undefined;
+
+	const transform = `scale(${scale} 1) rotate(${angle}) translate(${position.x} ${position.y})`;
+</script>
+
+<path id={id ? `shape-${id}` : undefined} {transform} stroke={colour} {d} pathLength={12} />
diff --git a/src/_site/components/bobbin/README.md b/src/_site/components/bobbin/README.md
new file mode 100644
index 0000000..ebc7b76
--- /dev/null
+++ b/src/_site/components/bobbin/README.md
@@ -0,0 +1,27 @@
+# Bobbin – delicate circular symmetries
+
+Weaving together technologies of the past and future, _Bobbin_ invites us to explore the delicate intricacies of
+circular patterns. Mimicking the delicacy found in traditional crafts, _Bobbin_ leverages Svelte to enable us all to
+become artists. Like modern day lace makers, we are invited to create our own designs and step back and admire the
+possibilities of the web as a design tool. This tool celebrates the advancements we have made on seeing speedy results,
+without compromising on elegance or beauty.
+
+All the editing features use the web platform’s native toolset, which made Svelte & SvelteKit an ideal environment for
+development:
+
+- The design is encoded as state search parameter
+- Undo and redo rely on the web history
+- Patterns can be seen without without JavaScript with SSR
+- The resulting SVG can be exported as-is and used as the basis for further work
+- Animations are built with CSS and the Web Animation API
+
+[Bobbins](https://en.wikipedia.org/wiki/Bobbin_lace#Bobbins) are used to hold the thread to create lace, which was the
+inspiration for this tool.
+
+## Timeline
+
+1. Feb 20th early weaving explorations
+2. Apr 5th first Svelte prototype
+3. Apr 11th addition of this ReadMe
+4. Apr 13th animated rotation
+5. Apr 15th renamed to Bobbin
diff --git a/src/_site/components/bobbin/SVG.svelte b/src/_site/components/bobbin/SVG.svelte
new file mode 100644
index 0000000..109c3ad
--- /dev/null
+++ b/src/_site/components/bobbin/SVG.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let size = 18 * 3 - 2;
+	export let centre = false;
+
+	const origin = centre ? `${-size / 2},${-size / 2}` : "0,0";
+</script>
+
+<svg
+	viewBox={`${origin} ${size},${size}`}
+	width={size}
+	height={size}
+	stroke="var(--earth)"
+	stroke-width={1}
+	fill="none"
+>
+	<slot />
+</svg>
diff --git a/src/_site/components/bobbin/Shape.svelte b/src/_site/components/bobbin/Shape.svelte
new file mode 100644
index 0000000..f65afb4
--- /dev/null
+++ b/src/_site/components/bobbin/Shape.svelte
@@ -0,0 +1,75 @@
+<script>
+	import { onMount } from "svelte";
+	import Mirror from "./Mirror.svelte";
+	import Use from "./Use.svelte";
+	import Path from "./Path.svelte";
+	import Spread from "./Spread.svelte";
+	import { animate, selected } from "./Store.svelte";
+
+	/** @typedef {import('./data').Pattern} Pattern */
+
+	/** @type {import("svelte/store").Writable<Pattern>} */
+	export let pattern;
+
+	export let guides = false;
+
+	/** @type {SVGElement | undefined} */
+	let g;
+	/** @type {Animation | undefined} */
+	let animation;
+
+	const duration = 3600;
+	$: to = 360 / $pattern.count;
+
+/*
+	onMount(() => {
+		animate.subscribe(($animate) => {
+			if (!g) return;
+			if ($animate) {
+				animation?.cancel();
+				animation = g.animate(
+					{
+						transform: ["rotate(0deg)", `rotate(${to}deg)`],
+					},
+					{ duration, iterations: 1, easing: "cubic-bezier(0.1, 0, 0.5, 0.5)" },
+				);
+				animation.finished.then((a) => {
+					a.effect?.updateTiming({ easing: "linear", iterations: Infinity });
+				});
+			} else if (animation) {
+				const { progress = null } = animation.effect?.getComputedTiming() ?? {};
+				if (progress === null) {
+					return;
+				}
+
+				const from = to * progress;
+
+				animation.cancel();
+				animation = g.animate(
+					{
+						transform: [`rotate(${progress > 1 / 2 ? from - to : from}deg)`, `rotate(0deg)`],
+					},
+					{ duration: 240, fill: "forwards", easing: "ease", iterations: 1 },
+				);
+			}
+		});
+	});
+*/
+
+	$: active = $selected === $pattern.id && guides;
+</script>
+
+<g id={$pattern.id} style={`--end:${360 / $pattern.count}deg;`} bind:this={g}>
+	<defs>
+		<Path id={$pattern.id} d={$pattern.d} />
+	</defs>
+	<Spread count={$pattern.count} let:angle>
+		{#if active}
+			<Path {angle} d={`M0,0V-600`} colour="var(--skies)" />
+		{/if}
+
+		<Mirror scales={$pattern.mirror ? [-1, 1] : [1]} let:scale>
+			<Use position={$pattern.position} {angle} {scale} id={$pattern.id} />
+		</Mirror>
+	</Spread>
+</g>
diff --git a/src/_site/components/bobbin/Spread.svelte b/src/_site/components/bobbin/Spread.svelte
new file mode 100644
index 0000000..9f6410a
--- /dev/null
+++ b/src/_site/components/bobbin/Spread.svelte
@@ -0,0 +1,10 @@
+<script>
+	/** @type {number} */
+	export let count;
+</script>
+
+<g data-count={count}>
+	{#each Array.from({ length: count }, (_, index) => (360 / count) * index) as angle (angle)}
+		<slot {angle}><text>Missing element</text></slot>
+	{/each}
+</g>
diff --git a/src/_site/components/bobbin/Store.svelte b/src/_site/components/bobbin/Store.svelte
new file mode 100644
index 0000000..f5b2356
--- /dev/null
+++ b/src/_site/components/bobbin/Store.svelte
@@ -0,0 +1,74 @@
+<script context="module">
+import { derived, writable } from "svelte/store";
+import { loop } from "./weaving.js";
+/** @template T @typedef {import("svelte/store").Writable<T>} Writable<T> */
+/** @typedef {import("./data.js").Pattern} Pattern */
+
+/** @type {Writable<string | undefined>} */
+export const selected = writable(undefined);
+/** @type {Writable<number | undefined>} */
+export const selected_index = writable(undefined);
+/** @param {string} id */
+export const toggle = (id) => selected.update((s) => (s === id ? undefined : id));
+/** @type {Writable<boolean>} */
+export const debug = writable(false);
+
+export const uid = () => Math.random().toString(36).slice(2);
+
+/** @type {Writable<boolean>} */
+export const animate = writable(false);
+
+/** @type {Writable<Map<string, Writable<Pattern>>>} */
+export const patterns = writable(new Map());
+
+export const current = derived([patterns, selected], ([$patterns, $selected]) => $patterns.get($selected ?? ""));
+
+/** @param {string} [path] */
+export const add_pattern = (path) => {
+	const id = uid();
+	const d = path ?? ["M0,0", ...loop(3, 3 / 2, 12), "Z"].join("");
+	const count = Math.round(Math.random() * 9 + 3);
+	const mirror = Math.random() > 1 / 2;
+	const position = { x: Math.random() * 48, y: Math.random() * 48 - 24 };
+
+	patterns.update(($patterns) => {
+		$patterns.set(id, writable({ id, count, mirror, position, d }));
+		return $patterns;
+	});
+	selected.set(id);
+};
+
+/** a default map to start from */
+export const basic_map = new Map(
+	[
+		{
+			id: uid(),
+			count: 5,
+			mirror: true,
+			position: { x: 0, y: -80 },
+			d: ["M0,0", ...loop(3, 3 / 2, 19), "Z"],
+		},
+		{
+			id: uid(),
+			count: 5,
+			mirror: false,
+			position: { x: 20, y: 0 },
+			d: ["M0,0", ...loop(3, 4 / 3, 30), "Z"],
+		},
+		{
+			id: uid(),
+			count: 7,
+			mirror: true,
+			position: { x: 0, y: -50 },
+			d: ["M0,0", ...loop(2, 3 / 2, 18), "Z"],
+		},
+		{
+			id: uid(),
+			count: 10,
+			mirror: false,
+			position: { x: 0, y: -150 },
+			d: ["M-12,0", ...loop(1, 2, 24), "Z", "M0,-24v12"],
+		},
+	].map(({ id, count, mirror, position, d }) => [id, writable({ id, count, mirror, position, d: d.join(" ") })]),
+);
+</script>
diff --git a/src/_site/components/bobbin/Use.svelte b/src/_site/components/bobbin/Use.svelte
new file mode 100644
index 0000000..e059d3c
--- /dev/null
+++ b/src/_site/components/bobbin/Use.svelte
@@ -0,0 +1,83 @@
+<script>
+	import { debug, selected, selected_index } from "./Store.svelte";
+
+	/** @type {string} */
+	export let id;
+	/** @type {import('./data').Point}*/
+	export let position = { x: 0, y: 0 };
+	export let angle = 0;
+	export let scale = 1;
+
+	/** @type {string | undefined} */
+	export let colour = undefined;
+
+	const index = scale * angle;
+
+	$: transform = `scale(${scale} 1) rotate(${angle}) translate(${position.x} ${position.y})`;
+	$: current = $selected === id;
+	$: active = current && $selected_index === index;
+	$: angle_difference = Math.abs(($selected_index ?? 0) - index);
+	$: angle_distance = angle_difference > 180 ? 360 - angle_difference : angle_difference;
+</script>
+
+<use
+	href={`#shape-${id}`}
+	data-id={id}
+	data-index={index}
+	{transform}
+	class:current
+	class:active
+	style={`--delay: ${angle_distance * 3}ms`}
+	stroke={colour}
+	on:pointerover={() => {
+		if (active) selected_index.set(index);
+	}}
+/>
+
+{#if active}
+	<use {transform} href={`#shape-${id}`} class:current stroke-width={2} class="do-not-point" />
+	{#if $debug}
+		<text x={30} y={-20} {transform} class="do-not-point">a:{Math.floor(angle)} s:{scale}</text>
+		<line {transform} stroke="var(--ocean)" stroke-dasharray={[2, 6].join(" ")} x2={-position.x} y2={-position.y} />
+	{/if}
+{/if}
+
+<style>
+	.do-not-point {
+		pointer-events: none;
+	}
+
+	use {
+		fill: transparent;
+		stroke-dasharray: 12;
+	}
+
+	use[data-id]:hover {
+		cursor: move;
+	}
+	use.current {
+		stroke: var(--ocean);
+		animation: fill 180ms ease-out var(--delay) both;
+	}
+
+	use.active {
+		stroke: var(--skies);
+		stroke-linejoin: round;
+		stroke-linecap: round;
+		stroke-width: 18;
+	}
+
+	text {
+		stroke: none;
+		fill: var(--skies);
+	}
+
+	@keyframes fill {
+		from {
+			stroke-dashoffset: 12;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>
diff --git a/src/_site/components/bobbin/catalogue/Crescent.svelte b/src/_site/components/bobbin/catalogue/Crescent.svelte
new file mode 100644
index 0000000..5a22642
--- /dev/null
+++ b/src/_site/components/bobbin/catalogue/Crescent.svelte
@@ -0,0 +1,52 @@
+<script>
+    // import Button from "../../Button.svelte";
+    import SVG from "../SVG.svelte";
+    import { add_pattern, current } from "../Store.svelte";
+
+    let radius = 6;
+
+    /** @param {number} radius */
+    const get_name = (radius) => {
+        switch (radius) {
+            case -18:
+                return "circle";
+            case 0:
+                return "semicircle";
+            case 18:
+                return "arc";
+
+            default:
+                return "crescent";
+        }
+    };
+
+    $: d = [
+        "M0,18",
+        "A18,18 0 0 1 0,-18",
+        `A${Math.abs(radius)},18 0 0 ${radius > 0 ? "0" : "1"} 0,18`,
+        "Z",
+    ].join("");
+    $: name = get_name(radius);
+</script>
+
+<SVG centre>
+    <g fill="var(--ocean)" stroke="none">
+        <circle r={2} />
+    </g>
+    <path {d} />
+</SVG>
+
+<button
+    on:click={() => {
+        if ($current) {
+            $current.update((c) => ({ ...c, d }));
+        } else {
+            add_pattern(d);
+        }
+    }}>{$current ? "set to" : "add"} {name}</button
+>
+
+<label>
+    Angle
+    <input type="range" bind:value={radius} min={-18} max={18} step={1} />
+</label>
diff --git a/src/_site/components/bobbin/catalogue/Curve.svelte b/src/_site/components/bobbin/catalogue/Curve.svelte
new file mode 100644
index 0000000..464cbb0
--- /dev/null
+++ b/src/_site/components/bobbin/catalogue/Curve.svelte
@@ -0,0 +1,58 @@
+<script>
+    // import Button from "../../Button.svelte";
+    import SVG from "../SVG.svelte";
+    import { add_pattern, current } from "../Store.svelte";
+
+    let width = 90;
+    let offset = 30;
+    let start = 59;
+    let end = 19;
+
+    $: d = [
+        `M0,${offset}`,
+        `C0,${offset + start}`,
+        `${width},${end}`,
+        `${width},0`,
+    ].join(" ");
+</script>
+
+<SVG size={18 * 6 - 2}>
+    <g transform="translate(3 3)">
+        <g fill="var(--ocean)" stroke="none">
+            <circle cy={offset + start} r={2} />
+            <circle cx={width} cy={end} r={2} />
+        </g>
+        <g stroke="var(--ocean)">
+            <line y1={offset} y2={offset + start} />
+            <line x1={width} y1={0} x2={width} y2={end} />
+        </g>
+        <path {d} />
+    </g>
+</SVG>
+
+<button
+    on:click={() => {
+        if ($current) {
+            $current.update((c) => ({ ...c, d }));
+        } else {
+            add_pattern(d);
+        }
+    }}>{$current ? "set to" : "add"} curve</button
+>
+
+<label>
+    Width
+    <input type="range" bind:value={width} min={20} max={90} step={1} />
+</label>
+<label>
+    Offset
+    <input type="range" bind:value={offset} min={0} max={30} step={1} />
+</label>
+<label>
+    Pull start
+    <input type="range" bind:value={start} min={10} max={60} step={1} />
+</label>
+<label>
+    Pull end
+    <input type="range" bind:value={end} min={10} max={60} step={1} />
+</label>
diff --git a/src/_site/components/bobbin/catalogue/Loop.svelte b/src/_site/components/bobbin/catalogue/Loop.svelte
new file mode 100644
index 0000000..defbe7b
--- /dev/null
+++ b/src/_site/components/bobbin/catalogue/Loop.svelte
@@ -0,0 +1,47 @@
+<script>
+    // import Button from "../../Button.svelte";
+    import SVG from "../SVG.svelte";
+    import { add_pattern, current } from "../Store.svelte";
+    import { loop } from "../weaving.js";
+
+    let count = 2;
+    let bulge = 3 / 2;
+    let length = 16;
+
+    $: d = ["M0,0", ...loop(count, bulge, length), "Z"].join("");
+    $: name = bulge === 2 ? "circle" : "loop";
+</script>
+
+<SVG centre>
+    <g transform="translate(-18,0)">
+        <g fill="var(--ocean)" stroke="none">
+            <circle r={2} />
+        </g>
+        <path {d} />
+    </g>
+</SVG>
+
+<button
+    on:click={() => {
+        if ($current) {
+            $current.update((c) => ({ ...c, d }));
+        } else {
+            add_pattern(d);
+        }
+    }}
+    >{$current ? "set to" : "add"}
+    {count > 1 ? `${count} ${name}s` : name}</button
+>
+
+<label>
+    Count
+    <input type="range" bind:value={count} min={1} max={6} step={1} />
+</label>
+<label>
+    Length
+    <input type="range" bind:value={length} min={6} max={18} step={1} />
+</label>
+<label>
+    Bulge
+    <input type="range" bind:value={bulge} min={0.75} max={2} step={0.0625} />
+</label>
diff --git a/src/_site/components/bobbin/catalogue/Polygon.svelte b/src/_site/components/bobbin/catalogue/Polygon.svelte
new file mode 100644
index 0000000..634ee5c
--- /dev/null
+++ b/src/_site/components/bobbin/catalogue/Polygon.svelte
@@ -0,0 +1,73 @@
+<script>
+    // import Button from "../../Button.svelte";
+    import SVG from "../SVG.svelte";
+    import { add_pattern, current } from "../Store.svelte";
+    import { on_circle } from "../weaving.js";
+
+    let radius = 12;
+    let sides = 5;
+
+    $: [first, ...rest] = on_circle()(radius)(sides);
+    $: d = [
+        "M",
+        first?.join(","),
+        "L",
+        ...rest.map(([x, y]) => `${x},${y} `),
+        "Z",
+    ].join("");
+
+    /** @param {number} n */
+    const polygon = (n) => {
+        switch (n) {
+            case 3:
+                return "triangle";
+            case 4:
+                return "square";
+            case 5:
+                return "pentagon";
+            case 6:
+                return "hexagon";
+            case 7:
+                return "heptagon";
+            case 8:
+                return "octagon";
+            case 9:
+                return "nonagon";
+            case 10:
+                return "decagon";
+            case 12:
+                return "dodecagon";
+
+            default:
+                return `${n}-gon`;
+        }
+    };
+</script>
+
+<SVG centre>
+    <g fill="var(--ocean)" stroke="none">
+        <circle r={2} />
+    </g>
+    {#if first}
+        <path {d} />
+    {/if}
+</SVG>
+
+<button
+    on:click={() => {
+        if ($current) {
+            $current.update((c) => ({ ...c, d }));
+        } else {
+            add_pattern(d);
+        }
+    }}>{$current ? "set to" : "add"} {polygon(sides)}</button
+>
+
+<label>
+    Sides
+    <input type="range" bind:value={sides} min={3} max={12} step={1} />
+</label>
+<label>
+    Radius
+    <input type="range" bind:value={radius} min={6} max={18} step={1} />
+</label>
diff --git a/src/_site/components/bobbin/catalogue/Star.svelte b/src/_site/components/bobbin/catalogue/Star.svelte
new file mode 100644
index 0000000..c3c6c80
--- /dev/null
+++ b/src/_site/components/bobbin/catalogue/Star.svelte
@@ -0,0 +1,51 @@
+<script>
+    // import Button from "../../Button.svelte";
+    import SVG from "../SVG.svelte";
+    import { add_pattern, current } from "../Store.svelte";
+    import { on_circle } from "../weaving.js";
+
+    let inner_radius = 8;
+    let outer_radius = 18;
+    let count = 5;
+
+    $: outer = on_circle()(outer_radius)(count);
+    $: inner = on_circle(1 / 4 - 0.5 / count)(inner_radius)(count);
+
+    $: points = Array.from({ length: count }, (_, i) =>
+        i === 0 ? `M${outer[i]}L${inner[i]}` : ` ${outer[i]} ${inner[i]}`,
+    );
+
+    $: d = ["M0,0", ...points, "Z"].join("");
+</script>
+
+<SVG centre>
+    <g fill="var(--skies)" stroke="none">
+        {#each outer.concat(inner) as [cx, cy]}
+            <circle {cx} {cy} r={2} />
+        {/each}
+    </g>
+    <path {d} />
+</SVG>
+
+<button
+    on:click={() => {
+        if ($current) {
+            $current.update((c) => ({ ...c, d }));
+        } else {
+            add_pattern(d);
+        }
+    }}>{$current ? "set to" : "add"} star</button
+>
+
+<label>
+    Count
+    <input type="range" bind:value={count} min={5} max={19} step={1} />
+</label>
+<label>
+    Inner radius
+    <input type="range" bind:value={inner_radius} min={6} max={12} step={1} />
+</label>
+<label>
+    Outer radius
+    <input type="range" bind:value={outer_radius} min={12} max={24} step={1} />
+</label>
diff --git a/src/_site/components/bobbin/data.js b/src/_site/components/bobbin/data.js
new file mode 100644
index 0000000..f697da9
--- /dev/null
+++ b/src/_site/components/bobbin/data.js
@@ -0,0 +1,54 @@
+import * as lz from "npm:lz-string@1.5.0";
+/**
+ * @typedef Point
+ * @property {number} x
+ * @property {number} y
+ */
+
+/**
+ * @typedef Pattern
+ * @property {string} id
+ * @property {number} count
+ * @property {boolean} mirror
+ * @property {Point} position
+ * @property {string} d
+ */
+
+const divider = "|";
+
+/** @param {Pattern} pattern */
+const pattern_to_string = ({ id, count, mirror, position, d }) =>
+	[id, count, mirror ? "M" : "_", Math.round(position.x), Math.round(position.y), d].join(divider);
+
+/**
+ * Serialise patterns definition
+ * @param {Pattern[]} patterns
+ */
+export const patterns_to_string = (patterns) =>
+	lz.compressToEncodedURIComponent(JSON.stringify(patterns.map(pattern_to_string)));
+
+/** @param {string} pattern @returns {Pattern} */
+const string_to_pattern = (pattern) => {
+	const [id, count, mirror, x, y, d] = pattern.split(divider);
+	if (id && count && mirror && x && y && d) {
+		return { id, count: Number(count), mirror: mirror === "M", position: { x: Number(x), y: Number(y) }, d };
+	} else {
+		throw new Error(`Invalid pattern: ${pattern}`);
+	}
+};
+
+/**
+ * De-serialise pattern definition
+ * @param {string} patterns
+ * @returns {Pattern[]}
+ */
+export const string_to_patterns = (patterns) => {
+	try {
+		const array = JSON.parse(lz.decompressFromEncodedURIComponent(patterns));
+
+		return Array.isArray(array) ? array.map(string_to_pattern) : [];
+	} catch (error) {
+		console.error(error);
+		return [];
+	}
+};
diff --git a/src/_site/components/bobbin/weaving.js b/src/_site/components/bobbin/weaving.js
new file mode 100644
index 0000000..87c45bc
--- /dev/null
+++ b/src/_site/components/bobbin/weaving.js
@@ -0,0 +1,43 @@
+const { cos, sin, PI } = Math;
+export const tau = PI * 2;
+
+export const on_circle = (offset = 1 / 4) =>
+/** @param {number} radius */
+(radius) =>
+/** @param {number} count */
+(count) =>
+	Array.from({ length: count }, (_, index) => {
+		const position = tau * (index / count - offset);
+		return /** @type {const} */ ([cos(position) * radius, sin(position) * radius]);
+	});
+
+export const back_and_forth =
+	/** @param {[string, string]} pair */
+	([left, right]) =>
+	/** @param {number} n */
+	(n) => Array.from({ length: n * 2 }, (_, i) => (i < n ? left : right));
+
+/** @param {readonly [number, number][]} deltas */
+export const mirror = (...deltas) =>
+	[`M18,-${deltas.reduce((accumulator, [, y]) => accumulator + y, 0)}`].concat(
+		[
+			...deltas,
+			...deltas
+				.slice()
+				.reverse()
+				.map(([x, y]) => /** @type {const} */ ([-x, y])),
+		].map(([x, y]) => `l${x},${y}`),
+	);
+
+/**
+ * Create almond-shaped loops
+ *
+ * @param {number} count number of loops
+ * @param {number} length how long the loop is
+ * @param {number} bulge how wide the loop is
+ */
+export const loop = (count, bulge, length) =>
+	back_and_forth([
+		`a${length / bulge},${length / bulge} 0 0 1 ${length},0`,
+		`a${length / bulge},${length / bulge} 0 0 1 -${length},0`,
+	])(count);
diff --git a/src/_site/routes/bobbin.svelte b/src/_site/routes/bobbin.svelte
new file mode 100644
index 0000000..4b29928
--- /dev/null
+++ b/src/_site/routes/bobbin.svelte
@@ -0,0 +1,5 @@
+<script>
+    import Bobbin from "../components/bobbin/Bobbin.island.svelte";
+</script>
+
+<Bobbin />
-- 
2.51.2