Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Dec 29, 2019

Created on Dec 29, 2019

This example demonstrates how to draw basic geometric shapes with SVG and style them using CSS. It uses raw SVG elements like `circle`, `rect`, `line`, and `path` within a `<g>` container, with CSS classes controlling stroke and fill properties. The code shows shape attributes set inline (e.g., `fill`, `stroke-width`) and via a stylesheet, including a group with translated coordinates and another with a rounded path. No JavaScript or external libraries are involved; the visualization relies entirely on static SVG markup and a linked `styles.css` file.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, including circles, rectangles, lines, and paths, with styling applied through CSS. The visualization uses SVG's native `circle`, `rect`, `line`, and `path` tags within a `<g>` group, leveraging the `transform` attribute for scaling and translation. The CSS stylesheet applies stroke properties to a `.lines` class, setting the line color, width, and path join style, while the SVG `fill` and `stroke` attributes control shape colors directly.

Ppkcesar

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, and a line—arranged within an SVG canvas. It shows how SVG elements can be styled directly via attributes like `fill`, `stroke`, and `stroke-width`, and how a grouping element `<g>` applies these styles collectively to its children. The rendering relies on raw SVG markup embedded in an HTML page, with a linked CSS stylesheet controlling page layout and overflow. The code uses core SVG APIs for drawing, without additional JavaScript libraries or data sources.

VVivian Peng

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG within an HTML page. The shapes are styled through inline presentation attributes and a linked external CSS stylesheet, with the `<g>` element grouping related shapes for coordinated transformations and styling. The code applies scaling and translation transforms to reposition groups, and uses CSS classes such as `.lines` to set stroke properties on line and path elements. The visualization relies on standard SVG elements and CSS rules, without any JavaScript libraries or data sources.

MMauradion

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS and inline attributes. It shows how presentational properties like `fill`, `stroke`, and `stroke-width` can be set directly on SVG elements or inherited from a parent `<g>` group. The code uses plain React-rendered SVG without additional libraries, featuring a static composition of colored and outlined shapes. CSS resets the page margin and hides overflow, while styles are applied via an external stylesheet. The visualization highlights fundamental SVG syntax, including coordinate attributes and the `<path>` `d` command.

Aant999

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and styled entirely through CSS. It shows how SVG elements inherit presentation attributes like `fill` and `stroke` from parent groups and stylesheets, with a nested `g` element applying blue fills and black strokes. The code uses raw SVG markup inside an HTML file, with a separate stylesheet defining stroke widths and colors for the path elements. The rendering approach is pure SVG, with no JavaScript or external libraries involved.

Llukastieber

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled using CSS. It shows how SVG elements can inherit styling from parent `<g>` groups and how CSS classes like `.lines` apply stroke properties. The code uses raw SVG markup with React as the rendering framework, featuring inline `fill` and `stroke` attributes alongside CSS rules. A transform group scales and translates the shapes, while a path with `stroke-linejoin: round` illustrates geometric line styling. The visualization highlights the interplay between SVG presentation attributes and external stylesheet rules.

Rratschke

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements with CSS styling. It shows how presentation attributes like `fill` and `stroke` can be set either directly on elements, grouped in a `<g>` tag, or via CSS classes such as `.lines`. The code uses raw SVG markup within a React application, applying transforms for scaling and translation. The styling approach highlights CSS’s role in controlling stroke width, line joins, and colors, while the SVG namespace handles the coordinate-based drawing.

KKarol Paks

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles and rectangles—using SVG elements styled directly and through CSS classes. It shows how fill colors, stroke properties, and transforms can be defined inline or via a stylesheet to control appearance. The code uses raw SVG markup within an HTML document, leveraging the `circle`, `rect`, `line`, and `path` APIs, with CSS rules in `style.css` applying stroke styling to a group of lines.

Yyuanwanttoeat

95% match