<fieldset>
<legend>Tint the Dino scenes:</legend>
<input id="theme" type="color" value="#0000ff">
</fieldset>
<dl>
<div>
<dt>Plain</dt>
<dd class="thumbnail">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Monochromatic</dt>
<dd class="thumbnail monochromatic">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Analogous</dt>
<dd class="thumbnail analogous">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Triadic</dt>
<dd class="thumbnail triadic">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Complement</dt>
<dd class="thumbnail complement">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Opacity</dt>
<dd class="thumbnail opacity">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Desaturate</dt>
<dd class="thumbnail desaturate">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
<div>
<dt>Hue Rotate</dt>
<dd class="thumbnail hue-rotate">
<svg width="75" viewBox="0 0 288 308"><use href="#dino"></use></svg>
</dd>
</div>
</dl>
<svg style="display: none">
<symbol id="dino">
<title>Offlinosaur</title>
<line x1="0" y1="285" x2="280" y2="285" stroke="var(--color-2)" />
<path fill="var(--color-2)" d="M255.45 0.450012L164.5 0.919983C152.97 0.999983 143.65 10.35 143.6 21.88C143.52 44.72 143.43 107.86 143.43 107.86L133.87 107.89C130.89 107.89 128.5 110.35 128.55 113.32L128.72 122.98H115.64C111.9 122.97 108.87 126 108.87 129.74V137.2H95.1C90.95 137.2 87.5701 140.56 87.5701 144.71C87.5701 146.43 87.57 148.11 87.6 149.79C87.64 152.34 86.6001 153.46 83.9601 153.34C82.2001 153.26 80.4401 153.26 78.5801 153.27C76.0401 153.29 73.98 155.35 73.98 157.89V166.14L41.9 166.12C39.47 131.71 13.2001 123.83 13.2001 123.83C13.2001 123.5 13.2 108.54 13.19 108.24C12.78 100.08 0.560043 100.47 0.560043 108.64C0.580043 128.68 0.290054 167.89 0.290054 172.91C0.260054 220.64 45.44 218.51 45.44 218.51C52.14 242.37 70.73 247.26 70.73 247.26L70.69 301.51C70.69 304.67 73.25 307.23 76.41 307.22C83.14 307.2 94.15 307.18 100.11 307.16C103.71 307.15 106.62 304.23 106.62 300.63C106.62 297.06 103.76 294.15 100.19 294.1L84.2001 293.82L83.99 278.63C83.99 278.63 112.74 280.37 112.76 249.55H129.41C129.41 259.49 135.12 270.62 143.9 270.62L144.48 301.14C144.54 304.38 147.17 306.99 150.41 307.02L172.99 307.23C176.91 307.26 180.11 304.09 180.11 300.16C180.11 296.25 176.95 293.09 173.04 293.08H155.88L155.91 247.04C155.91 247.04 194.53 235.4 200.1 194.44L200.2 171.78H209.49V178.15C209.49 181.61 212.29 184.41 215.75 184.41C219.2 184.41 222 181.62 222.01 178.17C222.02 175.17 222.04 169.81 222.06 165.59C222.07 162.19 219.33 159.41 215.93 159.38L200.26 159.42L200.32 146H221.72V152.38C221.72 155.84 224.52 158.64 227.98 158.64C231.43 158.64 234.23 155.85 234.24 152.4C234.25 149.4 234.27 144.04 234.29 139.82C234.3 136.42 231.56 133.64 228.16 133.61L200.38 133.69L200.4 129.34C200.4 121.46 201.15 103.91 221.76 103.93H230.27C232.8 103.93 234.86 101.88 234.86 99.35C234.86 96.82 232.81 94.76 230.27 94.76L204.95 94.74C204.95 94.74 186.51 96.52 186.52 72.11C185.98 66.41 193.3 64.79 196.71 69.84C203.87 77.55 219.52 76.85 219.52 76.85L274.5 76.55C281.8 76.51 287.71 70.6 287.75 63.3L287.98 35.57C287.99 17.4 274.44 0.429983 255.46 0.419983L255.45 0.450012ZM192.91 46.12C186.54 46.12 181.39 40.95 181.39 34.59C181.39 28.22 186.56 23.07 192.92 23.07C199.29 23.07 204.44 28.24 204.44 34.6C204.44 40.97 199.27 46.12 192.91 46.12Z"/>
<circle cx="40" cy="50" r="30" fill="var(--color-3)" />
<circle cx="90" cy="25" r="10" fill="var(--color-3)" />
<circle cx="90" cy="55" r="5" fill="var(--color-3)" />
</symbol>
</svg>@layer demo {
.thumbnail {
--color-1: var(--base, blue);
--color-2: black;
--color-3: #555;
}
.monochromatic {
--color-1: var(--base, blue);
--color-2: oklch(from var(--color-1) 75% .2 h);
--color-3: oklch(from var(--color-1) 95% .2 h);
}
.analogous {
--color-1: var(--base, blue);
--color-2: oklch(from var(--color-1) l c calc(h - 45));
--color-3: oklch(from var(--color-1) l c calc(h + 45));
}
.triadic {
--color-1: var(--base, blue);
--color-2: oklch(from var(--color-1) l c calc(h - 120));
--color-3: oklch(from var(--color-1) l c calc(h + 120));
}
.complement {
--color-1: var(--base, blue);
--color-2: hsl(from var(--color-1) calc(h + 180) s l);
--color-3: hsl(from var(--color-1) calc(h + 180) s l);
}
.opacity {
--color-1: rgb(from var(--base, blue) r g b / 25%);
--color-2: rgb(from var(--color-1) r g b / 50%);
--color-3: rgb(from var(--color-1) r g b / 75%);
}
.desaturate {
--color-1: var(--base, blue);
--color-2: hsl(from var(--color-1) h calc(s / 4) l);
--color-3: hsl(from var(--color-1) h calc(s / 2) l);
}
.hue-rotate {
--color-1: var(--base, blue);
--color-2: oklch(from var(--color-1) calc(l - .2) c calc(h - 45));
--color-3: oklch(from var(--color-1) calc(l - .4) c calc(h - 90));
}
}
@layer demo.support {
:root {
--checker: #000;
--gradient-checkerboard: repeating-conic-gradient(
var(--checker) 0% 25%,
#0000 0% 50%)
50% / 1rem 1rem;
@media (prefers-color-scheme: light) {
--checker: #ddd;
}
}
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
background: var(--gradient-checkerboard);
display: grid;
place-content: center;
gap: 10vmin;
padding: 5vmin;
}
dl {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 2ch 4ch;
> div {
inline-size: 12ch;
flex-shrink: 0;
display: grid;
gap: 1ch;
}
}
.thumbnail {
background: var(--color-1);
aspect-ratio: 1;
border-radius: 20px;
box-shadow: inset 0 0 0 5px var(--color-2), 0 0 0 5px var(--color-3);
display: grid;
place-content: center;
> svg {
filter: drop-shadow(0px 2px 1px #0005);
}
}
fieldset {
max-inline-size: max-content;
margin-inline: auto;
}
}theme.oninput = () => {
document.body.style.setProperty('--base', theme.value)
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.