Logo design

100%

✓ Published1🌍 Public

Last edited Jan 30, 2019

Created on Jan 29, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Logo

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.

Sscheenmi@gmail.com

77% match

Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Sol_Lewit

The visualization generates a full-screen pattern of repeating VizHub logos arranged in both horizontal and vertical bands, with alternating white and black circular masks that create an interlocking two-tone effect. It uses D3 v6's `select`, `range`, and `path` modules to render SVG paths, scaling and rotating the logo via `transform` strings. The `mask` elements with `rect` and `circle` shapes define the visible regions. The composition adapts to the window dimensions, computing row and column counts dynamically to fill the viewport with the repeating logo geometry.

JJimMaltby

72% match

Loading thumbnail…

Hello VizHub

A yellow circle with a simple face—two black-outlined eyes—is centered in an SVG canvas. Built with D3 v5, the code uses `d3.select` and `d3.append` to create circular and group elements, with `attr` calls positioning the eyes via fixed pixel offsets. The visualization demonstrates basic SVG rendering and DOM manipulation within the VizHub framework, using the provided `styles.css` for font styling.

VVijay

72% match

Loading thumbnail…

Hello VizHub!

A single gray circle is centered on a solid background, demonstrating a minimal D3.js visualization. The code selects an SVG element using `d3.select` and appends a circle, setting its radius and positioning its center coordinates. The example imports D3 v5 and uses an ES6 module to define a message string, though the message is not displayed. The page relies on a stylesheet for typography and layout, with the circle rendered entirely through D3’s SVG manipulation.

Aabreudude

71% match

Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Band

A horizontal band of repeated VizHub logos spans the full screen width, with each logo rendered in black as a single SVG path. The code uses D3's `select`, `range`, and `path` functions to generate the repeating pattern, calculating the number of iterations based on the viewport width and a fixed logo scale of 0.05. The `join('path')` method binds the range data to SVG path elements, applying a scale and translate transform to position each logo. The original logo path data is stored as a constant string and reused for every repetition.

JJimMaltby

71% match

Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Vertical Bands

The visualization displays the VizHub logo repeated as a single vertical band of rotated, scaled paths spanning the full screen height. A single SVG path is replicated across the viewport using a D3 data join, with each iteration positioned by a transform function that calculates the x-coordinate based on the logo’s original length and a 0.05 scale factor, plus a 90-degree rotation. The code imports `select`, `range`, and `path` from the D3 library to generate the repeating pattern, rendering the black-and-white logo in a continuous column from top to bottom.

JJimMaltby

71% match