An SVG’s Tale

on YouTube ↗31m

" summary

Claim: SVGs are text files with inline SVG as text that scale without quality loss, accept CSS/JS, and expose DOM nodes; two practical routes are convert SVG to JSX or import raw files. Built: an animated modal slideshow, a browser cassette that records via the Web Audio API, and a reusable kawaii illustration system exported to npm. Tools: Sketch exports, inlining/JSX conversion, and React state to drive animations. Demos record audio, animate paths, and the componentized library speeds content-team workflows.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 2:14Chapters
3. 3:19Why is the SVG different?
4. 3:52Different
5. 4:49SVG Meets React
6. 5:34Import as React Component
7. 6:42Transform into
8. 15:17Cassette Tape Demo
9. 19:46Face Component
10. 21:45React Kawaii Demo

" related talks

• 25mAn SVG’s TaleElizabet Oliveira · React Amsterdam 2019
• 23mAn SVG’s TaleElizabet Oliveira | ReactConfAM19 · React Conf Armenia 2019
• 21mSVG illustrations as React ComponentsElizabet Oliveira · React Conf 2018
• 27mExploring audio with React and SVGs: Create amazing audio projectsElizabet Oliveira · React Day Berlin 2019
• 36mCreative Coding with React & SVGVarun Vachhar · FITC Toronto 2016
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 25mScalable Vue Graphics for the Modern WebDima Vishnevetsky · Vue.js Amsterdam 2020
• 24mSVGs to Make Your Blog Stand OutElizabet Oliveira · React Summit Remote Edition 2021