Creative Coding with React & SVG
summary
Claims that React & SVG let DOM composability meet Canvas/WebGL level control and shows exactly how: path strings are built from path data as JS arrays, animated via CSS or JS, and updated by React state rather than manual DOM fiddling. Demos include a pizza theorem demo with a slider for number of slices, a spring simulation using Hooke’s law where stiffness changes the generated bounce, and a click-to-random-color triangle built from a reusable component. A starter repo and open-source demos are provided and run as shown.
AI-written summary · about
chapters (20)
- 0:00Start
- 3:43P5 Js
- 6:13Svg Works Great with React
- 6:34React Supports Svg
- 7:34Svg Syntax
- 9:20Path Element
- 13:02Triangle Component
- 16:16Triangle Laser Pulse
- 17:40The Pizza Theorem
- 18:53Animations
- 20:16Animation Delay
- 20:40Staggered Effects
- 24:26Object Model versus Renderings
- 24:46What a Rendering Is
- 24:59Draw Loop
- 26:05Object Model
- 28:45Interactivity
- 29:16Handle Click
- 32:49Bootstrap the Application
- 34:38Starter Kit
