An SVG’s Tale

on YouTube ↗25m

" summary

Shows concrete techniques: import as React component or transform SVG into JSX, exported from Sketch, then animated with react-pose or Popmotion; builds a modal slideshow with animated SVG borders (state-driven left/right poses), a cassette-tape app that records audio in-browser and plays/records successfully, and a reusable react-kawaii component library published to npm for size/color/mood props. Mentions code-sandbox demos, inline SVG tradeoffs (no HTTP requests) and maintenance costs when splitting into JSX parts.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 1:48Chapters
3. 2:30Why is the SVG different?
4. 4:30SVG Meets React
5. 5:21Import as React Component
6. 6:46Transform into
7. 20:42Face Component

" related talks

• 23mAn SVG’s TaleElizabet Oliveira | ReactConfAM19 · React Conf Armenia 2019
• 31mAn SVG’s TaleElizabet Oliveira · <React.NotAConf /> 2019
• 21mSVG illustrations as React ComponentsElizabet Oliveira · React Conf 2018
• 36mCreative Coding with React & SVGVarun Vachhar · FITC Toronto 2016
• 27mExploring audio with React and SVGs: Create amazing audio projectsElizabet Oliveira · React Day Berlin 2019
• 24mSVGs to Make Your Blog Stand OutElizabet Oliveira · React Summit Remote Edition 2021
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 31mAnimating SVGsZell Liew · CSSConf.Asia 2015