Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Sep 6, 2019

Created on Sep 6, 2019

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using CSS for styling and the SVG `transform` attribute for scaling and translation. It shows how CSS classes like `.lines` define stroke properties and how inline attributes such as `fill` and `stroke` affect individual elements. The rendering uses raw SVG in HTML with a `<g>` group to apply coordinated transformations, and the included stylesheet controls global layout and path-specific presentation. The code relies solely on native SVG and CSS, with no external libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and polylines—with SVG and style them using CSS. The code uses the SVG API directly in an HTML file, applying attributes like `fill`, `stroke`, and `stroke-width` both inline and through a linked stylesheet. A `transform` groups shapes for scaling and translation, while the `.lines` class controls the stroke appearance of the line and path elements. The rendering is entirely SVG-based, with no JavaScript libraries involved.

EEric Torres

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic SVG shapes—circles, rectangles, lines, and a path—inside a single `<svg>` element. The code uses plain SVG markup and CSS to control visual properties, such as setting fill colors, stroke widths, and stroke line joins. CSS classes like `.lines` apply styling to groups of shapes, while inline attributes and nested `<g>` transforms position and scale the elements. The rendering is purely static, with no data binding or interaction, showcasing direct SVG and CSS coordination.

MMelina

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS to show how to create static vector graphics. It uses raw SVG elements within an HTML document, with the `g` element grouping shapes for combined transforms and the `lines` class applying stroke properties. A `transform="scale(1.5)"` enlarges the entire drawing, while individual fill colors and stroke widths are set directly on elements. The code relies solely on native SVG and CSS, with no external libraries, and renders shapes from hardcoded coordinate data in the markup.

Mmgermaine93

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling applied through both inline attributes and external CSS. It shows how circles, rectangles, lines, and a path can be combined and transformed using SVG’s `transform` attribute, including scaling and translation. The code uses plain SVG markup and CSS selectors, such as the `.lines` class, to control stroke properties like color and width. The HTML file includes the SVG directly, with no JavaScript libraries or data sources involved.

GGray1011

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, and lines—using inline SVG markup combined with an external CSS stylesheet. It shows the application of presentation attributes like `fill`, `stroke`, and `stroke-width` directly on SVG elements, as well as the use of the `<g>` element to group shapes and apply a unified `transform` and style properties to them collectively. The rendering relies entirely on the browser's native SVG support, with no JavaScript libraries involved.

Mmorjyooo

93% match