Sarah is an award-winning Manager of UX Design & Engineering at Trulia and staff writer at CSS-Tricks. She’s given a Frontend Masters workshop on Advanced SVG Animations, and is working for a book for O’Reilly on SVG Animations. She has worked for 15 years as a web developer and designer, and at points worked as a Scientific Illustrator and a Undergraduate Professor, and has tutored a Byzantine Icon painter in Santorini. Sarah has also taught a literacy program for the Cartoon Art Museum in San Francisco.
By now most Front-End Developers know the benefits of working with SVG: great support, resolution, and scalable images that can reduce the needs for multiple HTTP requests and be easily scaled to multiple viewports. But SVGs are capable of so much more.
In this session, we’ll manipulate vectors with a myriad of creative techniques, ranging from the practical, such as data visualization with React, to the delicate, such as imitating candle smoke with morphing path data. We'll go over how to increase engagement and performance with examples and case studies. We’ll use SVGs as a window with clipPath, push the boundaries of the CPU with filters, and even combine techniques to create otherworldly effects.