Logo

100%

✓ Published0🌍 Public

Last edited Dec 12, 2022

Created on Dec 12, 2022

The visualization displays the text "vis.my.part" as a logo, with two layered orange shadow copies that animate horizontally to create a depth effect against the dark background. The text is rendered as individual SVG elements using D3 v7's data join, with each character positioned via transform attributes. The animation uses D3's transition system with a 2500-millisecond duration to shift the shadow layers by incremental pixel offsets, while the foreground remains static. The design utilizes custom spacing calculations, branding colors from CSS variables, and the Major Mono Display font.

AI-generated description

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Logo design

A black rounded rectangle on a gray background features the white text "V z Hub" in a monospace font, accompanied by a stylized "i" made of one large and three small white circles connected by a curved white rectangle. The logo components appear with a staggered animation, as the circles and rectangle scale up from a radius of zero using D3 v5 transitions with specified delays and durations. The SVG is created programmatically via D3's `select` and `append` methods, with styling defined in an external CSS file.

NNita

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

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

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

71% match

Loading thumbnail…

D3 Logo

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.

LLGBY4

71% match

Loading thumbnail…

stars

This example creates an animated typography intro where text lines ("Javascript", "meets", "deep learning", "with", "TensorFlow.js") are revealed sequentially. Each line is rendered as an `<h1>` element, while the final line is split into individually colored spans. The animation uses an SVG `<textPath>` to define a path for each header, and a starfield particle system (rendered on canvas with blur and contrast filters) bursts along these paths as the text fades in. The text transitions are staggered, with each line's star trail animating along its path in sequence, and the final line triggers a longer particle effect. The design uses the Google Font "Indie Flower" and a dark background, with each letter of the last line assigned a different color.

EEE2dev

69% match

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

69% match