Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Rrubekk
Last edited Aug 24, 2021
Created on Aug 24, 2021

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.

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 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
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
94% 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 and styling in a static composition, combining circles, rectangles, lines, and paths. The code uses raw SVG elements with CSS classes to control stroke properties, while inline attributes apply fills and transforms. A group element translates the lower shapes, and another group applies a black stroke to its children. The stylesheet sets the overall page layout and defines the `.lines` class with rounded line joins and caps. The rendering relies entirely on SVG’s native coordinate system and CSS inheritance, with no JavaScript libraries involved.

LLily Gaffney
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows basic SVG shapes styled with CSS, including circles, rectangles, lines, and a path. The shapes demonstrate inline fill attributes, a grouped set with a shared fill and stroke, and a separate class-based styling for lines. The code uses raw SVG elements within an HTML file, with a linked stylesheet applying stroke properties to the `.lines` class. Rendering relies on the browser’s native SVG support, with a scale transform applied to the entire group. No external JavaScript libraries are used, and the data is static geometry defined directly in markup.

PPrathik Kulkarni
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a static, colorful graphic. It uses raw SVG elements such as circles, rectangles, lines, and paths, along with inline attributes like `fill` and `stroke`. The code employs CSS classes to define stroke properties for line and path elements, and groups shapes with the `transform` attribute to scale and translate them. The rendering is entirely SVG-based, with no external data source, showing basic shape composition and styling in a web page.

Mmtan8
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a static, colorful graphic. It uses raw SVG elements such as circles, rectangles, lines, and paths, along with inline attributes like `fill` and `stroke`. The code employs CSS classes to define stroke properties for line and path elements, and groups shapes with the `transform` attribute to scale and translate them. The rendering is entirely SVG-based, with no external data source, showing basic shape composition and styling in a web page.

Mmtan8
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A static SVG drawing demonstrates how shapes and colors respond to CSS and inline attribute styling. The example uses raw SVG elements—circles, rectangles, lines, and paths—inside a `<g>` group with scaling and translation transforms. Inline `fill` and `stroke` attributes set initial colors, while a CSS class (`.lines`) overrides path stroke properties such as `stroke-linecap` and `stroke-linejoin`. The rendering relies solely on SVG presentation attributes and a linked stylesheet, with no JavaScript libraries.

AAudioSutta
93% match