Making the web more whimsical

with SVG

@cassiecodes

https://smashingconf.com/sf-2020

⚠️ motion warning ⚠️

https://thebirdwebsite.com

https://vboringwebsite.org

https://superboringwebsite.org

Artboard 152

https://thebirdwebsite.com

http://www.neopets.com/

https://makefrontendshitagain.party

https://geocities.restorativland.org

completed it m8

Artboard 152

https://cassie.codes

When a site is done with care and excitement you can tell. You feel it as you visit, the hum of intention. 

- Sarah Drasner

Engagement metrics

are just as important as Lighthouse metrics

🤔 What is SVG? 🤔

😎 Scalable Vector Graphic 😎

Simplified SVG markup.

<svg viewBox="0 0 100 100">
  <path d="M10 10H90V90H10Z"/>
  <circle cx="50" cy="50" r="40"/>
</svg>

SVG is an alternate universe version of HTML, focused on graphics instead of documents.

- Richard Westenra

🙌 Illustrations... 🙌

that you can manipulate with code!

https://codepen.io/cassie-codes/pen/ZjErdL

<html lang="en">

 <head>
  <title>Inline SVG</title>
 </head>

 <body>
  ...
 
   <svg viewBox="0 0 100 100">
     <path d="M10 10H90V90H10Z"/>
     <circle cx="50" cy="50" r="40"/>
   </svg>
   
 </body>   
</html>

SVG markup inside HTML

lovely semantic elements

https://css-tricks.com/

https://codepen.io/dsenneff

https://codepen.io/cassie-codes/full/XvKmWV

https://codepen.io/petebarr/full/LkLpYq

https://solar.clearleft.com/

https://codepen.io/aaroniker/full/ZEYmPqM

 

  • Supportive forums
  • SVG specific plugins

https://greensock.com/

https://codepen.io/GreenSock/

https://codepen.io/cassie-codes

https://smashingconf.com/sf-2020/workshops

Thank you for listening!

@cassiecodes - twitter & codepen

Smashing SF

By Cassie Evans

Smashing SF

  • 2,469

More from Cassie Evans