zuubaDigital

Intro

What you'll learn:

the elements and syntax of an SVG
how to create svgs using free drawing tools like Figma
how to create svg graphics dynamically using JavaScript
Styling SVGs using presentation attributes and CSS
How to make SVGs interactive
How to animate SVGs

Prerequisites

HTML

A basic understanding of html, and the fundamental elements of an html page.

CSS

How to create and apply basic CSS styles

Javascript

A fundamental understanding of variables, functions, and event listeners.

Tools

A Code Editor like Visual Studio Code or Atom.
A drawing program capable of exporting files in the SVG format, like Figma

Code

Most pages will contain code snippets and a link to a codepen page that you can use to "code along" with the provided examples.

SVG sample

<svg width="362" height="362" viewBox="0 0 362 362" fill="none">
  <circle cx="181" cy="181" r="181" fill="#F3C729" />
  <circle cx="118.5" cy="140.5" r="12.5" fill="black" />
  <circle cx="243.5" cy="140.5" r="12.5" fill="black" />
  <path
    d="M80 224C121 271 241 276 291 224"
    stroke="black"
    stroke-width="13"
    stroke-linecap="round"
  />
</svg>

And here's a link to a blank codepen page.

Feel free to copy and paste the provided code snippets into the codepen so that you can experiment directly with the code. It's the best way to learn!

Next: So, what's an SVG? >