In this exercise, you will create a simple SVG graphic with at least four attributes. Then you will optimize it and animate at least two elements. After the exercise, Sarah shares a few tips for inclining SVG elements.
(flute music)…- I'm gonna give you guys a simple exercise.…Just make a simple SVG with four plus attributes,…optimize it, and animate at least two elements…You can hand write the code for the SVG…with what you've learned about path data.…Or you can use any of these tools…and use an optimizer.…If you're hand writing your code,…you probably don't need an optimizer,…but if you're using any of these tools,…and I think Inkscape is free,…so if you don't have the others,…then you can just use that really quick.…
- [Male Student] What's the best way to get it,…sharing it probably CodePen?…- Yeah, yeah, CodePen is a good way.…- [Male Student] Yeah, when you get the solution,…or whatever, when you get your first SVG created,…share the link on CodePen- - Yeah, that would be great.…- [Male Student] In chat room.…- Yeah, I think CodePen is probably the easiest way.…Cool.…One of the questions that came up…that was pretty indicative of something…that when you're first working,…is when you're first moving it into…the inline styles, you might notice that it's too big…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values