data viz svg

100%

✓ Published0🌍 Public

Last edited May 31, 2021

Created on May 31, 2021

This example demonstrates a geometric composition of three identical shapes arranged horizontally, each consisting of a yellow circle with a rectangular base and stem, colored orange, blue, and pink. A separate polyline path with connecting segments appears below the shapes in teal. The visualization uses D3 v6 to render SVG elements directly in the HTML, with CSS controlling the line styling via the `.lines` class, while all positional offsets are applied through SVG `transform` attributes on the `<g>` groups.

AI-generated description

A template for creating SVG with D3 and CSS.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Playground

This example shows three identical SVG figures arranged in a row, each displaying a yellow circle with a rectangular hat, but dressed in different colors. A separate group of green lines, one straight and one zigzag polyline, crosses below them. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path` within grouped `<g>` tags, applying transforms, fills, strokes, and CSS classes. D3 v6 is loaded for scripting, but the visualization relies entirely on static SVG markup without data binding or dynamic updates.

Ddabrze3@gmail.com

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental Scalable Vector Graphics (SVG) shapes rendered directly within an HTML document. It shows a pink circle, a yellow rectangle with a navy border, a black diagonal line, and a red polyline path composed of relative line commands. The visualization relies on the native SVG element namespace inside an HTML file, using attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and the `d` path data syntax to define each shape's geometry and styling without any external libraries.

Aanqiwoo

80% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

78% match

Loading thumbnail…

Shapes SVG-CSS

The example demonstrates static geometric shapes composed of circles, rectangles, lines, and paths, arranged in a flat, abstract composition. A red circle and a yellow group with black outlines highlight styling variations, while the `.lines` class applies thick black strokes to line elements and a distinct teal color with rounded joins to the path. The visualization relies on embedded SVG markup and CSS rules for appearance, with no interactive or dynamic behavior.

Iimoutidi

78% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000

78% match

Loading thumbnail…

Shapes with SVG & CSS

This example shows a static collection of geometric shapes composed of circles and rectangles in three color-coded groupings, alongside polygonal line drawings. The first two rows demonstrate default black shapes, a set with explicit fill colors, and a translated group with purple fill and black strokes. A lower group renders two lines and a zigzag path with a thick black outline and yellow join styling. The visualization is built with raw SVG elements inside an HTML page, styled via CSS classes that apply stroke widths and colors to the line elements.

AAli Shah

78% match

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

78% match

Loading thumbnail…

shapes with svg and css

This example demonstrates a simple collection of SVG shapes, including a green circle, a blue-outlined circle with a red rectangle, and a polyline path with a yellow fill. The shapes are rendered using raw SVG elements within an HTML page, with styling and stroke properties applied through an external CSS stylesheet, including a `.lines` class that controls stroke color and width. The code uses no JavaScript libraries, relying solely on SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS for presentation.

DDominika Modzelewska

78% match