Skip to main content
SimilarExport ZIP
100%

I'm...Batman

✓ Published0🌍 Public
663anp3ca
Last edited Oct 9, 2018
Created on Oct 9, 2018

This visualization traces 75 years of Batman logo designs by morphing one SVG path into the next. Animated transitions interpolate the path data over time, seamlessly transforming the bat symbol through its many historical iterations. Rendered as scalable vector graphics, the animation cycles through each logo in sequence, highlighting the evolution of the iconic emblem. The design is based on a traced illustration by "Happy Birthday Roboto," and the code is available under an MIT license, with Batman and the logo property of DC Comics.

AI-generated description

forked from <a href='http://bl.ocks.org/seemantk/'>seemantk</a>'s block: <a href='http://bl.ocks.org/seemantk/9c76316a783fe74132ab204828754cb7'>75 Years of Batman logos</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Batman as a HTML Starter

This example shows a stylized Batman logo rendered as an SVG using React and D3. The code draws the bat silhouette, face, eyes, and mouth using SVG primitives like polygons, polylines, and ellipses, with D3’s `arc()` generator defining the curved mouth shape. React manages the component structure, while D3 v6 provides the arc path calculations. The visualization is static, relying on hardcoded coordinates and shapes rather than data, and demonstrates a minimal integration of React for DOM rendering and D3 for geometry.

AArjun Rao
75% match
Loading thumbnail…

Batman

A dashboard displays Batman film metadata from a CSV file, loaded via D3's `csv` method. The page renders a poster image in SVG format with a WebGL background, alongside a legend and text describing the DCEU character. The code imports D3 utilities like `select` and `csvFormat` to parse and preview the first ten rows of data as JSON. The example uses D3 v5 within a Vue framework, demonstrating module imports and data loading from an external gist URL.

Cchsaisriharsha@gmail.com
66% 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
65% 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
64% match
Loading thumbnail…

SVG Fundamentals: Marvel Logo

This example recreates the Marvel Studios logo using only SVG fundamentals. It demonstrates text styling, gradient fills, and basic shape drawing, with bold serif typography for "MARVEL" and "STUDIOS" set against a gradient background. The code uses SVG `<rect>`, `<line>`, and `<text>` elements, along with `<linearGradient>` definitions, to construct the composition. It relies on CSS font settings and explicit `fill` properties to achieve the iconic look. No external libraries or data sources are involved; the visualization is purely a static SVG rendering.

LLeah Mitchell
61% 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 🐍 💪
61% match
Loading thumbnail…

Motif

The visualization loads an external SVG line drawing, then cycles through a random color palette, recoloring the background, filled shapes, and open path strokes with smooth 4-second transitions. The author uses a golden-ratio-based color generator to create harmonious hues, and filters the SVG paths into closed and open sets to apply distinct fill and stroke treatments. This creates an ambient, slowly shifting color motif.

BBrunoDumas
61% match
Loading thumbnail…

DC flag made from DC maps

This animation forms the District of Columbia’s flag by layering mapped geographic elements—the district outline, water features, and roads—over one another. Built with D3 v4 and Vue, the visualization uses SVG paths to render each layer, with animated transitions that progressively reveal the flag’s design as the DC map elements assemble into place. A zoom interaction lets viewers explore the underlying map details up close.

AAlexDaGr8
61% match