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)

bc36aa96997e4251819ae65a70000452

Shapes with SVG and CSS

0 stars0🌍 Public
Ccpsshan
Last edited Jul 12, 2019
Created on Jul 11, 2019
Forked from Hello VizHub

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using Cascading Style Sheets (CSS) alongside inline attributes. The visualization shows a scaled grouping of primitives, with some shapes inheriting fill and stroke properties from parent `<g>` elements, while others specify these directly. The code imports the `select` function from D3.js to update a message div, and uses SVG’s `transform` attribute for scaling and translation. CSS classes like `.line` apply stroke styling and path-specific properties, such as `stroke-linejoin`, to the rendered vector graphics.

AI-generated description