42 lines
1.9 KiB
HTML
42 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#f6f6f6" />
|
|
<title>Ghosts — ten tails in the Page 3 monochrome system</title>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header class="masthead">
|
|
<span class="brand">
|
|
<svg viewBox="0 0 30 30" fill="none" aria-hidden="true">
|
|
<path
|
|
d="M14.5231 29.2759C12.6685 22.5706 7.42938 17.3315 0.724097 15.4769C0.240255 15.3431 0.240255 14.657 0.724097 14.5231C7.42938 12.6685 12.6685 7.42939 14.5231 0.724099C14.6569 0.240257 15.343 0.240257 15.4769 0.724099C17.3315 7.42939 22.5706 12.6685 29.2759 14.5231C29.7597 14.657 29.7597 15.343 29.2759 15.4769C22.5706 17.3315 17.3315 22.5706 15.4769 29.2759C15.343 29.7597 14.657 29.7597 14.5231 29.2759Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
Ghosts · ten tails
|
|
</span>
|
|
<h1>Pip grew a <em>tail</em> and floated off.</h1>
|
|
<p class="lede">
|
|
Same round head and the same monochrome values from Page 3 — but every one now
|
|
trails a tail. Tails are built in the engine itself, as a chain of tapering lobes swept
|
|
along a curve, so each one merges into a single continuous silhouette rather than being
|
|
drawn on afterwards. The variable across these ten cards is the tail: its length, its
|
|
bow, which way it sweeps, and how fast it thins. Two wear a straw hat, after the sketch.
|
|
Hover any ghost to see its own emote.
|
|
</p>
|
|
</header>
|
|
|
|
<main id="grid" aria-label="Ten ghost variations with tails"></main>
|
|
|
|
<footer class="colophon">
|
|
<span>Rendered with @bible-strong/avatar-web</span>
|
|
<span>Values: ditto - aug 23 · Page 3</span>
|
|
</footer>
|
|
</div>
|
|
<script type="module" src="/src/ghosts-main.ts"></script>
|
|
</body>
|
|
</html>
|