Play with SVG and CSS

100%

Play with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 10, 2021

Created on Jan 10, 2021

A static SVG composition demonstrates primitive shapes and CSS styling within a D3 version 6 setup. The example shows circles, rectangles, lines, and a path grouped and transformed via SVG attributes, including scaling and translation. CSS classes apply stroke properties to line elements and redefine the path’s stroke color. The page uses `d3.select` from the D3 library to replace the body text with “Hello D3 version 6,” while the HTML structure and stylesheet handle all visual rendering without interactive behavior.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Hello World

This example displays basic SVG shapes—rectangles, circles, lines, and a path—arranged in a static composition with varied fills, strokes, and transforms. It demonstrates fundamental SVG rendering and styling through CSS classes, including stroke properties and line joins. The code imports D3’s `select` function to update a message element, though the visible output focuses on the hand-coded markup in `index.html`. The visualization uses inline SVG with a 1.5 scale transform and no dynamic data, serving as a simple technical showcase.

Nntds12

83% match

Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe

82% match

Loading thumbnail…

SVG with CSS

This example demonstrates how to combine SVG shapes with CSS styling and D3.js version 7. It shows circles, rectangles, lines, and paths rendered in an SVG canvas, with CSS classes controlling stroke properties like color and width. The code uses d3.select to insert text into the page, while the SVG elements themselves rely on standard SVG attributes for positioning and fills. A second SVG contains a single line element with inline stroke styling. The example highlights how CSS can be applied to SVG elements through class selectors.

Mmomer99

82% match

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

82% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and complex paths, rendered directly in an HTML document. It shows how static SVG elements can be styled with attributes like fill color, stroke, and stroke-width to create basic geometric compositions. The code uses no JavaScript for visualization logic, but includes a minimal `index.js` that imports `select` from D3 version 7 and sets text content on the page body. The raw SVG markup is authored manually, with all shapes defined inline in the HTML.

SSardar Abdullah Khawar

82% match

Loading thumbnail…

Shapes with SCG and CSS

This example shows how basic SVG shapes—circles, rectangles, lines, and paths—are styled and transformed directly in an HTML document using D3’s `select` method alongside plain CSS. The visualization demonstrates static geometric composition with fills, strokes, and grouped transformations like `scale` and `translate`. The code uses D3 version 7 for a simple text insertion, while styling comes from an external stylesheet that defines line and path appearance. No interactive behavior or data binding is present; the focus is purely on rendering and CSS-based presentation of vector graphics.

Bbenroston

82% match