Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Nov 1, 2019

Created on Nov 1, 2019

This example demonstrates drawing primitive geometric shapes—circles, rectangles, lines, and a custom path—using SVG elements directly in an HTML document without any JavaScript library. CSS rules in an external stylesheet apply stroke styling, with a class selector setting line color and width. A `<g>` element uses the `transform` attribute to translate and scale a grouped collection of shapes, while inline presentation attributes assign fills and strokes. The SVG canvas is 960 by 500 pixels, and CSS sets the body to a monospace font with hidden overflow.

AI-generated description

Cars report

MIT Licensed

Similar vizzes

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

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS to show how to create static vector graphics. It uses raw SVG elements within an HTML document, with the `g` element grouping shapes for combined transforms and the `lines` class applying stroke properties. A `transform="scale(1.5)"` enlarges the entire drawing, while individual fill colors and stroke widths are set directly on elements. The code relies solely on native SVG and CSS, with no external libraries, and renders shapes from hardcoded coordinate data in the markup.

Mmgermaine93

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes, with grouping elements (`<g>`) applying transformations like scaling, translation, and fill inheritance. The SVG is embedded directly in the HTML, using no external JavaScript libraries. Renders via the SVG DOM, showing static geometry without interaction or data binding.

CChristopher A. Pfeifer

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, and lines—using inline SVG markup combined with an external CSS stylesheet. It shows the application of presentation attributes like `fill`, `stroke`, and `stroke-width` directly on SVG elements, as well as the use of the `<g>` element to group shapes and apply a unified `transform` and style properties to them collectively. The rendering relies entirely on the browser's native SVG support, with no JavaScript libraries involved.

Mmorjyooo

93% match