Shapes with CSS + SVG

100%

Shapes with CSS + SVG

✓ Published1🌍 Public

Last edited Jan 2, 2021

Created on Jan 2, 2021

This example demonstrates basic geometric shapes rendered with SVG, comparing their default styling, explicit fill attributes, and inherited presentation properties. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path` within a `<g>` container that applies a scale and translation transformation. CSS, via `styles.css`, defines a monospaced body font and strokes for the line group, including a rounded line join on the path. The code shows how shape attributes and CSS rules interact to control color, stroke width, and the overall visual appearance.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Ppengyugatech

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG scene with inline styling and cascading style sheets. The visualization shows how SVG primitives combine with CSS classes to control appearance, such as setting fill colors, stroke widths, and line joins. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with transformations applied via the SVG `transform` attribute. CSS rules in `styles.css` style the `.lines` group and its path, demonstrating separation of structure and presentation.

SShawn Kearney

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Hhugomell

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements and style them with CSS. It shows circles and rectangles with both fill colors applied directly as attributes and groups of shapes where the fill is inherited from an enclosing `<g>` element. The visualization also illustrates how to draw lines and paths, with the line stroke properties defined in a stylesheet. The rendering uses raw SVG markup within an HTML page, with CSS selectors targeting the `.lines` class to apply stroke color and width.

CChristopher A. Pfeifer

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shape elements are styled using both presentation attributes and CSS. It shows circles, rectangles, lines, and a path, with solid colors, strokes, and transforms applied. The code uses vanilla SVG markup with CSS rules from an external stylesheet, including a `.lines` class to set stroke properties. A `<g>` element applies `fill`, `stroke`, and `stroke-width` as inherited attributes, while another group uses a `translate` transform. The example highlights how CSS and SVG attributes interact to control visual appearance.

PPourmahmood

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

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

94% match