Skip to main content
100%

Shapes with SVG and CSS

✓ Published0🌍 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.

MIT Licensed

Similar vizzes