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)

4123599d50504cf2a78ff57bd903c01e

Shapes with SVG and CSS

0 stars0🌍 Public
Ssrrajendran
Last edited Nov 7, 2018
Created on Sep 12, 2018

This example demonstrates how SVG shapes like circles, rectangles, lines, and paths can be styled using both inline attributes and external CSS. It shows a small grid of geometric forms where color, stroke, and transparency are controlled through presentation attributes—such as `fill` and `stroke-width`—and a `.lines` class with custom properties. The SVG is scaled via a `transform` attribute, and CSS rules define the body layout. The visualization uses raw SVG markup and a linked stylesheet, with no additional JavaScript libraries.

AI-generated description

An example including some commonly used features of SVG.