Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shape with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

4a8287479b0d4894ac3181da7a40136b

Shape with SVG and CSS

0 stars0🌍 Public
JJL10897
Last edited Feb 14, 2022
Created on Feb 14, 2022

This example demonstrates how SVG shapes can be styled and transformed using CSS and JavaScript. The visualization shows a circle, a rectangle, and several lines and paths arranged on a 960-by-500 canvas. A group element applies a dark blue fill to two circles, while another group adds black strokes to the line and path. The code uses inline SVG attributes like `cx`, `cy`, `r`, and `transform`, paired with a CSS stylesheet that sets global margins and defines stroke properties for line elements. It serves as a minimal, static illustration of SVG markup within an HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.