DEV Community: Hari

Animated Bell Icon: Anatomy of a SMIL Ringing Animation

Hari — Tue, 26 May 2026 11:30:14 +0000

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:

// Hypothetical bell icon structure (inspired by CSSVG patterns)
<svg viewBox="0 0 40 40">
  <g id="bell-body">
    <path d="M10,30 Q20,10 30,30" ... />
    <animateTransform 
      attributeName="transform" 
      type="rotate" 
      values="0,20,30; 20,20,30; -10,20,30; 0,20,30" 
      dur="1.5s" 
      repeatCount="indefinite"
      additive="sum"
      keyTimes="0; 0.5; 0.75; 1"
      keySplines="0.25 0.1 0.25 1; 0.5 0 0.5 1; 0.25 0.1 0.25 1"
    />
  </g>
  <g id="clapper">
    <circle cx="20" cy="25" r="3" ... />
    <animateTransform 
      attributeName="transform" 
      type="translate" 
      values="0,0; 0,5; 0,0" 
      dur="0.8s" 
      repeatCount="indefinite"
      additive="sum"
      keyTimes="0; 0.5; 1"
      keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
    />
  </g>
</svg>

Why this structure?

Grouping the bell body and clapper separately allows independent animation loops. The additive="sum" property is crucial—it combines the clapper’s vertical movement with the bell’s rotation, making the clapper swing relative to the bell’s tilt. Without additive transforms, the clapper would move in absolute coordinates, breaking the illusion of a single mechanical system.

Decoding the Swing: `keyTimes` and Pendulum Physics

The bell’s rotation follows a pendulum-like arc. The keyTimes attribute defines the animation’s timeline, while keySplines control easing between keyframes.

<animateTransform 
  attributeName="transform" 
  type="rotate" 
  values="0,20,30; 20,20,30; -10,20,30; 0,20,30"
  keyTimes="0; 0.5; 0.75; 1"
  keySplines="0.25 0.1 0.25 1; 0.5 0 0.5 1; 0.25 0.1 0.25 1"
/>

Why these values?

values: The rotation pivots around (20,30) (the bell’s top). The sequence 0 → 20° → -10° → 0° mimics a bell’s natural swing: it starts at rest, swings forward (positive rotation), then backward past center due to momentum, and finally settles.
keyTimes: The animation spends 50% of the time reaching the forward peak (20°), 25% swinging back to -10° (overshoot), and 25% returning to center. This asymmetry reflects real physics—a bell loses energy as it swings, so the forward stroke is slower than the return.
keySplines: The cubic-bezier curves create “slow-in, slow-out” motion. The first spline (0.25 0.1 0.25 1) eases into the forward swing, the second (0.5 0 0.5 1) accelerates the backswing, and the third mirrors the first for settling. This avoids mechanical, linear motion.

Comparison to CSSVG’s search icon:

The search icon uses similar splines for its scanning motion (keySplines="0 0 1 1" for constant speed), but the bell requires variable speed to feel organic. The menu icon’s scaling (keySplines="0 0 1 1") is linear because it’s a simple morph, not a physics-based swing.

The Clapper’s Strike: Additive Translation and Timing

The clapper must move independently of the bell’s rotation. Its translate animation is set to additive="sum" so it compounds with the bell’s transform:

<animateTransform 
  attributeName="transform" 
  type="translate" 
  values="0,0; 0,5; 0,0" 
  additive="sum"
/>

Why additive?

If the bell rotates 20° and the clapper translates 5px downward, additive="sum" applies both transforms to the clapper’s coordinate space. Without it, the clapper would move relative to the SVG’s origin, not the bell’s tilted position.

Timing the strike:

The clapper’s 0.8s loop is shorter than the bell’s 1.5s loop. This offset creates a realistic ringing pattern: the clapper strikes the bell at the peak of its forward swing, then again as the bell swings back. The keySplines="0.42 0 0.58 1" (a standard “ease-in-out”) gives the clapper a quick strike and immediate rebound.

Layering Transforms: Rotation + Translation for Realism

A bell doesn’t just rotate—its pivot point shifts slightly as it swings. We combine rotate and translate using multiple <animateTransform> elements with additive="sum":

