Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Dec 31, 2021

Created on Dec 31, 2021

This example demonstrates how to create basic geometric shapes, including circles, rectangles, lines, and paths, using SVG elements styled with CSS. The visualization employs a scale transform to enlarge the entire composition and a translate transform to reposition a group of shapes, while inline `fill` and `stroke` attributes apply colors and outlines. A CSS class named `.lines` defines stroke properties for the line and path elements, with the path using a teal stroke and rounded line joins. The page structure relies on standard HTML and CSS, with the SVG embedded directly in the markup.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This SVG and CSS example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be composed and styled to create a simple graphic. The SVG markup positions shapes within a 960×500 viewport and applies a 1.5 scale transformation. CSS classes control stroke and fill properties, such as the black stroke and rounded line joins on the path. The example shows how inline SVG attributes and external stylesheets work together to render and customize vector graphics.

MMike Wolfgram

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Sshis1011

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements and style them with CSS. It shows circles and rectangles with both fill colors applied directly as attributes and groups of shapes where the fill is inherited from an enclosing `<g>` element. The visualization also illustrates how to draw lines and paths, with the line stroke properties defined in a stylesheet. The rendering uses raw SVG markup within an HTML page, with CSS selectors targeting the `.lines` class to apply stroke color and width.

CChristopher A. Pfeifer

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to construct simple geometric shapes—circles, rectangles, lines, and paths—using inline SVG elements within an HTML page. The visualization shows how SVG properties like `fill`, `stroke`, and `stroke-width` can be applied directly or through CSS classes, with the first row using default black fills and the second applying explicit red and green colors. A group with `translate` and `stroke` attributes renders white shapes with black outlines, while a separate `.lines` class sets a thick black stroke on line and path elements, with the path receiving a distinct teal color and rounded joins via CSS. The scene is scaled up by a factor of 1.5 using an SVG transform.

Iihatelearning

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG scene with inline styling and cascading style sheets. The visualization shows how SVG primitives combine with CSS classes to control appearance, such as setting fill colors, stroke widths, and line joins. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with transformations applied via the SVG `transform` attribute. CSS rules in `styles.css` style the `.lines` group and its path, demonstrating separation of structure and presentation.

SShawn Kearney

93% match