# Timing Charts: A Blueprint For SMIL Animations

DevFeed: [Timing Charts: A Blueprint For SMIL Animations](<https://devfeed.tech/articles/timing-charts-a-blueprint-for-smil-animations-4326.md>)

Original publisher: [Read original article](<https://smashingmagazine.com/2026/08/timing-charts-blueprint-smil-animations/>)

Author: hello@smashingmagazine.com (Johan Grobler)

Published: 2026-08-20T13:00:00Z

Content type: tutorial

Language: en

Sources: [Articles on Smashing Magazine -- For Web Designers And Developers](<https://devfeed.tech/sources/articles-on-smashing-magazine-for-web-designers-and-developers.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [SVG animations in CSS](<https://devfeed.tech/topics/svg-animations-in-css.md>), [frontend animation](<https://devfeed.tech/topics/frontend-animation.md>), [web animation](<https://devfeed.tech/topics/web-animation.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [article](<https://devfeed.tech/tags/article.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [design](<https://devfeed.tech/tags/design.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

This article explains SMIL as a way to animate SVG graphics without JavaScript. It introduces timing charts as a planning tool for coordinating animation start and stop times, and discusses how structured planning can make verbose SMIL markup easier to manage.

## Source excerpt

Discover SMIL, the often-overlooked way to animate SVGs that works inside `` tags and can fully animate everything in an SVG without JavaScript.