Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 18, 2020

Created on Jan 18, 2020

This example displays basic geometric shapes—circles, rectangles, a line, and a path—drawn with SVG and styled through CSS. It shows how shape properties like fill color, stroke width, and stroke color can be set either as inline attributes or via classes in an external stylesheet. The code uses native SVG elements within an HTML file, with a CSS stylesheet defining the `.lines` class for styling. The rendering is purely static, with no JavaScript libraries, data sources, or interaction.

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 a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

96% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Sshis1011

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

96% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, rectangles, a line, and a path—all rendered inside a single SVG canvas. It demonstrates how CSS classes control vector styling, such as setting the stroke color, width, and line-join for the line and path elements, while inline attributes like `fill` and `transform` handle shape-specific properties and scaling. The code uses raw SVG elements and a linked stylesheet, with no external JavaScript libraries.

Ffbudwill

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shape elements—circles, rectangles, lines, and paths—composed in a static graphic. The markup defines primitive shapes with attributes like position, size, and fill, while CSS classes apply stroke and line-join styling to grouped elements. The rendering relies entirely on SVG within the HTML, with a stylesheet controlling presentation details such as stroke width and color for specific groups. It serves as a basic introduction to combining inline SVG with external CSS for shape styling and layout.

Ccarbuncle-3djs

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using static HTML and CSS. The SVG canvas is scaled down with a transform, while individual elements are positioned and colored through direct attributes like `fill` and `stroke`, or via CSS classes such as `.lines` that set stroke properties. The code uses plain SVG markup and CSS rules, with no JavaScript libraries, to show shape composition and styling.

Ddrewbt

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

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

95% match