Back to the library
Icon morph — grid to list
Variant: Grid to list
A view switcher: four tiles re-proportioning into two rows, the left column shrinking to bullets and the right column stretching into lines. Nothing enters and nothing leaves — every mark in the list is a mark from the grid, which is the only reason the switch reads as the same content re-laid rather than a different icon swapped in. The bottom row trails the top by 36ms so the two rows resolve in reading order instead of shuddering together.
controliconmorphsvg
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Icon morph — grid to list</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — every duration in the document runs off --t. Same beat map as
the rest of the family: press at 8%, morph 11-19%, return 58-66%. */
--cycle: 3.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-accent: cubic-bezier(0.32, 0.72, 0, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.chip {
display: grid;
place-items: center;
width: clamp(72px, 20vw, 96px);
aspect-ratio: 1;
border-radius: calc(18px * var(--round));
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--oat);
animation: press var(--t) infinite;
}
.icon {
display: block;
width: 58%;
height: 58%;
}
.icon rect {
fill: var(--slate);
}
.cell {
transform-box: fill-box;
transform-origin: center;
animation: relayout var(--t) infinite;
}
/* 36ms — one frame over the 30ms floor of the stagger band. Any more and
the icon reads as two separate events; any less and it is a shudder. */
.row-2 {
animation-delay: calc(0.036s / var(--speed));
}
/* Only ever visible under reduced motion. */
.pose-b {
opacity: 0;
}
@keyframes press {
0%,
8% {
transform: scale(1);
animation-timing-function: var(--ease-out);
}
11% {
transform: scale(0.955);
animation-timing-function: var(--ease-out);
}
16%,
55% {
transform: scale(1);
animation-timing-function: var(--ease-out);
}
58% {
transform: scale(0.955);
animation-timing-function: var(--ease-out);
}
63%,
100% {
transform: scale(1);
}
}
/* One keyframe set for all four tiles; each carries its own destination as
--_tx/--_ty/--_sx/--_sy. Four near-identical keyframe blocks would drift
the moment the timing is retuned, and there is nothing here a scale and
a translate cannot say. No tile enters and none leaves: every mark in
the list is a mark from the grid, which is the only reason this reads as
the same content re-laid rather than a different icon swapped in. */
@keyframes relayout {
0%,
11% {
transform: translate(0, 0) scale(1, 1);
animation-timing-function: var(--ease-accent);
}
19%,
58% {
transform: translate(var(--_tx), var(--_ty)) scale(var(--_sx), var(--_sy));
animation-timing-function: var(--ease-accent);
}
66%,
100% {
transform: translate(0, 0) scale(1, 1);
}
}
@media (prefers-reduced-motion: reduce) {
/* Gentler, not absent. The re-proportioning goes; both layouts stay,
cross-fading on the same beats the transforms were using. */
.chip {
animation: none;
}
.cell {
animation: none;
transform: none;
}
.pose-a {
animation: cross-out calc(var(--t) * 1.8) ease infinite;
}
.pose-b {
animation: cross-in calc(var(--t) * 1.8) ease infinite;
}
@keyframes cross-out {
0%,
11% {
opacity: 1;
}
19%,
58% {
opacity: 0;
}
66%,
100% {
opacity: 1;
}
}
@keyframes cross-in {
0%,
11% {
opacity: 0;
}
19%,
58% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
}
</style>
</head>
<body>
<div
class="chip"
role="img"
aria-label="A grid view icon re-laying itself into a list view icon"
>
<svg class="icon" viewBox="0 0 24 24">
<g class="pose-a">
<rect
class="cell"
style="--_tx: -1.9px; --_ty: 0.6px; --_sx: 0.548; --_sy: 0.548"
x="2.6"
y="2.6"
width="8.4"
height="8.4"
rx="2.2"
/>
<rect
class="cell"
style="--_tx: -1.8px; --_ty: 0.6px; --_sx: 1.4286; --_sy: 0.381"
x="13"
y="2.6"
width="8.4"
height="8.4"
rx="2.2"
/>
<rect
class="cell row-2"
style="--_tx: -1.9px; --_ty: -0.6px; --_sx: 0.548; --_sy: 0.548"
x="2.6"
y="13"
width="8.4"
height="8.4"
rx="2.2"
/>
<rect
class="cell row-2"
style="--_tx: -1.8px; --_ty: -0.6px; --_sx: 1.4286; --_sy: 0.381"
x="13"
y="13"
width="8.4"
height="8.4"
rx="2.2"
/>
</g>
<!-- The static list pose. Its corner radii are elliptical because the
morphed tiles' are: a 2.2 radius under scale(1.4286, 0.381) lands at
3.1 by 0.85, and the cross-fade would flicker if this pose rounded
them off to a pill. -->
<g class="pose-b">
<rect x="2.6" y="5.1" width="4.6" height="4.6" rx="1.2" />
<rect x="9.4" y="5.8" width="12" height="3.2" rx="3.1" ry="0.85" />
<rect x="2.6" y="14.3" width="4.6" height="4.6" rx="1.2" />
<rect x="9.4" y="15" width="12" height="3.2" rx="3.1" ry="0.85" />
</g>
</svg>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.