Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Oct 2, 2022

Created on Oct 2, 2022

This example demonstrates the use of inline SVG shapes—circles, rectangles, lines, and paths—to build a static composition with varying fills, strokes, and transformations. It shows how SVG presentation attributes define the base appearance, while CSS rules in an external stylesheet override styling for grouped elements, such as setting a black stroke and round line joins on the path. The entire canvas is wrapped in a scaling <g> element, and an additional translation group repositions a set of shapes. The rendering relies entirely on native SVG markup and CSS, without any external JavaScript libraries or data sources.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to compose basic SVG shapes—circles, rectangles, lines, and paths—within a grouped, scaled canvas. It demonstrates applying both inline attributes and CSS classes to control fill, stroke, and stroke-width, with different styling for inherited properties versus explicit overrides. The code uses raw SVG elements and external CSS, with no JavaScript or D3 APIs, relying on the `g` transform to scale and translate the shapes. The rendering is purely static SVG, illustrating simple declarative vector graphics.

Wwindsoftheo

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and lines—stylized through both inline attributes and external CSS rules. The shapes are rendered with SVG elements within a 960×500 canvas, using explicit fill colors, stroke widths, and a transform scale applied to the entire group. A secondary group applies CSS classes to define stroke and path styling, while inline attributes handle direct color assignments. The code loads via standard HTML and links to a separate stylesheet, showcasing how SVG and CSS interact for visual customization.

JJordan Arnold

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered together in a single canvas. It shows how CSS classes control stroke and fill properties for groups and individual elements. The code uses raw SVG markup with inline attributes like `fill`, `stroke`, and `transform`, while styling comes from an external stylesheet. It includes static shapes without animation, highlighting how SVG’s `<g>` grouping and `translate` and `scale` transforms arrange geometry spatially.

Ddmcgown3

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a static composition of circles, rectangles, lines, and paths. The visualization uses the SVG API directly, with elements like `<circle>`, `<rect>`, `<line>`, and `<path>` arranged via grouping and transforms. Shapes inherit fill and stroke properties from parent `<g>` elements or from a CSS class, with one path using a rounded line join. All shapes are rendered as static vector graphics in an SVG container, with explicit coordinate positioning and no interactive or data-driven behavior.

Ffiona187412

92% match

Loading thumbnail…

Shapes with SVG and CSS

Ffiona187412

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be styled and positioned within an SVG canvas, using both inline presentation attributes and external CSS rules. It shows grouped elements under a `<g>` tag inheriting shared fill and stroke properties, while individual shapes override these with explicit `fill` colors. The code relies purely on native SVG elements and CSS (via a stylesheet defining a `.lines` class) without any JavaScript libraries. The rendering approach is static SVG, with shapes placed at fixed coordinates to illustrate foundational vector-graphics composition.

Mmkdeeps01

92% match