Bursting Animated SVG Star Rating

The Bursting Animated SVG Star Rating is an explosive feedback component for user reviews. It replaces standard instantaneous state changes with a multi-layered animation sequence consisting of a ring expansion, radial line “sparks,” and an elastic fill. Its function is to provide high-fidelity tactile validation for user input within forms.

Specs

• Weight: ~4.5 KB (CSS + JS). Zero external dependencies.
• Performance: High. All animations utilize GPU-accelerated properties (transform, opacity) and SVG stroke manipulation.
• Theming / Customization: Fully modular HSL variables ($hue, $starHue) for background and accent colors.
• Responsiveness: Fluid. Uses a dynamic font-size calculation based on the viewport width to scale the entire component proportionally.
• Graceful Degradation: Fails back to a standard functional radio-group rating. The hidden attribute management in JS ensures labels remain accessible.

Anatomy

The component is engineered with a separation of state (HTML), motion (CSS), and orchestration (JS).

• HTML (The Skeleton): A semantic <form> containing hidden radio inputs and <label> elements housing multi-part SVGs.
• CSS (The Skin): Complex @keyframes drive the four distinct visual layers: .rating__star-ring, .rating__star-line, .rating__star-stroke, and .rating__star-fill.
• JS (The Nervous System): An ES6 StarRating class that intercepts changes to inject staggered CSS delays. This ensures that when a user jumps from 1 star to 5, the stars animate in a rhythmic sequence rather than firing simultaneously.

Logic

The primary technical highlight is the “Staggered Delay Injection” within the JS logic.

if (id > prevRatingID + 1 && id <= this.rating.id) {
    ++delay;
    ratingLabel.classList.add(`rating__label--delay${delay}`);
}

Instead of defining static CSS delays, the script calculates the “delta” between the old rating and the new one. It then applies incremental classes (--delay1, --delay2, etc.) to the labels. The SCSS loop maps these classes to animation-delay offsets, creating a sequential “domino” effect that visually bridges the gap between the previous and current selection state.

Feel

Energetic and rewarding. The cubic-bezier(0.42, 0, 0.58, 1) timing provides a smooth build-up followed by a sharp “pop.” The overlapping layers of the SVG (rings and sparks) create a physical sense of celebration, making the simple act of rating feel like a curated interaction rather than a data entry task.