Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
AAbdulazizfh
Last edited Feb 24, 2021
Created on Feb 24, 2021

This example demonstrates a static composition of SVG shapes, including circles and rectangles, with varied fill colors and strokes, while a broken line and polyline path show stroke styling. The scene is wrapped in a `<g>` group with a scale transform. The implementation relies directly on SVG elements and CSS rules from `styles.css`, where the `.lines` class applies a black stroke and the path receives a teal color with rounded line joins and caps. No JavaScript or external library is used for the rendering.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline—styled with CSS classes and inline attributes. It uses SVG elements directly in the HTML, with a `<g>` group applying a scale transform and another group applying a translation and shared fill and stroke properties. The CSS defines stroke colors, widths, and line join/cap styles for the `.lines` class and its path. No external libraries are used; rendering relies entirely on native SVG and CSS.

YYU
92% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static SVG composition of shapes and colors, using circles, rectangles, lines, and a path arranged within a scaled group. It shows how presentation attributes like `fill` and `stroke` can be applied directly or inherited from parent `<g>` elements. The code relies on standard SVG elements and CSS classes, such as `.lines` and `.lines path` in `styles.css`, to control stroke styling and line joins. The rendering uses raw SVG markup without any JavaScript libraries, making it a pure HTML/CSS illustration of vector graphics.

Rrubekk
92% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of basic SVG shapes—circles, rectangles, lines, and a polyline path—stylized with CSS classes and inline attributes. The scene uses a transformed group to scale the entire drawing, while a nested translation positions a second group of shapes. Colors vary between explicit fills like red and green, and a shared fill applied via a group attribute, with stroke properties defined in styles.css for black lines and a custom line join. The page relies solely on native SVG markup and CSS, with no JavaScript libraries involved.

Ccharliemok
92% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static, layered composition. It shows circles, rectangles, lines, and a path arranged within a transformed group, with some shapes inheriting fill and stroke properties from parent `<g>` elements while others specify these attributes directly. The code uses inline SVG elements—`circle`, `rect`, `line`, and `path`—alongside a linked stylesheet that defines stroke colors, widths, and join styles for the line group. The rendering relies on the SVG markup in the HTML file, with no JavaScript or external data, showcasing basic vector graphics and CSS class-based styling.

Sstiti75
92% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS classes can be used together to create a simple, static composition. It shows circles, rectangles, lines, and a path, with some shapes filled using inline attributes and others styled via CSS. The SVG is rendered directly in HTML, using nested `<g>` elements for grouping and transformations, with a `scale` applied to the entire scene. CSS rules in `styles.css` define stroke widths and colors for the `.lines` group, while inline `fill` and `stroke` attributes handle individual shape styling. The rendering approach is pure SVG, with no external libraries or data sources involved.

Ccryiscott
92% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS can be combined to create a static, stylized composition of circles, rectangles, lines, and a polyline. It uses raw SVG elements within an HTML file, with styling applied through a separate stylesheet. The SVG is scaled with a group transform, and properties like fill, stroke, and stroke-width are set both inline and via CSS classes. The code demonstrates grouping elements with `<g>` tags and applying transforms to position and scale the entire drawing.

AAdrian Pardo
91% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and CSS classes. It shows how SVG elements inherit fill and stroke properties, with a group that applies a light blue fill and black stroke to its children, and a separate `.lines` class defining stroke width and color for the polyline and path. The code uses raw SVG markup inside an HTML file, with CSS rules in `styles.css` to control presentation, including a global transform scale and rounded line caps. No external JavaScript libraries are involved.

MMinaSSaleh
91% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of SVG shapes—circles, rectangles, lines, and a path—arranged and styled with CSS. The visualization shows how basic geometric primitives can be grouped, transformed, and colored, with some shapes inheriting fill and stroke properties from parent `<g>` elements while others are set directly. The code uses raw SVG attributes like `translate` and `scale` for positioning, and CSS classes (`.lines`) to apply stroke styling to line and path elements. It renders entirely in SVG with no external data or JavaScript libraries.

HHojjat Karami
91% match