Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
AAdrian Pardo
Last edited Feb 12, 2021
Created on Feb 12, 2021

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.

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 displays a set of geometric shapes—circles and rectangles—arranged in a grid, with a separate group of lines and a polyline path drawn below. It demonstrates basic SVG styling and grouping using inline attributes, CSS classes, and the `<g>` element. The rendering relies on raw SVG markup within an HTML file, with CSS controlling margins, overflow, and stroke properties for the line group. SVG transform functions handle scaling and translation, while the `fill`, `stroke`, and `stroke-width` attributes define visual appearance.

Aalvasilvao
94% 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
93% match
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
93% 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
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using transform attributes. The code uses plain SVG elements within an HTML document, applying fills, strokes, and a scale transformation to the entire drawing. It also shows how CSS classes, such as `.lines`, can control stroke properties like width, color, and line joins. The rendering approach is static SVG, with no interactive behavior or data binding.

Aadewole-top
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through both inline attributes and an external CSS stylesheet. It shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation apply to grouped elements. The visualization uses raw SVG markup within an HTML document, with CSS classes controlling line styles and joint/endpoint rounding. No JavaScript libraries are involved; the rendering relies entirely on the browser's native SVG support and CSS styling rules.

Ii211775
93% 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
93% match
Loading thumbnail…

Fork of 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 fills, strokes, stroke widths, and transforms like scaling and translation can be applied directly in the markup or inherited from parent `<g>` groups. The code uses raw SVG elements and external stylesheet rules, with no JavaScript libraries, to illustrate fundamental vector graphics rendering and styling techniques.

Bbhats989@gmail.com
92% match