A few notes and ideas for talking about SVG animations to elementary school students—no one is too young to appreciate and get excited about this stuff while learning that it's a real career option later!
The goal for the speaking part of the presentation is to share a bit about what you do for work, introduce the basics of SVG and coding basic shapes, and talk about the impact of animations.
- Tell them about what you do day-to-day and how you got started
- What's your favorite part of the job?
- What was your favorite subject in school?
- A way of drawing shapes on a computer with code, which is a bunch of typed letter and numbers
- Show them some SVG code
- These are great because they never look blurry and hard to see, like some other types of pictures
- Can change the graphics and animations forever!
- Animations are moving things around on the screen
- Helpful in getting people's attention, helping them learn something, telling a story, and making sure the internet is fun
- Some animations are always playing, while some only start if you click on them with the mouse or place the mouse's arrow over them (which is called hover)
- Like the SVGs, the movements of animations are also made with code; we tell the computer what to do with the shapes and it follows our instructions
- My small collection of mostly basic shape SVG animations
- This one specifically was designed by a 7 year old, which they'll appreciate knowing
- Sarah Drasner's massive collection of more complex SVG animations
- I'd suggest choosing around 10 (school appropriate) demos to showcase to keep things quick and exciting
- The more demos you choose that rely on simpler shapes the better, to help make this feel as accessible and realistic as possible while more easily sparking inspiration
- Show the students how to change something in a demo, like fills and strokes, and let them take turns changing these colors and widths; this also provides an opportunity to talk a bit about naming and targeting certain shapes
- Have the students draw their own graphics and plan movements on paper, denoting click or hover and drawing arrows and lines to best communicate intentions
- Confirm ahead of time the students have access to paper and colored pencils and bring some if not 🖍
- Have volunteer students present their animation designs to the class
- Make sure you can bring your own computer to ensure most modern hardware and browser and confirm access to a larger screen for display purposes
- Consider bringing fun stickers and a snack (most schools are nut-free!) once you have confirmed with the teacher this is OK