HTML Academy
No Fill
Designing SVG Shapes4/20
Back to the list of tasks
  • 1. Fills
  • 2. Fill Opacity
  • 3. No Fill
  • 4. Challenge: Colorful Squares
  • 5. Strokes
  • 6. Stroke Width
  • 7. Stroke Opacity
  • 8. Challenge: Stroke Width and Transparency
  • 9. Line Ends
  • 10. Bend Type
  • 11. Challenge: Zigzags
  • 12. Dashed Lines, Part 1
  • 13. Dashed Lines, Part 2
  • 14. Challenge: Sunrise
  • 15. Life Saver, Part 1
  • 16. Life Saver, Part 2
  • 17. Life Saver, Part 3
  • 18. Life Saver, Part 4
  • 19. Stroke Offset
  • 20. Challenge: Lollypop
Strokes
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • object.svg
  • style.css
SVG
<svg width="290" height="290"> <rect class="rect-1" width="42.5%" height="42.5%" x="5%" y="5%"></rect> <rect class="rect-2" width="42.5%" height="42.5%" x="52.5%" y="5%"></rect> <rect class="rect-3" width="42.5%" height="42.5%" x="5%" y="52.5%"></rect> <rect class="rect-4" width="42.5%" height="42.5%" x="52.5%" y="52.5%"></rect> </svg>
CSS
/* Colors used: tomato, lightseagreen, #ffd700 */ svg { border: 1px solid #dddddd; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

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

VISAMastercard