<g transform="translate(20,30)">
  <animateTransform type="rotate" ... /> 
  <animateTransform type="translate" values="0,0; 0,2; 0,0" ... />
</g>

Why both?

The translate animation adds a subtle vertical bob to the bell’s pivot, simulating the slight lift at the end of a swing. This mimics a real bell’s motion: as it swings forward, the pivot point rises slightly due to the rope’s tension. The search icon uses a similar combo (translate + rotate) for its magnifier’s arc, but the bell’s translation is smaller and faster.

Math Behind the Motion: Sine Waves vs. Keyframes

Could we use a sine wave instead of keyframes? SMIL doesn’t support calc() for complex easing, so keyframes with keySplines are more flexible. However, the underlying math is similar:

rotation(t) = A * sin(2πt/T + φ)

Where:

A = amplitude (20°)
T = period (1.5s)
φ = phase shift (to align with clapper strike)

The keyTimes and keySplines approximate this sine wave with manual control points. For example, the bell’s forward swing (0 → 20°) covers 50% of the time, matching the sine wave’s first half-cycle. The overshoot (20° → -10°) adds a decay factor, like friction.

Why not pure sine?

Real bells don’t swing in perfect harmonic motion—they lose energy and overshoot. Keyframes let us tweak each segment (acceleration, overshoot, settle) independently, which a single sine function can’t achieve.

Practical Takeaways: Applying These Patterns

You can reuse these SMIL patterns in your own icons:

For pendulum motion:

Use rotate with asymmetric keyTimes (e.g., 0; 0.6; 0.8; 1) and keySplines that ease in/out. Offset the clapper’s loop for striking.
For layered transforms:

Combine rotate and translate with additive="sum" to create complex motion (e.g., a bouncing icon that rotates while translating).
For organic easing:

Avoid keySplines="0 0 1 1" (linear) for natural motion. Use 0.25 0.1 0.25 1 for slow-start/slow-stop, or 0.5 0 0.5 1 for acceleration.
For independent loops:

Give different elements different dur values and repeatCount="indefinite". The menu icon’s lines have a 2s loop, while the search icon’s magnifier has a 4s loop—both offset for visual interest.

Conclusion: The Power of Declarative SMIL

The bell icon’s ringing animation demonstrates SMIL’s strength: fine-grained, physics-inspired motion without JavaScript. By combining keyTimes, keySplines, and additive transforms, we create a believable mechanical system. These patterns are reusable across CSSVG’s icon library—whether it’s a bell, a swinging lantern, or a bouncing ball.

To see these principles in action, explore the full collection at cssvg.com. Every icon is a study in efficient, declarative animation—ready to drop into your React or Next.js project.

Animated SVG Icons in React: Why SMIL Still Wins in 2026

Hari — Wed, 20 May 2026 00:36:23 +0000

For years, the default answer for adding motion to web interfaces has been to reach for a JavaScript animation library. But what if you could achieve complex, performant, and accessible animations with zero runtime JavaScript? That’s the promise of SMIL (Synchronized Multimedia Integration Language) animations inside SVG, and it’s the core technology powering the cssvg-icons library for React and Next.js.

In 2026, as web bundles grow and performance budgets tighten, SMIL offers a radically simple and self-contained alternative. Here’s why this decades-old web standard isn’t just viable—it’s often the superior choice for icon animation.

The Zero-JS Advantage: Animation Without the Bundle Weight

The most compelling reason to use SMIL is its complete lack of JavaScript at runtime. The entire animation logic is embedded directly within the SVG markup.

Consider the Activity icon from the library. Its pulsing, scanning effect is defined by a series of <animate> and <animateTransform> elements inside the SVG. The browser’s native renderer executes this without a single line of JS.

// icons/activity/activity.tsx (excerpt)
<animateTransform
  attributeName="transform"
  type="translate"
  values="20,20;20,20;20,20"
  dur="4s"
  repeatCount="indefinite"
  calcMode="spline"
  keyTimes="0;0.0025;1"
  keySplines="0 0 1 1;0 0 1 1"
  additive="replace"
/>

This pattern means your React component is just a declarative wrapper. The heavy lifting is done by the browser’s SVG engine. For a typical icon library, this can shave hundreds of kilobytes off your initial JavaScript bundle. In a world of Core Web Vitals, that’s a significant win.

