Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Nov 2, 2020

Created on Nov 2, 2020

This example shows a collection of SVG shapes positioned in a grid, with circles and rectangles styled in black, red, and green, while a translated group and stroked line and path add variety. It demonstrates basic SVG markup with inline attributes for fill, stroke, and transforms, combined with minimal CSS for full-page layout. The code uses raw SVG elements—circle, rect, g, line, and path—without any JavaScript libraries, relying solely on browser-native rendering and a linked stylesheet for presentation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid-like composition with varied fill colors, strokes, and transforms. The rendering uses raw SVG markup inside an HTML page, with CSS classes applied to style group elements, such as setting black stroke and width for line elements. The code relies on standard SVG APIs (circle, rect, line, path) and CSS selectors to control presentation, including a `translate` transform to reposition groups and a `scale` transform on the root group. No external JavaScript libraries or data sources are used, as the shapes are hardcoded in the markup.

Aantoniojl@gmail.com

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a custom path—arranged in a grid and scaled up. It demonstrates how inline SVG attributes set fill and stroke colors, while a CSS class applies a thick black stroke to the lines and a light blue color with rounded joins to the path. The rendering relies solely on the SVG markup in the HTML file, with no additional JavaScript libraries or data sources.

Ggabrielribeirob

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a grid of basic SVG shapes—circles and rectangles—arranged in rows, with a line and polyline across the bottom. It demonstrates raw SVG markup using elements like `circle`, `rect`, `g`, `line`, and `path`, styled through a linked CSS stylesheet. The first row uses default fill, the second applies inline fill colors, and the third groups shapes with a shared `fill`, `stroke`, and `stroke-width` via a transform. The final group applies CSS classes to set stroke styling on the line and path, showing how SVG and CSS interact for visual formatting.

Jjblaskovich

94% match

Loading thumbnail…

Shapes with SVG and CSS

A grid of SVG shapes demonstrates the use of Cascading Style Sheets to control stroke and fill properties. A set of circles and rectangles appear in a default black, followed by explicitly colored variants, then a group with a light-blue fill and black stroke. SVG line and path elements are styled with thick black strokes and a teal color, respectively, using a dedicated CSS class. The example relies on raw SVG elements and CSS selectors, with no JavaScript libraries involved, and renders at a 1.5× scale.

Mmichaeldonatucci9

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid on a 960×500 canvas. It demonstrates how inline SVG elements combine with CSS styling to control appearance, including fill colors, stroke widths, and line join styles. The scene explicitly assigns colors via attributes and CSS classes, with a transformed group and translated lines adding visual variety. The rendering uses raw SVG markup with no external libraries, relying on the browser's native SVG engine and CSS rules defined in a separate stylesheet.

AAdam Usmani

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and styling applied through CSS. Several circles and rectangles are arranged in a grid, with some shapes using inline fill colors while others inherit styling from CSS rules and attribute selectors. Lines and paths are grouped together and transformed using SVG translate and scale operations. The visualization relies on standard SVG elements and CSS properties, rendering directly in the browser.

RRandika87

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid with varied fill and stroke styling. It demonstrates how CSS classes and inline attributes control shape appearance, including a group with a light blue fill and black stroke, plus a separate group of lines with a thick round-joined stroke. The visualization uses plain SVG markup within an HTML file, linked to an external stylesheet, and does not rely on D3 or any JavaScript libraries. The shapes are scaled uniformly via an SVG transform.

Rreo440

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and positioned through a combination of inline attributes, CSS classes, and SVG transforms. It shows how to apply fill and stroke properties, group elements with `<g>`, and use scale and translate transformations to arrange shapes in a grid. The code relies on plain SVG markup, a linked `styles.css` stylesheet, and a video embedded from YouTube as supplementary context, with no JavaScript libraries involved.

CCatriona

93% match