Skip to main content
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
SShinCai
Last edited Aug 15, 2019
Created on Aug 15, 2019

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS. It shows circles and rectangles with explicit `fill` colors, and a group that inherits a fill and stroke from its parent, while individual shapes override these properties with their own attributes. The `.lines` class applies stroke styling to line and path elements, with the path taking its own color and stroke-linejoin settings. The graphic uses SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` inside a `<g>` container with transforms for scaling and translation.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes