56 lines
2.9 KiB
HTML
56 lines
2.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>Pip — 10 variations 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>
|
|
Pip · 10 variations
|
|
</span>
|
|
<h1>One Pip, ten <em>values</em>, no hue anywhere.</h1>
|
|
<p class="lede">
|
|
Black, gray and white only — the system actually in use on Page 3. Geometry is held
|
|
constant, same sphere and same eyes as the original Pip, so with hue removed the single
|
|
remaining variable is value. Five sit on the light artboard ground
|
|
<code>#F6F6F6</code> and five on the dark ground <code>#0A0A0A</code>. Hover any one to
|
|
see Pip’s signature “curious” emote.
|
|
</p>
|
|
<div class="swatches" aria-label="Source values, darkest to lightest">
|
|
<span class="swatch" style="--sw: #000000"><i></i>000000</span>
|
|
<span class="swatch" style="--sw: #0a0a0a"><i></i>0A0A0A</span>
|
|
<span class="swatch" style="--sw: #141414"><i></i>141414</span>
|
|
<span class="swatch" style="--sw: #2a2a2a"><i></i>2A2A2A</span>
|
|
<span class="swatch" style="--sw: #4d4d4d"><i></i>4D4D4D</span>
|
|
<span class="swatch" style="--sw: #7a7a7a"><i></i>7A7A7A</span>
|
|
<span class="swatch" style="--sw: #a8a8a8"><i></i>A8A8A8</span>
|
|
<span class="swatch" style="--sw: #b5b5b5"><i></i>B5B5B5</span>
|
|
<span class="swatch" style="--sw: #bcbcbc"><i></i>BCBCBC</span>
|
|
<span class="swatch" style="--sw: #e0e0e0"><i></i>E0E0E0</span>
|
|
<span class="swatch" style="--sw: #f2f2f2"><i></i>F2F2F2</span>
|
|
<span class="swatch" style="--sw: #f6f6f6"><i></i>F6F6F6</span>
|
|
<span class="swatch" style="--sw: #ffffff"><i></i>FFFFFF</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="grid" aria-label="Ten monochrome Pip variations"></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/pip-main.ts"></script>
|
|
</body>
|
|
</html>
|