What you'll learn:
- the elements and syntax of an SVG
- 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 VS Code, Atom, Sublime Text, or even a simple text editor.
- A drawing program capable of exporting files in the SVG format, like Figma
Note:
Most pages will contain code snippets and a link to a codepen page that you can use to "code along" with the provided examples.
Here's an example of a code snippet:
1
2
3
4
5
6
7
8
9
10
11
<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>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!