Introduction: Why SMIL for Animated Icons?
When building a library of animated SVG icons, the choice of animation technology is critical. CSSVG Icons uses SMIL (Synchronized Multimedia Integration Language)—an XML-based language native to SVG—because it offers declarative, per-element control without external dependencies. Unlike CSS animations that apply to entire elements, SMIL lets us animate individual attributes (like transform, stroke-dashoffset, or opacity) with precise timing and easing, all within the SVG itself.
For a bell icon, SMIL’s ability to chain multiple transforms—rotation, translation, and scaling—with different easing curves creates a natural, physics-inspired ringing motion. This post breaks down a hypothetical bell icon’s SMIL animation, using real patterns from the CSSVG codebase (like the search and menu icons) to explain the why behind each decision.
The Bell’s Anatomy: SVG Structure for Animation
A ringing bell requires two main moving parts: the bell body (swinging back and forth) and the clapper (striking the bell). In SVG, we group these elements to animate them independently:
