Overview
Developers today are exploring creative code to build something expressive and engaging. Traditionally this has been done with frameworks such as Processing and Cinder, and on the web, both Canvas and WebGL. While WebGL and Canvas provided you access to low level APIs, you lost the power of CSS animations and the composability of the DOM. Today the combination of React & SVG provides an elegant solution that bridges the gap between these two worlds. Gone are the days when the SVG’s cryptic syntax could only be deciphered by apps such as Illustrator or Sketch. Now you can dynamically generate animations with components and then wire them up to the application state and user interactions.
In this talk Varun will present some examples of what can be achieved, discuss performance aspects and show you practical applications to try.
Objective
Learn how to create interactive visuals with React & SVG.
Target Audience
Developers & designers interested in building 2D interactions and animations for the web.
Assumed Audience Knowledge
Basic knowledge of React. Intermediate understanding of JavaScript.
Five things audience members will learn
- SVG syntax
- Composing SVGs using React
- Adding interactivity
- Animating with a “re-render the whole world” approach
- How is this approach is different from the others
