SVG Counter Animation
Build a smooth counting-up number animation using SVG text elements and a JavaScript requestAnimationFrame loop.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Building the Counter Logic
A counting animation uses JavaScript's requestAnimationFrame to repeatedly update an SVG text element's content between a start and end number over a set duration, applying an easing function so the count slows naturally as it approaches the target value.
- requestAnimationFrame drives smooth, frame-synced number updates
- Easing functions (ease-out) make the count feel natural, not robotic
- Round displayed numbers to avoid distracting decimal flicker
Triggering the Animation on Scroll
Combine the counter logic with an IntersectionObserver to start the count-up animation only when the SVG scrolls into the viewport, a common pattern for statistics sections and landing page metrics displays.
- IntersectionObserver detects when the counter enters the viewport
- Trigger animation once per element to avoid repeated re-counting
- Stagger multiple counters slightly for a polished cascading effect
Frequently Asked Questions
Why use SVG text instead of HTML for a counter animation?
SVG text fits naturally when the counter is part of a larger SVG graphic, like a dashboard gauge or icon-paired statistic, keeping everything in one cohesive vector element.
How do I prevent the counter from re-triggering every time I scroll past it?
Use the IntersectionObserver's unobserve method after the first trigger, or track a 'has animated' flag per element to ensure the count-up only happens once.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG