Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published11🌍 Public

Last edited Jan 26, 2021

Created on Jan 26, 2021

This example shows how SVG shapes and CSS can be used to create a static composition of circles, rectangles, lines, and a path, with varied fill colors, stroke widths, and group transforms. The graphic renders directly in the browser via inline SVG markup within an HTML document, using the `<circle>`, `<rect>`, `<line>`, and `<path>` elements. CSS styles the `.lines` class to apply black strokes and a purple stroke to the path, while inline attributes control shape positions and fills. No JavaScript or external libraries are required, relying solely on native SVG and CSS styling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shape elements and CSS classes can be combined to create a static composition of circles, rectangles, lines, and paths. The SVG markup uses native elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with inline attributes for fill, stroke, and transforms like `scale` and `translate`. CSS rules in `styles.css` style the `.lines` group and its child paths, adding black strokes with a cyan stroke-linejoin on paths. No external JavaScript libraries are used; the visual is purely declarative, relying on browser-rendered SVG and linked stylesheet.

CChangbeom Shim

94% match

Loading thumbnail…

Shapes with SVG AND CSS

This example shows how to combine inline SVG shape elements with CSS styling to create a static composition of circles, rectangles, lines, and paths. The graphic renders a simple geometric scene with default black shapes, a colored group with red and green fills, a blue group with black strokes, and a separate line and path group. The code uses raw SVG markup with attributes like `transform`, `fill`, and `stroke`, while the CSS file styles the `.lines` class and its child path. All rendering is done through standard browser SVG support.

Rryankinsey1

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS, with some shapes grouped and scaled or translated. It shows how SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes such as `.lines` apply shared styling. The static composition uses raw SVG elements directly in HTML, without any JavaScript libraries, and relies on inline attributes and an external stylesheet for rendering.

Ccheeson

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and a path—and style them using CSS. It shows a static composition of simple geometric primitives, with a group of shapes transformed and recolored, and a separate group of lines with rounded joins given a distinct stroke color via CSS classes. The SVG is rendered inline in HTML with a 960×500 viewport, and CSS rules in an external stylesheet control stroke and fill properties. No JavaScript libraries are used, only native SVG elements and CSS styling.

TTsing

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com

92% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and paths. The code uses inline SVG elements within an HTML page, with a separate stylesheet applying stroke properties to line and path elements. Circle and rect elements are colored individually or grouped via the `fill` and `stroke` attributes, while a `transform` scales the entire graphic. The rendering is purely SVG-based, requiring no JavaScript libraries.

DDaniel Korosi

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes and CSS styling to create a static graphic. It shows circles, rectangles, a line, and a path, with some shapes inheriting presentation attributes like fill, stroke, and stroke-width from a group, while the line and path are styled through a CSS class. The SVG element has a scale transform applied, and the code uses native SVG elements and a linked stylesheet.

BBKirst3

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to construct a simple static SVG composition using only HTML and CSS, with no JavaScript. It shows how basic shapes—circles, rectangles, lines, and a path—are positioned and styled to create a graphic. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes for coordinates, fill colors, and stroke properties. CSS classes like `.lines` apply stroke width and line joins, while a `<g>` transform groups shapes and scales them. The rendering approach is pure SVG, with styling handled externally via `style.css`.

Rross-fisher

92% match