Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Mar 8, 2020

Created on Mar 7, 2020

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.

AI-generated description

An example of SVG and CSS

MIT Licensed

Similar vizzes

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

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 demonstrates how SVG shapes like circles, rectangles, lines, and paths can be styled using both inline attributes and external CSS. It shows a small grid of geometric forms where color, stroke, and transparency are controlled through presentation attributes—such as `fill` and `stroke-width`—and a `.lines` class with custom properties. The SVG is scaled via a `transform` attribute, and CSS rules define the body layout. The visualization uses raw SVG markup and a linked stylesheet, with no additional JavaScript libraries.

Ssrrajendran

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

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

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