Skip to main content
100%

Shapes with SVG and CSS

✓ Published0🌍 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
MIT Licensed

Similar vizzes