Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published2🌍 Public

Last edited Nov 11, 2020

Created on Nov 11, 2020

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes can be styled using both presentation attributes and CSS. It draws circles, rectangles, lines, and paths on a 960×500 canvas, with a transformation that scales the content. The code uses inline `fill` and `stroke` attributes, a grouped element with inheritance of stroke and fill properties, and CSS classes (`.lines`, `.lines path`) to control stroke color, width, and line joins. The SVG is embedded directly in HTML and styled with an external stylesheet.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a collection of geometric primitives—rectangles, circles, lines, and paths—arranged on an SVG canvas with distinct styling. It highlights how CSS classes control visual properties like fill colors, stroke colors, and stroke widths across grouped elements. The rendering relies on inline SVG elements defined directly in the HTML, paired with a stylesheet that applies rules to the `.lines` class and its nested `path` elements, such as a teal stroke with rounded joins and caps. The SVG is drawn without external libraries, using only native markup and CSS.

Ssarakouz

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled using CSS, presenting a series of circles, rectangles, lines, and paths in a 960x500 canvas. The SVG markup defines geometric primitives with inline `fill` and `stroke` attributes, while a linked stylesheet applies additional styling rules, including stroke width and line join properties. The code leverages native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS selectors targeting class-based groups to control visual appearance. Rendering relies entirely on the browser’s SVG engine and standard CSS, with no external JavaScript libraries involved.

MMMoronto

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how CSS classes and inline presentation attributes combine to style SVG shapes, with circles, rectangles, lines, and a path shown in a single canvas. The SVG is scaled, and a group with the class `lines` applies black strokes and blue, round-joined paths via the stylesheet. Rendered with SVG and styled through CSS, it uses the `<g>` element for grouping and `transform` attributes for positioning and translation.

Ssarakouz

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling, showing how circles, rectangles, lines, and paths are rendered on a 960x500 canvas. A group element applies shared fill and stroke properties to multiple shapes, while a separate class selector styles paths with rounded line joins and caps. The SVG is scaled using a transform, and colors are set via presentation attributes or CSS rules. The code uses plain SVG APIs within an HTML document, with no external JavaScript libraries.

DDuyun Tan

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged with transforms and grouped elements. It illustrates how inline attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheet rules targeting classes such as `.lines` and `.lines path` for stroke color and line joins. The rendering uses raw SVG markup within an HTML page, with a CSS file controlling layout and visual properties.

Ffasynator

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and a path within a scaled and translated group. The code uses inline SVG elements with attributes for geometry and fill, while a separate stylesheet defines stroke properties and line joins through classes. The SVG is rendered directly in the HTML with a 960 by 500 viewport.

Aagongwpi

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled using CSS. The code renders circles, rectangles, lines, and paths on an SVG canvas, with some shapes applying inline `fill` and `stroke` attributes while others inherit styles from CSS rules. A CSS class `.lines` sets stroke properties for paths and lines, and CSS custom properties control colors like `#83cc2a` and `#adf6ff`. The example uses no JavaScript libraries, relying on native SVG elements and CSS for rendering and styling.

HHarold Mantilla

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through inline attributes and an external CSS stylesheet. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width` can be overridden by CSS rules, as seen with the `.lines` class applying black strokes. The SVG is scaled using a transform and grouped with translation to position elements, while CSS handles global layout. The code uses raw SVG elements and CSS, with no data or interaction.

Ssbgatech

93% match