D3 Logo

100%

✓ Published0🌍 Public

Last edited Jun 21, 2017

Created on Jun 21, 2017

This example displays the D3.js logo as a purely vector-based SVG graphic. It defines a custom path, assigned the ID "deethree", which encodes the logo's shape through a series of arc and line commands. The graphic is first rendered as a thick black outline using a `<use>` element with a stroke, then duplicated with a white fill. The implementation directly leverages the SVG `<defs>` and `<use>` tags within the HTML markup, with no JavaScript libraries involved.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Outline Logo

This example displays the D3 logo as a high-contrast outline, designed for the official D3 sticker. It renders two overlapping SVG `<use>` elements referencing a single `<path>` definition: the first applies a thick black stroke, while the second fills the shape with white to create the outlined effect. The logo is drawn entirely with hand-coded path data, and the page styles set a light background. No JavaScript or D3 APIs are used; the visualization relies solely on static SVG markup.

Mmbostock

85% match

Loading thumbnail…

D3 Logo

The D3 logo is rendered as a stylized “d3” in a 400×400 SVG viewport, with the letterforms clipped from three overlapping linear gradients in orange and red. The example demonstrates the official logo artwork directly from the d3-logo repository, embedded via an `<img>` tag in a minimal HTML page. The SVG uses a `clipPath` to define the letter shapes, while the gradients—`gradient-1`, `gradient-2`, and `gradient-3`—paint the clipped areas with smooth color transitions. The rendering is static, with no animation or interaction.

Mmbostock

84% match

Loading thumbnail…

Revised D3 Logo

This example presents a geometrically precise reconstruction of the D3 logo, replacing cubic Béziers with strictly circular arcs and straight lines. The SVG rendering shows the logo’s path alongside a grid of construction lines, key anchor points, and intersecting circles that define the arcs. The code computes several points via circle-line and circle-circle intersection, using SVG elements like `<path>`, `<circle>`, and `<line>` to visualize the underlying geometry. The result highlights how the logo’s shape is derived from a small set of overlapping radii and horizontal guides.

Mmbostock

80% match

Loading thumbnail…

Animated D3 Logo

The D3 logo animates as if hand-drawn, with its "d" and "3" shapes tracing their strokes in sequence. The SVG paths are initially hidden, then revealed using stroke-dasharray transitions. Each path’s total length determines its animation duration, and transitions are queued with delays so they draw one after another. The example uses d3.select and d3.selectAll to manage the paths, with the animate function triggered on load, click, or touch.

Mmbostock

80% match

Loading thumbnail…

SVG - The HTML5 Logo

The SVG HTML5 logo demonstrates how vector shapes can be constructed entirely through path commands, with no external libraries. Six paths combine to render the familiar orange shield and white inner shapes using absolute commands like `M`, `H`, and `L`, alongside relative `m`, `h`, and `l` variants. Each path uses fill colors, and the `d` attribute encodes the drawing instructions. The example serves as a standalone illustration of the SVG specification, showing both coordinate systems for creating compact geometric logos.

AAxVa 🐍 💪

74% match

Loading thumbnail…

Logo design in Color

A logo design is drawn on an SVG canvas using D3 v5, featuring a black rounded rectangle with white text and geometric elements. The design incorporates two text labels, "V z" and "Hub", composed in the Ubuntu Mono font. A set of circles and a thin rectangle animate into place, using D3's `transition` API with staggered delays and durations to create a sequential reveal effect. The visualization demonstrates the application of basic SVG shapes, styling via CSS classes, and D3 animation for a simple brand identity composition.

NNita

74% match

Loading thumbnail…

Logo design

A simple SVG logo presents the wordmark "V z Hub" inside a black rounded rectangle, paired with a white circular dot and stem that form the letter "i." D3 selection methods append the SVG container, groups, and individual shape elements, while CSS classes style the rectangle and large monospaced text. The layout positions elements with fixed pixel coordinates derived from the 960-by-800 viewport, demonstrating a static, code-driven design without interaction or data binding.

NNita

73% match

Loading thumbnail…

D3 SVG

This example demonstrates basic SVG shapes rendered with D3.js, showing how static geometric elements can be drawn directly in a web page. It displays a blue circle and a rectangular outline with a stroke, positioned at fixed coordinates within an SVG canvas of 500 by 960 pixels. The code uses the D3.js library to construct the SVG container and its child elements, with circle and rect tags defining the visual properties. The rendering approach relies on D3’s SVG manipulation capabilities, though no data binding or dynamic updates occur, as the shapes are hardcoded in the HTML structure.

MMohd Sameer

73% match