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)

fba21aeacff9473aa47eef709d3f7803

Shapes with SVG and CSS

0 stars0🌍 Public
EEugenia Kim
Last edited Aug 26, 2020
Created on Aug 26, 2020

This example demonstrates basic SVG shape creation and styling using raw SVG elements (circle and rect) combined with CSS. The visualization renders two rows of shapes inside a single SVG container, with the first row showing default black shapes and the second row introducing fill colors and CSS class-based highlighting. The code uses inline SVG attributes like cx, cy, r, width, height, x, and y, along with a g transform to reposition the entire second group. A linked stylesheet applies global resets and a red text highlight class, though no data is loaded—the shapes are hardcoded directly in the HTML.

AI-generated description

An example including some commonly used features of SVG.