Declarative and Portable: Animation as Data

SMIL animations are pure data. They are not tied to any framework’s lifecycle or re-render cycles. This makes them incredibly portable.

The cssvg-icons library exports standard React components, but the animation logic is framework-agnostic. You could take the raw SVG from icons/crown/crown.svg and drop it into an Angular, Vue, or Svelte project with identical behavior. The animation is a property of the SVG itself, not the component wrapper.

This declarative nature also aligns perfectly with React’s philosophy. The component’s props (size, color, strokeWidth) control presentation, while the SVG’s internal SMIL tags control motion. There’s no useEffect hook to clean up, no requestAnimationFrame loop to manage. The animation state is isolated and self-maintaining.

Complex Motion Without the Code Complexity

A common misconception is that SMIL is only for simple fades and slides. The Menu icon proves otherwise. It uses multiple, staggered animations on three separate lines to create a smooth morphing effect from a hamburger menu to an "X".

// icons/menu/menu.tsx (excerpt)
<g transform="translate(20,11.97) rotate(0,0,0) scale(0.2,0.2)">
  <animateTransform
    attributeName="transform"
    type="scale"
    values="0.2,0.2;0.15,0.15;0.2,0.2"
    dur="2s"
    repeatCount="indefinite"
    calcMode="spline"
    keyTimes="0;0.5;1"
    keySplines="0 0 1 1;0 0 1 1"
    additive="sum"
  />
  <line ... />
</g>

To achieve this with a JavaScript library, you’d need to calculate keyframes, manage timing offsets, and ensure the animation restarts cleanly on component mount. With SMIL, it’s a few lines of declarative markup. The browser handles the interpolation, timing functions, and lifecycle automatically.

Accessibility and the Shadow DOM

SVG icons are often used as decorative elements or interactive controls. SMIL animations, being part of the DOM, respect browser accessibility features in ways that canvas or WebGL-based animations often do not.

Because the animation is defined in the DOM, screen readers can still parse the SVG’s semantic structure (<title>, <desc>) even while it’s moving. The aria-hidden="true" attribute used in cssvg-icons components ensures icons are ignored by assistive tech when purely decorative, but for interactive icons, the underlying structure remains accessible.

Furthermore, SMIL animations are contained within the SVG’s coordinate system. They don’t leak into the global CSS namespace or require complex CSS class management to isolate styles. This containment is a natural fit for component-based architectures.

Performance and the Main Thread

JavaScript animations run on the main thread, competing for resources with your React app’s state updates, event handlers, and other logic. SMIL animations are typically handled by the browser’s compositor thread, which is optimized for graphics rendering.

This means smoother animations, especially on mobile devices, and less jank when your UI is under heavy interaction load. The Search icon’s scanning magnifier animation, for instance, runs independently of any JS-driven UI updates on the page.

// icons/search/search.tsx (excerpt)
<animateTransform
  attributeName="transform"
  type="translate"
  values="20,20;22.48,15.52;16.16,17.76;23.12,20.72;20,20"
  dur="4s"
  repeatCount="indefinite"
  calcMode="spline"
  keyTimes="0;0.2475;0.5;0.7525;1"
  keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1"
  additive="replace"
/>

The browser can often offload SMIL animation frames to the GPU, resulting in 60fps motion with minimal CPU impact.

The Browser Support Reality in 2026

It’s true that SMIL support has been inconsistent historically. But in 2026, the landscape is different. All modern browsers (Chrome, Firefox, Safari, Edge) have mature, stable SVG implementations. SMIL is a W3C recommendation from 1999—it’s one of the most battle-tested web standards we have.

For the rare edge case (like an old version of Internet Explorer), the cssvg-icons components are designed to fall back gracefully. The SVG is still a valid, static icon. The animation is a progressive enhancement. This is a more robust strategy than depending on a third-party JS library that might fail to load or execute.

When Would You Not Use SMIL?

SMIL isn’t a silver bullet. For highly interactive, gesture-driven animations that respond to complex user physics, a JS library like Framer Motion might be necessary. SMIL is best for predefined, looping, or triggered animations—exactly the kind used in icon sets, loaders, and micro-interactions.

