Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published2🌍 Public

Last edited Mar 23, 2020

Created on Mar 23, 2020

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on an HTML page with CSS styling. It shows how SVG presentation attributes like `fill`, `stroke`, and `stroke-width` combine with CSS classes (such as `.lines`) to control appearance, including a yellow path with rounded joins. The code uses raw SVG elements within a `<g>` group with transforms for scaling and translation, applying inline attributes for color and stroke styling. No external JavaScript libraries are used; the visualization relies solely on static SVG markup and linked `styles.css`.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline SVG attributes and an external CSS stylesheet. It shows how presentational properties like fill, stroke, and stroke-width can be set directly on elements or inherited from parent `<g>` groups and CSS classes. The visualization uses React to render the SVG elements within an HTML page, with the `.lines` class applying green strokes and rounded line joins to paths, while a group transform scales and translates the shapes.

Jjcksnm

94% 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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through CSS. The code uses raw SVG elements within an HTML page, applying inline attributes for positioning and fill colors, while external CSS rules control stroke properties and line joins. A transform scales the entire group and translates a sub-group, showing how SVG transformations compose. No JavaScript library is used; the rendering relies solely on SVG and CSS.

NNkwachi Abel

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered within a single SVG element. It shows how inline presentation attributes coexist with external CSS rules, where the `.lines` class applies stroke styling to grouped elements while individual shapes use inline `fill` and `stroke` values. The SVG uses transform groups to scale, translate, and reposition shapes, with colors and stroke widths controlling visual hierarchy. The page is a plain HTML file with a linked stylesheet, using no JavaScript libraries, relying purely on SVG’s declarative markup and CSS for styling.

Jjugsomilk

94% 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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS rules. The code uses raw SVG elements within an HTML page, with a React starter context, and applies CSS selectors like `.lines` and `.lines path` to control stroke color, width, and line joins. A grouping element with translate and fill/stroke attributes shows inherited styling, while a scale transform enlarges the entire visualization. The rendering relies entirely on SVG markup and CSS, with no data or JavaScript logic involved.

JJordan Chiu

94% match

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS classes and inline attributes. It shows how SVG elements can be grouped, transformed (scaled and translated), and filled with colors or strokes. The code uses raw SVG markup within an HTML page, with CSS rules in `styles.css` controlling properties like stroke width, color, and line joins. No JavaScript libraries are involved; rendering relies entirely on the browser's native SVG support.

Pp4pravin

93% match