Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Rreedy
Last edited Dec 27, 2019
Created on Dec 27, 2019

An SVG drawing demonstrates fundamental shape primitives and CSS styling within an HTML document. Circles and rectangles appear first with default black fills, then with explicit red and green fill attributes, and finally within a group that applies a shared light blue fill and black stroke. Line and path elements use CSS class selectors to define stroke color, width, and rounded line joins and caps. The embedded YouTube video explains how these SVG features combine with CSS.

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 how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and SVG attributes. It shows shape positioning and scaling with the `transform` attribute, color fills via `fill` properties, and stroke styling through CSS classes. The code uses native SVG elements like `<circle>`, `<rect>`, and `<line>`, alongside CSS selectors (`.lines`) to define stroke width and linecap. The rendering relies directly on SVG markup in an HTML document, with a YouTube video embedded for reference.

Rreedy
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

SVG shapes demonstrate inline presentation attributes and CSS styling within a single visualization. Circles and rectangles display default black fills, explicit red and green fills, and a group-level fill with individual stroke overrides. Line and path elements use CSS classes to apply stroke color, width, and rounded line joins and caps. The SVG is scaled with a transform and rendered directly in HTML without additional libraries.

Ssakhabutdinov
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 primitive elements such as circles, rectangles, lines, and paths. The graphic shows default black fills, an explicitly filled red circle and green rectangle, and a group with a light blue fill and black stroke, all scaled via a transform. It also includes a polyline path and a line rendered without fill. The code relies on standard SVG markup within an HTML document, linked to an external stylesheet, and does not use any JavaScript libraries.

Bbukbukbukka
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

Eight SVG shapes and lines demonstrate basic vector graphics styling with CSS. A circle and square appear first without fills, then with explicit red and green fill attributes, and a third group applies a shared light-blue fill with black strokes via an SVG presentation attribute. Two additional line and path elements use CSS classes to define their stroke color, width, and rounded line joins. The example relies on standard SVG elements like `circle`, `rect`, `line`, and `path`, with transforms for scaling and positioning, all rendered directly in an HTML file.

Aalshami52
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how fill colors, stroke widths, and transformations like scaling and translation apply to groups of elements. The code uses native SVG elements within an HTML document, linked to a stylesheet that defines stroke properties and layout. The rendering approach relies solely on SVG and CSS, with no external JavaScript libraries.

Aabensasi
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates the rendering of primitive shapes—circles, rectangles, lines, and paths—using SVG elements with both inline presentation attributes and external CSS styling. The scene shows how default black fills appear on the first row, then explicit fill colors like red and green on the second, and a third group applies a light blue fill with a black stroke via a parent `<g>` element. CSS classes on the line and path elements set stroke colors, dash styles, and rounded line joins and caps. The SVG is embedded directly in HTML, with the CSS file defining page margins and shape-specific properties. The markup uses explicit coordinates and transforms to position the shapes.

Wwindwardpassage
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS classes. It shows circles and rectangles with default black fills, explicit red and green fills, and a group that inherits a light blue fill with a black stroke. Two additional elements, a line and a polyline path, are styled through the `.lines` CSS class with a thick stroke and rounded joins. The SVG uses transform groups for scaling and translation, while the HTML document links to an external stylesheet that also sets the page’s font size and hides overflow.

Wwoznicak
91% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

Aarg04
91% match