10 min read

SVG , Animation , Design , CSS

SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.

I explained recently how I use <symbol> , <use> , and CSS Media Queries to develop what I call adaptive SVGs . Symbols let us define an element once and then use it again and again, making SVG animations easier to maintain, more efficient, and lightweight.

Since I wrote that explanation, I’ve designed and implemented new Magnificent 7 animated graphics across my website . They play on the web design pioneer theme, featuring seven magnificent Old West characters.

View this animated SVG on my website . ( Large preview )

<symbol> and <use> let me define a character design and reuse it across multiple SVGs and pages.…