Skip to main content
SimilarExport ZIP
100%

Fork of Shapes with SVG and CSS

✓ Published1🌍 Public
MManoj
Last edited Mar 20, 2023
Created on Mar 20, 2023

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

MManoj
95% 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
90% 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…

Shapes with SVG and CSS

This example shows a collection of geometric shapes—circles, rectangles, lines, and a path—arranged on an SVG canvas, with some shapes inheriting styles from CSS classes and groups. The SVG elements use direct attributes for fill, stroke, and positioning, while the `.lines` class applies stroke styling via CSS. The code uses vanilla JavaScript within an HTML page, linking to a separate stylesheet, and demonstrates how SVG and CSS work together without any external visualization libraries.

Sshuksbhoney
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create shapes using SVG elements styled with CSS. It shows circles, rectangles, lines, and a path rendered on a 960x500 canvas, with CSS classes controlling stroke properties like color and width. The code uses inline SVG attributes for basic positioning and fill colors, while the `lines` class applies black strokes and a yellow stroke with round line joins to the path. The `g` element groups shapes and applies a translation transform, and the CSS resets body margins and hides overflow.

MManoj
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
89% match