Shapes with SVG and HTML

100%

Shapes with SVG and HTML

✓ Published1🌍 Public

Last edited Aug 20, 2019

Created on Aug 20, 2019

A simple SVG scene demonstrates basic shape drawing and grouping in a 960x500 viewport. Circles, rectangles, a line, and a path are positioned with explicit coordinates, while a nested transform group applies a translation and fill/stroke styling. The page relies solely on raw SVG elements and CSS classes, with no JavaScript libraries, to show how inline SVG handles primitive shapes, attributes, and visual properties like stroke width and line joins.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

A collection of primitive SVG shapes demonstrates how presentation attributes and CSS interact in a static graphic. Circles and rectangles showcase fill colors, strokes, and transforms, while grouped elements apply inherited styling. A line and a hand-coded path with rounded joins illustrate stroke styling within a dedicated `.lines` class. The rendering relies solely on SVG markup and a linked stylesheet, with no JavaScript libraries or data involved.

KKevinw97

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

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It uses raw SVG markup within an HTML page, applying inline attributes for fill, stroke, and transforms, while a linked stylesheet (`styles.css`) defines classes for line width, color, and path join styles. The scene groups elements to show how attributes and CSS rules combine, with a global scale transform enlarging the entire composition.

Ssourcebox-bug

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes, with grouping elements (`<g>`) applying transformations like scaling, translation, and fill inheritance. The SVG is embedded directly in the HTML, using no external JavaScript libraries. Renders via the SVG DOM, showing static geometry without interaction or data binding.

CChristopher A. Pfeifer

91% match

Loading thumbnail…

Shapes with SVG

This example shows how to construct basic SVG shapes—circles, rectangles, lines, and a path—positioned in a group with a scale transform. It demonstrates styling shapes with inline attributes, a group-level fill and stroke, and a CSS class that adds stroke properties to lines and the path. The code uses raw SVG elements within an HTML document, with no JavaScript libraries or data binding, relying solely on static markup and a linked stylesheet for visual customization.

IImmaculata-Mary Muoghalu

91% match

Loading thumbnail…

Shapes with SVG and CSS

A collection of SVG shapes demonstrates basic geometric styling and grouping. Circles, rectangles, lines, and a path are rendered with varied fills, strokes, and transforms. The example uses native SVG elements directly in HTML, with CSS classes like `.lines` controlling stroke properties and attributes such as `stroke-linejoin` for path corners. No external libraries are used; rendering relies entirely on SVG markup and CSS styling.

Eeco2nomy

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in groups using SVG elements inside an HTML page. The code applies CSS classes to style the line group with a black stroke and a rounded path join. A transform attribute scales the entire drawing by 1.5 times, while groups use translate to position shapes, with fill and stroke properties set directly on elements to control color and borders.

EEdward-Elric233

91% match