3 of the best SVG animation tutorials

Forget about those rusty old Flash skills; animation is swiftly becoming a key element in the frontend developer's toolkit, and if you don't want to be left behind then you're going to need to get to grips with SVG.

Sarah Drasner will be at Generate San Francisco on 15 July, where she'll be demonstrating how to create intricate SVG animations, from the basics of vector manipulation through to advanced tricks such as using morphing path data to imitate candle smoke, and combining techniques to create otherworldly effects.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Jim McCauley

Jim McCauley is a writer, performer and cat-wrangler who started writing professionally way back in 1995 on PC Format magazine, and has been covering technology-related subjects ever since, whether it's hardware, software or videogames. A chance call in 2005 led to Jim taking charge of Computer Arts' website and developing an interest in the world of graphic design, and eventually led to a move over to the freshly-launched Creative Bloq in 2012. Jim now works as a freelance writer for sites including Creative Bloq, T3 and PetsRadar, specialising in design, technology, wellness and cats, while doing the occasional pantomime and street performance in Bath and designing posters for a local drama group on the side.

Latest in Web Design
A screenshot of the new YouTube UI
Yes, YouTube has a new UI. Yes, it's terrible
Adobe XD logo
It seems Adobe's given up on UI design (for now)
Adobe Muse
Why Adobe is frustrating web designers
Dropbox Relay interface with photo of man running
How Dropbox Replay is helping designers future-proof their practice
UX revolution
From 2D to 3D: How brands can harness the latest UX/UI revolution
Personal portfolio of Julie Bonnemoy with a retro vibe
From AI to no-code: The top web design trends for 2024 according to Designmodo
Latest in Advice
Light and Shadow Linking are perfect for developing the look of your images like Manu Järvinen’s cat model (CC0)
Give your Blender scenes more life by mastering the Light Linking feature
How to use Cinema 4D files in Atlux tutorial main image
How to seamlessly integrate Cinema 4D files into Unreal Engine
Main image for Poly modeling with an iPad tutorial
How to get started in 3D modelling on iPad to create video game assets and 3D art
Book cover designs
14 pro tips for creating eye-catching book cover design
Pietro Chiovaro Blender T-shirt tutorial
How to make a T-shirt in Blender
Paul Hatton KeyShot tutorial
Follow my KeyShot and Photoshop advice for perfect renders every time