Fork of Shapes and Colors with SVG and CSS

100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited Jan 28, 2021

Created on Jan 28, 2021

Forked from 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.

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

A static SVG scene demonstrates fundamental shape rendering and CSS styling without JavaScript interaction. The graphic pairs circles and rectangles in varied fill colors, including a group with cyan fills and black outlines, alongside a polyline path using move-to and line-to commands. Styling comes entirely from an external stylesheet, which sets stroke properties on line elements and applies rounded line joins and caps to paths. The example showcases hand-written SVG markup with nested transforms for scaling and translation, illustrating how CSS selectors target SVG child elements for visual customization.

GGabe Nascimento

94% 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

94% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows how SVG shapes, paths, and CSS classes combine to create a static composition with varied fills, strokes, and transformations. The visualization displays circles, rectangles, lines, and a polyline path arranged in a scaled and translated group, with explicit colors and stroke styles applied. It uses the SVG DOM API for elements like `<circle>`, `<rect>`, and `<path>`, while CSS rules in `styles.css` define stroke properties for the line group. The code directly constructs the graphic in `index.html` without any JavaScript libraries.

OOghenemaro Anuyah

94% 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

94% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—stylized directly through CSS classes and inline attributes. It shows how fill colors, stroke widths, and geometric transforms like scaling and translation affect the rendering of grouped elements. The code uses no JavaScript libraries, relying solely on raw SVG markup and a linked stylesheet. The `lines` class applies stroke properties to the polyline-like path, while the second group overrides default fill and adds a black stroke, illustrating CSS specificity and SVG presentation attributes.

CCharlene Ong

94% 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

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