Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jan 27, 2021

Created on Jan 27, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

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.

VVeerle

93% 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

93% match

Loading thumbnail…

Shapes with SVG and CSS

A grid of SVG shapes—circles and rectangles—demonstrates how CSS classes and inline styles set fill colors, strokes, and geometry within an SVG canvas. The example uses plain SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with a `<g>` element applying a transform and a class named `lines` controlling stroke properties via the linked `styles.css` stylesheet. A commented-out line shows unused code, while the visible path uses `fill="none"` with a custom stroke.

YYedrup

93% 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

92% 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

92% 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

92% match

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

91% 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

91% match