HTML Academy
  • HTML Academy
  • Courses
  • Tutorials
  • Courses
  • Tutorials
  • Sign up
  • Log in
  • Home
  • Interactive courses
  • SVG basics
  1. An Introduction to SVG 0/15
  2. Designing SVG Shapes 0/20
  3. Dimensions in SVG 0/15

Chapter 2: Designing SVG Shapes

15 tasks, 5 challenges

Basic concepts about how to design SVG shapes. Overview of fills and strokes.

Start
1. Fills Task
2. Fill Opacity Task
3. No Fill Task
4. Challenge: Colorful Squares Challenge
5. Strokes Task
6. Stroke Width Task
7. Stroke Opacity Task
8. Challenge: Stroke Width and Transparency Challenge
9. Line Ends Task
10. Bend Type Task
11. Challenge: Zigzags Challenge
12. Dashed Lines, Part 1 Task
13. Dashed Lines, Part 2 Task
14. Challenge: Sunrise Challenge
15. Life Saver, Part 1 Task
16. Life Saver, Part 2 Task
17. Life Saver, Part 3 Task
18. Life Saver, Part 4 Task
19. Stroke Offset Task
20. Challenge: Lollypop Challenge

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.

We are using cookies to gather information which will help you use our website most effectively. You can read about this here or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.