Overview
Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Discover how to animate an SVG cat using React.js in this 27-minute conference talk from React Live 2019. Learn about SVG fundamentals, including its definition, unique characteristics, and file size advantages. Explore different methods of incorporating SVGs into React components, including direct imports and the use of Sketch. Gain insights into shading techniques, configuration files, aspect ratio considerations, and the implementation of Frame Emotion and Motion libraries for creating captivating animations. Presented by Elizabet Oliveira, this talk offers practical knowledge for developers looking to enhance their React projects with engaging SVG animations.
Syllabus
Intro
About Elizabet
What is an SVG
Wikipedia definition
Why is SVG different
SVG file size
How to use the SVG
Why would you do this
Importing React components
Inspecting SVG
Importing as React components
The bad thing about this method
The second way
Sketch
Shading
Config file
Aspect ratio
Frame Emotion
Motion
Taught by
JSWORLD Conference