Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited Sep 6, 2019

Created on Sep 6, 2019

Forked from 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.

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 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 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.

Ssarakouz

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

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

Ppcbt1125

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—in a 960-by-500 SVG canvas, using both presentation attributes and CSS classes to control fill color, stroke, stroke width, and line joins. The code applies scaling and translation transforms to group and reposition the shapes, while the stylesheet sets margins and defines the `.lines` class with distinct stroke properties for the line and path elements. It is a straightforward illustration of vector graphics rendering with raw SVG and CSS, without any JavaScript libraries.

TTheRoadSign

93% match

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

93% match