Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published2🌍 Public

Last edited Dec 26, 2020

Created on Dec 26, 2020

A simple SVG scene demonstrates basic geometric shapes and CSS styling. The graphic pairs circles and rectangles with distinct fill colors, including a group with a cyan fill and black stroke where a rectangle is rotated 45 degrees. Additional lines and a polyline path appear in yellow and blue with a rounded line join. The example uses raw SVG elements directly in HTML, with CSS selectors like `.lines` and `.lines path` to apply stroke properties, illustrating how SVG and CSS combine for static visualization.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles and rectangles—rendered with SVG elements, styled through CSS classes and inline fill attributes. It shows how colors, stroke widths, and transformations like scaling and translation apply to primitive shapes, including a polyline path composed of connected line segments. The visualization uses static SVG markup within an HTML file, with styling defined in an external stylesheet, such as the `.lines` class applying stroke properties to the path and line elements.

MMohtasim Tamjeed

93% match

Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene displays basic geometric shapes—circles, rectangles, a line, and a polyline path—positioned in an HTML document. The code uses raw SVG elements with CSS styling, including a class selector to apply stroke color and width to the line and path. The shapes demonstrate different fill and stroke properties, such as a red circle, a green rectangle, and a group with a blue fill and black stroke. The SVG canvas is scaled with a transform, and CSS hides page margins and overflow.

HHaniAlHawasli

93% match

Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene demonstrates basic shapes and styling with pure web standards. Circles and rectangles appear in groups, with some shapes filled using CSS or inline attributes, while a third group applies a shared fill and black stroke. A polyline and path use a CSS class to set stroke properties, including a rounded line join. The example uses raw SVG elements and external CSS, with no JavaScript libraries, over a fixed 960 by 500 viewport.

33ology

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using Scalable Vector Graphics (SVG) and style them with CSS. It shows circles and rectangles filled with various colors, including yellow, gray, and black, arranged in a grid-like pattern, along with a line and a polyline path. The SVG elements are organized within groups using the `<g>` tag, some with transform attributes for scaling and translation. CSS classes, such as `.lines`, apply stroke styling and rounded line caps to the path elements. The rendering uses pure SVG markup in an `index.html` file, with `styles.css` controlling visual properties.

Aannadehtiarova

92% match

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes demonstrates how presentation can be controlled through inline attributes and external CSS. Circles, rectangles, and a polyline are drawn with default black fills, then customized with explicit fill colors, stroke widths, and a translated group using a light blue fill. A separate line and path, grouped under a class `lines`, receive black strokes and rounded joints via stylesheet rules. The example uses raw SVG elements within an HTML document, styled by a linked `styles.css` file, with no JavaScript or data binding involved.

GGiant316

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic geometric shapes—circles, rectangles, a line, and a path—drawn with SVG and styled through CSS. It shows how shape properties like fill color, stroke width, and stroke color can be set either as inline attributes or via classes in an external stylesheet. The code uses native SVG elements within an HTML file, with a CSS stylesheet defining the `.lines` class for styling. The rendering is purely static, with no JavaScript libraries, data sources, or interaction.

Jjmarcrum3

92% match