🌍 Public
Viewing a saved revision (read-only)
712457b005154321a4c730a0698f7964
Shapes with SVG and CSS
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 descriptionAn example including some commonly used features of SVG.