Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
RRubens
Last edited Sep 1, 2018
Created on Aug 27, 2018

A set of basic SVG shapes—circles, rectangles, lines, and a polyline path—is drawn on a 960×500 canvas, with styling applied through both inline attributes and an external CSS stylesheet. The examples demonstrate how presentation properties like fill and stroke can be set directly on SVG elements, inherited from a parent `<g>` group, or overridden via CSS classes such as `.lines`. The code uses raw SVG markup and CSS, with no JavaScript libraries, and includes a horizontal scale transform to stretch the shapes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates how CSS can style SVG elements. It shows how SVG’s transform attribute scales and translates groups of shapes, while CSS classes like `.lines` apply stroke, stroke-width, and linejoin properties. The example uses raw SVG markup embedded in HTML, with no JavaScript libraries, and the rendering is handled directly by the browser’s SVG engine.

Ccwanca
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
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a 960×500 canvas. It illustrates how inline `fill` and `stroke` attributes override CSS rules, while a `<g>` group applies a shared cyan fill and black stroke to its children. The rendering relies on raw SVG markup within the HTML file, styled by an external stylesheet that sets a `.lines` class for the polyline and defines stroke properties for the path. No JavaScript or external visualization library is used.

AAlen George
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Ppcbt1125
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Ppcbt1125
94% match
Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes demonstrates how presentation can be controlled through inline attributes and external CSS. Circles, rectangles, and a polyline are drawn with default black fills, then customized with explicit fill colors, stroke widths, and a translated group using a light blue fill. A separate line and path, grouped under a class `lines`, receive black strokes and rounded joints via stylesheet rules. The example uses raw SVG elements within an HTML document, styled by a linked `styles.css` file, with no JavaScript or data binding involved.

GGiant316
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered together in a single canvas. It shows how CSS classes control stroke and fill properties for groups and individual elements. The code uses raw SVG markup with inline attributes like `fill`, `stroke`, and `transform`, while styling comes from an external stylesheet. It includes static shapes without animation, highlighting how SVG’s `<g>` grouping and `translate` and `scale` transforms arrange geometry spatially.

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