Some fun with SVG

100%

Some fun with SVG

✓ Published0🌍 Public

Last edited Mar 7, 2023

Created on Mar 7, 2023

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.

AI-generated description

Nothing important here! :D

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG with HTML

This example demonstrates a static SVG scene composed of basic geometric shapes—a magenta circle, a red rectangle, a thick black line, and a triangular path—drawn directly in the HTML markup with fixed coordinates and styling. The page also includes a JavaScript module that imports D3’s `select` function to update the text of a `#message` div, while a separate CSS file sets a cyan background and hides overflow. The rendering relies entirely on SVG elements defined in the source, with no data binding or interaction.

SSushant Kunkekar

85% match

Loading thumbnail…

hello

This example shows a static SVG canvas containing basic geometric shapes—a circle, a stroked rectangle, a blue line, and a black path—placed at fixed coordinates. The page demonstrates a minimal D3 setup by using the `select` API from D3 version 6 to replace the body text with a greeting. The visual output is hand-coded in HTML, with no data binding or dynamic behavior, and rendering is done via inline SVG elements. The accompanying README references a YouTube tutorial for starting with D3.

HHeet Bhatt

85% match

Loading thumbnail…

SVG Fun

This example introduces D3 version 6 and 7 syntax by rendering basic SVG shapes—a pink circle and a red rounded rectangle—directly in an HTML page, with a fixed 960×500 SVG viewport. The code uses `d3.select` from the D3 library to append text to the document body, demonstrating the module’s import style. The accompanying README and embedded YouTube tutorial guide users through version differences. Rendering relies on plain SVG markup for shapes, not data joins or interactive features, serving as a minimal starting point for learning D3’s setup and drawing primitives.

GGoldSupplyChainz

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering and text output within a web page. It draws red and green circles, a yellow rectangle with a blue stroke, and an invalid triangle element, all inside a 960x500 SVG canvas. The code uses D3 version 7's `select` API to set the body text to "Hello D3 version 7." The visualization is pure SVG markup defined in static HTML, with no data source or dynamic interaction.

NNatália

84% match

Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML page, showing a green circle, a navy line, and an empty path element. The visualization uses the SVG specification directly in the markup rather than generating shapes programmatically. The accompanying JavaScript imports the `select` function from D3 version 7 and writes "Hello D3 version 7" into the document body, illustrating simple DOM manipulation. The code serves as an introductory template for combining static SVG graphics with the D3 library's selection API.

FFouzia A.

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements, including rectangles, circles, lines, and paths, using static coordinates and styling attributes. It showcases basic D3 version 7 usage via `select` from the `d3` module to set the body text. The visualization is rendered directly in the browser through an inline SVG element with a width of 960 and height of 500, featuring shapes such as a blue outlined rectangle, red and default-colored circles, a yellow rectangle with a navy stroke, a diagonal line, and a black polyline path. The code also embeds an introductory video and README explaining D3 version 6.

MMatheesha Yapa

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