Fork of Shapes with SVG and CSS

100%

Fork of Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Aug 8, 2021

Created on Aug 8, 2021

A fork of a basic shapes demonstration uses SVG elements styled with CSS to display geometric forms. Circles and rectangles appear in rows, with the first row unfilled, the second row filled with solid red and blue, and the third row given a light cyan fill and black stroke via an inline presentation attribute. A separate SVG path, rendered through the `pathLines` class, draws a black polyline with round line joins and caps across the canvas. The example relies on plain SVG markup and CSS selectors, including the `.pathLines` rule, to define all visual properties.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A fork of an SVG and CSS example shows geometric shapes—circles, rectangles, lines, and a path—arranged in a grid and transformed with a scale. Basic shapes initially appear unfilled or with simple fills, while a translated group applies a light blue fill and black stroke to its children. The custom `.lines` class sets stroke properties on the SVG elements, with the path receiving a distinct dark teal color, rounded joins, and caps. The code uses raw SVG elements and CSS selectors, with no JavaScript libraries, and is rendered directly in the browser.

Aalisaipsoc

92% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

The fork of Shapes and Colors demonstrates basic SVG shapes—circles and rectangles—arranged in two rows with default black fills, then explicit red and green fills, followed by a grouped set with a light blue fill and black stroke. A third group uses CSS classes to apply thick black strokes to lines and a polyline path, with rounded caps and joins, all scaled by a transform. SVG elements are hand-coded in HTML, with styling handled entirely through a linked stylesheet.

33186555385@qq.com

92% match

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example demonstrates a static composition of primitive shapes—circles and rectangles—arranged directly on an SVG canvas, with one group transformed vertically and given a distinct fill and stroke. It then shows a polyline formed by a line element and a path element, where CSS class rules apply a stroke color and a round line join to the path. The code uses native SVG elements and CSS selectors to style the shapes, with the stylesheet also setting the canvas to fill the viewport and hide overflow.

Nnajeebgdds

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

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles and rectangles—arranged in a grid and colored individually, with a group element translating a set of shapes down the canvas. It shows how SVG primitives can be styled and transformed using inline attributes. The visualization uses raw SVG markup within an HTML document, with CSS rules in `styles.css` controlling page margins and a highlight class. A single line element with a stroke is also included, though its closing tag is malformed. The code relies solely on native SVG and CSS, with no JavaScript libraries involved.

SSwavna

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

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

90% match

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example showcases a collection of basic SVG shapes, including circles, rectangles, a line, and a path, arranged within a scaled and translated group. The styles demonstrate how CSS classes can control SVG element properties, such as stroke color, width, and line join for the path. The shapes are rendered directly in the browser using SVG, with the HTML defining the structural elements and an external stylesheet applying visual styling to the elements.

Llabotecperucom

90% match