Fork of Fork of Shapes with SVG and CSS

100%

Fork of Fork of Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Mar 20, 2023

Created on Mar 20, 2023

Forked from Fork of Shapes with SVG and CSS

This example uses raw SVG elements and CSS to demonstrate basic shapes and styling. It shows circles, rectangles, and a path, with both inline attributes and CSS classes controlling appearance. The first circle is red, the second green, and a group with a transform moves shapes while adding a stroke. A separate group defines a line and path, with CSS applying black strokes and a yellow stroke-linejoin to the path. All shapes are hardcoded in HTML, with no JavaScript or data binding, relying purely on SVG presentation attributes and stylesheet rules.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example shows basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG canvas, with some shapes grouped and styled through CSS. The SVG markup defines the shapes’ positions, sizes, and inline fill colors, while an external stylesheet applies stroke properties and line-join rounding to elements within the `lines` class. The page uses no JavaScript libraries; it relies solely on static HTML, SVG, and CSS, as visible in the provided `index.html` and `styles.css` files.

MManoj

95% match

Loading thumbnail…

Fork of Shapes with SVG and CSS

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.

Rraphman100

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

89% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and CSS classes. The SVG is scaled and translated via transform groups, with explicit fills, strokes, and stroke-widths applied. It uses raw SVG elements within an HTML page, with CSS controlling the path stroke color, line join, and cap styles. No external libraries are involved; the rendering relies solely on native SVG presentation and a linked stylesheet.

Ppangaotata

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

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

89% 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 path—arranged in a grid and styled with both inline attributes and CSS classes. The visualization uses raw SVG markup within an HTML file, applying transforms for scaling and translation, while the stylesheet controls stroke properties, line joins, and caps. It showcases how SVG elements can be combined with CSS to create a static, decorative composition.

Bbakar294

89% match

Loading thumbnail…

Fork of HTML Starter - shapes w/ svg

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—inside an SVG canvas. It shows how styling attributes like fill, stroke, and stroke-width apply directly to elements, and how groups (`<g>`) organize shapes with shared transformations and styles. The visualization is built with plain HTML and CSS, using raw SVG syntax without any JavaScript libraries. The SVG viewport is scaled via a transform, and a CSS class controls the appearance of line and path elements.

KKwong-Yuankit

89% match