Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published2🌍 Public

Last edited Aug 15, 2019

Created on Aug 15, 2019

This example demonstrates how to construct geometric shapes—circles, rectangles, lines, and paths—using raw SVG elements and style them through CSS. It shows shape customization via inline attributes, such as fill colors and stroke widths, alongside CSS classes that apply shared stroke properties and a fill override for a specific group. The SVG is scaled using a transform, and elements are organized with nested groups and translations. The rendering relies on standard SVG markup and the stylesheet’s `stroke` and `stroke-linejoin` properties, with no external JavaScript libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956

93% match

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be drawn and styled using SVG elements and CSS. It shows shapes with default black fills, explicit color fills, grouped shapes with shared stroke and fill attributes, and a separate class for lines and paths that applies stroke styling via CSS rules. The code uses plain SVG markup within an HTML page, with a linked stylesheet for class-based styling, and includes an ES6 module exporting a message.

YYF

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements—circles, rectangles, lines, and a path—with styling applied via CSS. It shows how SVG primitives inherit properties like fill and stroke from parent groups and CSS classes, using inline attributes and external stylesheet rules. The code uses raw SVG markup without any JavaScript libraries, relying on the browser’s native SVG rendering. Shapes are positioned through explicit coordinates and transformed with scale and translate operations, while strokes and fills are defined per element or inherited from group containers.

Tthebeef5

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling. It shows circles, rectangles, lines, and paths arranged within a scaled and translated group, with some shapes inheriting fill colors from their parent groups and others styled directly through CSS classes. The HTML embeds the SVG directly, while the linked stylesheet defines stroke properties for line elements using class selectors. The code uses standard SVG elements and CSS selectors to control visual attributes like fill, stroke, and stroke-width, with no external JavaScript libraries involved.

Mmuxiaofan

92% match