Skip to main content
Explore
Solutions
Bespoke Studio
Pricing
Quick Start
Demo
Log in
Send feedback
✕
Tell us what works and what could be better. We read every submission.
Send feedback
✕
Tell us what works and what could be better. We read every submission.
Home
•
Fork Viz
Fork Viz
Create your own copy of this visualization.
Forking from
Shapes and Colors with SVG and CSS
Title
*
Description
This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline attributes and CSS. It shows how fill colors, stroke widths, transforms like scaling and translation, and grouped elements control appearance. The code uses plain SVG elements within an HTML document, with a linked stylesheet defining classes for stroke properties. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support and CSS rules.
Visibility
Public
Private (only you), Pro
Unlisted (anyone with link)
Private work requires Pro.
Upgrade
Cancel
Fork Viz