Shapes with SVG

100%

Shapes with SVG

✓ Published1🌍 Public

Last edited Aug 13, 2021

Created on Aug 13, 2021

This example shows how to compose SVG shapes—circles, rectangles, lines, and a path—into a grouped, scaled illustration using plain HTML and CSS. The code directly places SVG elements with attributes for position, size, fill, and stroke, and uses nested `<g>` elements to apply `translate` and `scale` transforms. CSS classes style the line group with purple and blue strokes, while the presentation is rendered entirely via the browser’s native SVG support, with no external JavaScript libraries.

AI-generated description

A demonstration of basic HTML and CSS.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, and a line—styled and arranged through inline attributes and CSS. It shows how SVG groups (`<g>`) can apply shared fill colors, strokes, and transforms to multiple shapes at once, while individual elements can override those inherited styles. The code uses raw SVG markup within an HTML document, with no external JavaScript libraries, and relies on a linked stylesheet for overall page typography and layout. The rendering approach is purely static SVG, with all positioning and styling declared directly in the markup.

Rross-fisher

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths, styled directly via CSS classes and inline attributes. Rendered inside an SVG element on an HTML page, the shapes are grouped using `<g>` elements that apply scaling and translation transforms. The CSS defines visual properties such as stroke color, stroke width, and line joins, with some groups inheriting fill and stroke from parent elements. The visualization makes no use of external JavaScript libraries, relying instead on static SVG markup and cascading styles.

PPenguin-jpg

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Ppengyugatech

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled with CSS and grouped using SVG transformation. It shows circles, rectangles, and a line, with groups of shapes translated vertically and given fill and stroke attributes. The SVG canvas dimensions are set to 960 by 500, and inline SVG elements are rendered directly in the HTML. The `g` element is used to apply transform and style changes to the grouped shapes, while the `circle`, `rect`, and `line` elements are drawn with specific coordinates and radii. The CSS file sets the body margin to zero and hides overflow.

BBogtrotter72

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS. It shows a static composition where the first circle and rectangle inherit default fills, a translated group applies shared fill and blue stroke attributes, and the `.lines` class sets black stroke width for lines while paths override the stroke to red with round line joins. The code uses the SVG API directly within an HTML document, with CSS rules in a separate stylesheet controlling presentation. No external libraries are involved.

TTiffani Gamboa

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic SVG shapes—circles, rectangles, lines, and a path—inside a single `<svg>` element. The code uses plain SVG markup and CSS to control visual properties, such as setting fill colors, stroke widths, and stroke line joins. CSS classes like `.lines` apply styling to groups of shapes, while inline attributes and nested `<g>` transforms position and scale the elements. The rendering is purely static, with no data binding or interaction, showcasing direct SVG and CSS coordination.

MMelina

93% match