This application renders a few triangle svgs which have some very basic css animations and click events. Below are the resources I used during the morning workshop at DevMountain on 2/26/18.

• CSS Shapes

• SVG Shapes/elements

• SVG path element

• SVG to JSX online converter

• VS Code extension to strip svgs of unnecessary code

• SVG line animation using stroke-dasharray

• Animated buttom example

• Creative Coding with React & SVG (this is the video I followed to make the animated triangles. It is super cool and easy to follow.)

• Sarah Drasner's Huggy Laser Panda Factory Codepen

• Popular Third-party libraries used to help with animating SVGs

  • GreenSock
  • MoJS
  • Snap.svg

• Emily's repo

• What are SVGs, and why are they cool?
  • Small file size compared to images like .jpg and .png
  • You can access and manipulate/animate all the individual pieces (xml)
    • This also means you can be very precise with click events
• Show some elaborate examples to get students excited before starting with basics
  • Sarah Drasner’s codepens
  • MoJS examples
• Show css shapes vs svg shapes
• Talk about the path element
• Show how React works well with svgs
  • Beware of jsx syntax differences
  • Build triangle example using components
  • Other scenes from Creative Coding with React & SVG video
• Show animation using css and click events
  • Triangle example
• Talk about stroke-dasharray and stroke-dashoffset
  • SVG line animation resource (css-tricks article)
  • Codepen button example
• Introduce Emily’s repo
  • Talk about how she really used state to help with her animations
  • Mention requestAnimationFrame()
  • Mention that there are third party libraries Mo.js, snap.svg, greensock to help with animating svgs