Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

e1651c6532a7423ea8c8de5970a3e5d8

Shapes with SVG and CSS

0 stars0🌍 Public
TTsing
Last edited Nov 11, 2019
Created on Nov 11, 2019
Forked from HTML Cars Report

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and a path—and style them using CSS. It shows a static composition of simple geometric primitives, with a group of shapes transformed and recolored, and a separate group of lines with rounded joins given a distinct stroke color via CSS classes. The SVG is rendered inline in HTML with a 960×500 viewport, and CSS rules in an external stylesheet control stroke and fill properties. No JavaScript libraries are used, only native SVG elements and CSS styling.

AI-generated description

An example showing the capabilities of VizHub.