Fork of Shapes and Colors with SVG and CSS

100%

Fork of Shapes and Colors with SVG and CSS

✓ Published1🌍 Public

Last edited Jul 13, 2023

Created on Jul 13, 2023

Forked from Shapes and Colors with SVG and CSS

A static SVG scene demonstrates primitive shapes—circles, rectangles, lines, and a path—styled via an external CSS file. The drawing uses inline presentation attributes (fill, stroke, stroke-width) and grouping elements with transforms to scale and translate the composition. A class named “lines” applies black stroke-width 10 to the line element, while an additional rule turns the path a teal color with round joins and caps. The markup relies on raw SVG elements within an HTML body, with no JavaScript libraries or data sources 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

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

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

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

91% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled directly with CSS. It shows how color, stroke, and fill attributes apply both inline and through a class selector, with a transformed group scaling and translating the artwork. The SVG is embedded directly in HTML, with the stylesheet controlling the body layout and the `.lines` group’s stroke properties. Static rendering uses no JavaScript libraries, relying purely on SVG markup and CSS rules.

HHassan Abdullah

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

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

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

91% match