Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Apr 30, 2020

Created on Apr 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

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

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

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

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in SVG with CSS-based styling. The shapes are organized into groups: the top two rows show default black fills, the third row applies a teal fill and black stroke via a `g` element’s presentation attributes, and the bottom group uses the `.lines` class to style a polyline with a thick orange stroke. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) and CSS selectors to control colors, stroke widths, and line joins, with a `transform="scale(1.5)"` applied to the entire drawing.

Cclaudiatomateo

92% match