Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes and Colors with SVG and CSS

Public visualization

Shapes and Colors with SVG and CSS

0 stars2🌍 Public
Ccatsugly66
Last edited Nov 22, 2019
Created on Nov 22, 2019

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—using both inline presentation attributes and CSS classes to control fill and stroke styles. It shows how group elements (`<g>`) apply shared transformations and styles, such as a `translate` offset and a unified fill color, while individual elements override these with explicit `fill`, `stroke`, and `stroke-width` values. The CSS rules target the `.lines` group to set black strokes for lines and a teal color with rounded joins and caps for the path. The code uses plain SVG markup within an HTML document, with the stylesheet defining properties like `overflow: hidden` on the body.

AI-generated description

An example including some commonly used features of SVG.

Comments

Sign in to join the discussion.

MIT Licensed