svg sample

100%

✓ Published0🌍 Public

Last edited May 16, 2023

Created on May 16, 2023

This example displays the Wikipedia wordmark SVG logo inside a 500 by 500 pixel canvas, rendered as a static vector graphic. The page fetches the logo from the Wikipedia static-content URL and uses D3.js’s `select` and `xml` APIs to parse the external SVG file, then appends the parsed child nodes into an SVG container created with `d3.select`. The body’s 13-em font size is the only styling, with no interaction or animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

svg

This example shows a simple SVG face composed of a large yellow circle with a black outline and a smaller black circle representing an eye, centered on a 960×500 canvas. The code uses D3 v6’s `select` and `append` methods to create SVG elements, reading dimensions from the `width` and `heigth` attributes of the root `<svg>` element. The `heigth` attribute is misspelled in the HTML, but the JavaScript accesses it consistently, demonstrating basic SVG drawing with D3 selections and attribute chaining.

NNicolás Romero

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

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

71% match

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

71% match

Loading thumbnail…

SVG Day One

A single static SVG circle centered at coordinates (100, 100) with a radius of 50 is drawn on a 960-by-500 canvas. The page’s body text is replaced with the phrase “Hello D3 version 7” using D3’s `select` API, imported from the `d3` module. The example demonstrates basic SVG shape creation alongside D3’s DOM manipulation, with the SVG markup written directly in the HTML and the text update performed via JavaScript.

DDea Bardhoshi

71% match

Loading thumbnail…

Hello HTML

This example shows a simple 960 by 500 pixel SVG canvas containing a large yellow circle framed by a black stroke, accompanied by two smaller unfilled circles. The artwork is produced directly in the body of an HTML document using inline SVG elements, with basic CSS to remove page margins and hide overflow. It demonstrates a minimal, self-contained web page where all visual elements are declared through SVG markup rather than JavaScript libraries, making it a bare-bones introduction to static vector rendering in a browser.

Ggwilki2

71% match

Loading thumbnail…

SVG Me

This example displays two concentric circles rendered directly inside an HTML page using pure SVG. A large blue circle with an orange stroke and a smaller red circle with a teal stroke are positioned together to create a simple layered composition. The code relies on inline SVG markup with standard attributes such as `cx`, `cy`, `r`, and `stroke-width`, avoiding any JavaScript or external libraries. The shape definitions are written directly in the `index.html` file, demonstrating how vector graphics can be embedded without additional frameworks.

Wwgloss

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

71% match