Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public

Last edited Aug 26, 2019

Created on Aug 26, 2019

Forked from Shapes and Colors with SVG and CSS

A single static SVG graphic demonstrates primitive shapes and color styling through both inline attributes and CSS rules. The markup places circles, rectangles, lines, and a polyline path within nested `<g>` groups, with fill and stroke set directly on elements for some shapes and inherited via CSS classes for others. The stylesheet applies stroke widths, line joins, and caps to the line and path elements. No data is loaded; the example illustrates basic SVG structure and CSS selectors for visual customization.

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

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. The code shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation affect rendering. It uses raw SVG elements with CSS selectors (`.lines`, `.lines path`) to apply stroke properties, while a `<g>` element groups shapes to share fill and stroke settings. The rendering is pure SVG in an HTML page with no external libraries.

LLinkous

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—with colors applied through inline attributes and CSS classes. It shows how the `<g>` element groups shapes to share fill and stroke properties, while a scale transform enlarges the entire scene and a translate moves part of it. The code uses raw SVG markup with CSS for styling, including stroke-width, stroke-linejoin, and stroke-linecap on the line and path elements. No external libraries or data are involved; rendering is purely static SVG.

TTheRedUnicorn

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined to create a simple, static visualization. It draws circles and rectangles with various fill colors, and includes a group that applies both a fill and stroke. A separate group of lines and a path demonstrates stroke styling with rounded joins and caps. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS rules in styles.css controlling stroke properties, while inline attributes and nested `<g>` transforms handle layout.

Jjlbullerc

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through HTML and CSS. It shows circles, rectangles, lines, and paths arranged in groups with varying fill colors, stroke properties, and transforms. The code applies CSS classes to style the line and path elements, while inline attributes handle other visual properties. Rendering uses SVG markup directly, with the `line` element and `path` element for the polyline, all scaled and translated within the `<g>` container.

Pprativis

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled directly through CSS and inline attributes, using circles, rectangles, lines, and paths within a single graphic. It shows how fill colors, stroke widths, and line joins are applied both via presentation attributes and a linked stylesheet. The code uses plain SVG elements inside a `<g>` container with transforms for scaling and translation, while the `.lines` class in CSS configures black strokes and rounded line caps. No data source is involved; the illustration focuses purely on static SVG rendering techniques.

JJustinS1209

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and geometric transforms (`scale`, `translate`) can be applied at the element or group level, including inherited styles through `<g>` containers. The code uses native SVG markup inside a 960x500 canvas, with a separate stylesheet (styles.css) controlling the body layout and class-specific styling for the polyline group. The shapes are static with no data binding or interaction.

DDanteStack

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled with CSS, using circles, rectangles, lines, and a path. It shows inline presentation attributes like `fill` and `stroke` alongside a `<g>` element that applies shared styles, and CSS classes that define stroke properties for line elements. The SVG is scaled with a transform, and the page hides overflow. The code uses raw SVG markup with no JavaScript libraries, relying on CSS for line styling.

Eegrebing

93% match