If your animation needs to change dynamically based on complex state (e.g., a graph that morphs based on live data), SMIL’s declarative nature can become a limitation. But for the vast majority of UI icons, it’s more than sufficient.

Getting Started with SMIL in Your React Project

The cssvg-icons library demonstrates the pattern:

Create a simple React wrapper that accepts props for size, color, and strokeWidth.
Embed the SVG with your SMIL animation tags directly inside the return statement.
Use it like any other component:

import Bell from 'cssvg-icons/icons/bell';

export default function NotificationBell() {
  return (
    <div className="relative">
      <Bell size={24} color="red" />
      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full">
        {unreadCount}
      </span>
    </div>
  );
}

The animation plays automatically on mount. No useEffect, no cleanup function, no bundle tax.

Conclusion

SMIL animations in SVG offer a path to lightweight, performant, and accessible motion that integrates seamlessly with React’s declarative model. In 2026, as we optimize for faster load times and smoother experiences, revisiting this mature web standard isn’t just nostalgic—it’s a practical engineering decision.

The cssvg-icons library exists to prove this point: you can have beautiful, complex, animated icons without the JavaScript overhead. It’s a testament to the power of web platform APIs done right.

Explore the full collection of animated SVG icons and see the SMIL patterns in action at https://icon.cssvg.com.

Animated SVG Icons in React: Why SMIL Still Wins in 2026

Hari — Mon, 18 May 2026 02:49:44 +0000

The Zero-JS Advantage: Animation Without the Bundle Weight

The most compelling reason to use SMIL is its complete lack of JavaScript at runtime. The entire animation logic is embedded directly within the SVG markup.

// icons/activity/activity.tsx (excerpt)
<animateTransform
  attributeName="transform"
  type="translate"
  values="20,20;20,20;20,20"
  dur="4s"
  repeatCount="indefinite"
  calcMode="spline"
  keyTimes="0;0.0025;1"
  keySplines="0 0 1 1;0 0 1 1"
  additive="replace"
/>

Declarative and Portable: Animation as Data

SMIL animations are pure data. They are not tied to any framework’s lifecycle or re-render cycles. This makes them incredibly portable.

Complex Motion Without the Code Complexity

// icons/menu/menu.tsx (excerpt)
<g transform="translate(20,11.97) rotate(0,0,0) scale(0.2,0.2)">
  <animateTransform
    attributeName="transform"
    type="scale"
    values="0.2,0.2;0.15,0.15;0.2,0.2"
    dur="2s"
    repeatCount="indefinite"
    calcMode="spline"
    keyTimes="0;0.5;1"
    keySplines="0 0 1 1;0 0 1 1"
    additive="sum"
  />
  <line ... />
</g>

Accessibility and the Shadow DOM

Performance and the Main Thread

// icons/search/search.tsx (excerpt)
<animateTransform
  attributeName="transform"
  type="translate"
  values="20,20;22.48,15.52;16.16,17.76;23.12,20.72;20,20"
  dur="4s"
  repeatCount="indefinite"
  calcMode="spline"
  keyTimes="0;0.2475;0.5;0.7525;1"
  keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1"
  additive="replace"
/>

The browser can often offload SMIL animation frames to the GPU, resulting in 60fps motion with minimal CPU impact.

The Browser Support Reality in 2026

When Would You Not Use SMIL?

Getting Started with SMIL in Your React Project

The cssvg-icons library demonstrates the pattern:

Create a simple React wrapper that accepts props for size, color, and strokeWidth.
Embed the SVG with your SMIL animation tags directly inside the return statement.
Use it like any other component:

import Bell from 'cssvg-icons/icons/bell';

export default function NotificationBell() {
  return (
    <div className="relative">
      <Bell size={24} color="red" />
      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full">
        {unreadCount}
      </span>
    </div>
  );
}

The animation plays automatically on mount. No useEffect, no cleanup function, no bundle tax.

Conclusion

The cssvg-icons library exists to prove this point: you can have beautiful, complex, animated icons without the JavaScript overhead. It’s a testament to the power of web platform APIs done right.

Explore the full collection of animated SVG icons and see the SMIL patterns in action at https://icon.cssvg.com.

Export SVG + CSS Animations: Ship Zero-JS Motion to Production

