Animated SVG Alignment Toolbar

This is an Animated SVG Alignment Toolbar. It replaces static UI states with physical motion. Its function is to provide immediate, tactile feedback for spatial arrangement settings (Top, Middle, Bottom) using native form inputs.

Specs

• Weight: ~5 KB. Zero external dependencies.
• Performance: High. The animations target SVG transform: translate() properties, ensuring GPU acceleration without triggering DOM layout recalculations.
• Theming / Customization: Entirely driven by HSL CSS variables (--hue, --bg, --fg, --primary).
• Responsiveness: Fluid. Relies on a dynamic calc() function on the :root font-size, making all em-based dimensions scale perfectly with the viewport.

Anatomy

The component strips away heavy JavaScript state management, relying on native HTML mechanisms.

• HTML (The Skeleton): A native <form> wrapping <label> elements. Each label contains a hidden <input type="radio"> and an inline <svg> graphic representing the alignment state.
• CSS (The Skin): Uses the :checked pseudo-class adjacent sibling combinator (+) to trigger complex @keyframes. A @media (prefers-color-scheme: dark) query handles theme switching automatically.
• JS (The Nervous System): Minimal. A single event listener removes the .toolbar--pristine class on the first interaction. This prevents the “deselection” animations from firing abruptly when the page initially loads.

Logic

The logic centers on “State-Driven CSS” combined with staggered keyframes. This is the Glyph-logic of the snippet:

.toolbar__input:checked + .toolbar__icon--align-t .toolbar__icon-rect {
	animation-name: alignTopA1;
}
.toolbar__input:checked + .toolbar__icon--align-t .toolbar__icon-rect--delayed {
	animation-name: alignTopA2;
}

Instead of using JavaScript to observe clicks and inject animation classes, the DOM structure does the heavy lifting. The invisible radio button dictates the state. When :checked is true, the adjacent SVG <rect> elements receive specific animation timelines. The --delayed modifier applies a secondary animation curve, making the smaller rectangle bounce a fraction of a second after the larger one, mimicking physical drag and inertia.

Feel

Tactile and elastic. The easing curves (alternating ease-in and ease-out across keyframes) give the SVG rectangles a mechanical, spring-loaded bounce. It feels less like clicking a flat pixel and more like releasing a physical latch inside a mechanical switch.