Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Nov 7, 2018

Created on Sep 12, 2018

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, using circles, rectangles, lines, and paths arranged in a grid. The shapes are styled through inline attributes and CSS classes, with color variations and stroke effects applied to specific groups. The visualization uses raw SVG elements within an HTML document, with a stylesheet that defines properties for line joining and stroke widths. The rendering approach relies on SVG's native vector graphics, transformed and scaled via the `transform` attribute, without any external JavaScript libraries.

HHarish M A

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes like circles, rectangles, lines, and paths are drawn and arranged using SVG elements. It demonstrates SVG transforms, including scaling and translation, to position and resize shapes, as well as CSS classes to control stroke color, width, and line joins. The visualization uses raw SVG markup with inline attributes for fill and stroke, alongside a stylesheet (`styles.css`) for styling. The layout is static, strictly demonstrating fundamental SVG and CSS techniques without any data binding or interaction.

BBryan Liu

94% 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 and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through inline attributes and an external CSS stylesheet. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width` can be overridden by CSS rules, as seen with the `.lines` class applying black strokes. The SVG is scaled using a transform and grouped with translation to position elements, while CSS handles global layout. The code uses raw SVG elements and CSS, with no data or interaction.

Ssbgatech

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe

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 and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged in a grid. Using inline SVG elements, the visualization applies fill colors, stroke properties, and transforms directly in the markup. The `styles.css` file defines classes like `.lines` to set stroke color, width, linecap, and linejoin for the line and path elements. The code uses SVG's `<g>` grouping and `transform` attributes to translate and scale entire collections of shapes simultaneously.

Aabensasi

93% match