Hari — Tue, 12 May 2026 11:24:03 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

Modern browsers have a powerful, underappreciated animation system built right in: SVG + CSS keyframes. No runtime, no bundler magic — just markup and styles that the browser hardware-accelerates automatically.

In this article we'll explore Export SVG + CSS Animations: Ship Zero-JS Motion to Production and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

SVG shapes live in the DOM. CSS already knows how to animate DOM elements with @keyframes. The browser's compositor thread handles the rest at a smooth 60 fps — and you ship zero extra bytes to your users.

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

CSS Keyframe Animation: Orchestrating Complex SVG Sequences

Hari — Sun, 10 May 2026 10:18:43 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore CSS Keyframe Animation: Orchestrating Complex SVG Sequences and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

Building an Animated SVG Icon System with CSS

Hari — Fri, 08 May 2026 10:27:13 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore Building an Animated SVG Icon System with CSS and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

CSS Animation with SVG clip-path: Creative Masking Effects

Hari — Thu, 07 May 2026 08:13:09 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore CSS Animation with SVG clip-path: Creative Masking Effects and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

Responsive SVG Animations That Scale with CSS

Hari — Sun, 03 May 2026 10:10:11 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore Responsive SVG Animations That Scale with CSS and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

CSS Animation vs SMIL: Why CSS Always Wins for SVG

Hari — Fri, 01 May 2026 10:25:59 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore CSS Animation vs SMIL: Why CSS Always Wins for SVG and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

SVG Text Animations with CSS: Typewriter, Fade & Reveal

Hari — Wed, 29 Apr 2026 11:00:17 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore SVG Text Animations with CSS: Typewriter, Fade & Reveal and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

Infinite CSS Animations: Creating Seamless SVG Loops

Hari — Mon, 27 Apr 2026 11:08:28 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore Infinite CSS Animations: Creating Seamless SVG Loops and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

SVG Filter Animations with CSS: Glow, Blur & Drop Shadow

Hari — Sat, 25 Apr 2026 09:56:40 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore SVG Filter Animations with CSS: Glow, Blur & Drop Shadow and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

Any SVG element (circle, path, rect, g…) can receive a class and be animated just like a <div>.

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

<style>
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }
</style>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

SVG shapes are DOM elements → CSS can animate them natively
@keyframes + transform/opacity = GPU-composited, zero-JS animation
The output is portable markup — works in React, Vue, Svelte, or plain HTML

Drop a question in the comments if you want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

DEV Community: Hari

Animated Bell Icon: Anatomy of a SMIL Ringing Animation

Introduction: Why SMIL for Animated Icons?

The Bell’s Anatomy: SVG Structure for Animation

Decoding the Swing: keyTimes and Pendulum Physics

The Clapper’s Strike: Additive Translation and Timing

Layering Transforms: Rotation + Translation for Realism

Math Behind the Motion: Sine Waves vs. Keyframes

Practical Takeaways: Applying These Patterns

Conclusion: The Power of Declarative SMIL

Animated SVG Icons in React: Why SMIL Still Wins in 2026

The Zero-JS Advantage: Animation Without the Bundle Weight

Declarative and Portable: Animation as Data

Complex Motion Without the Code Complexity

Accessibility and the Shadow DOM

Performance and the Main Thread

The Browser Support Reality in 2026

When Would You Not Use SMIL?

Getting Started with SMIL in Your React Project

Conclusion

Animated SVG Icons in React: Why SMIL Still Wins in 2026

The Zero-JS Advantage: Animation Without the Bundle Weight

Declarative and Portable: Animation as Data

Complex Motion Without the Code Complexity

Accessibility and the Shadow DOM

Performance and the Main Thread

The Browser Support Reality in 2026

When Would You Not Use SMIL?

Getting Started with SMIL in Your React Project

Conclusion

Export SVG + CSS Animations: Ship Zero-JS Motion to Production

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

CSS Keyframe Animation: Orchestrating Complex SVG Sequences

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

Building an Animated SVG Icon System with CSS

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

CSS Animation with SVG clip-path: Creative Masking Effects

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

Responsive SVG Animations That Scale with CSS

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

Decoding the Swing: `keyTimes` and Pendulum Physics

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering