Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG amd CSS

Public visualization

Viewing a saved revision (read-only)

7605ab507ccb4540b1ac457ece1b2328

Shapes with SVG amd CSS

0 stars0🌍 Public
Ttgma99
Last edited Jun 5, 2022
Created on Jun 2, 2022
Forked from HTML Starter

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 canvas. The code uses raw SVG elements within an HTML page, with CSS in a separate stylesheet controlling presentation, such as red strokes for line groups and blue strokes for path elements. Grouping via the `<g>` tag applies shared transformations like scaling and translation, while CSS classes like `.lines` style these grouped elements. The rendering relies entirely on inline SVG markup and CSS rules, without any JavaScript interaction or data binding.

AI-generated description

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

See also React Starter.