Skip to content

Instantly share code, notes, and snippets.

@seemantk

seemantk/README.md

Last active September 18, 2018 22:04
Show Gist options
  • Save seemantk/4269add305960eb2afee6f33a92439b0 to your computer and use it in GitHub Desktop.
Save seemantk/4269add305960eb2afee6f33a92439b0 to your computer and use it in GitHub Desktop.
Download ZIP
78 Years of Batman Logos
Raw
README.md

The logo set is well expanded from 75 Years of Batman. Additionally, the lower wings have all been redesigned: the nodes in the two-wing-point layouts are no longer equally divided. Instead, the sections next to the tail have 5 nodes, including the 2 surrounding cusps. The sections next to the outer wings have 9 nodes. This allows for more object-constancy when transitioning between 2-wing-points and 3-wing-points (eg. the 1989 sigil and title).

This time, a tsv file contains data about each logo, such as its year of use, the title of the piece in which it was used, as well as a comment (such as artist or actor). Thanks to Doni for prodding.

Changes

Bat Symbols

Several new ones have been added:

Wing-point Transitions

The transitions between symbols have been cleaned up further. In "75 Years.." the wing points were appearing and disappearing into air. For example when switcxhing between the two 1989 Michael Keaton movie symbols, one wingpoint disappears and two appear.

In this new set, I've gone for increased object constancy. The inside wing point (closest to the tail) will always remain. The second will appear and disappear from the contours.

This is still not ideal, as the wingpoints should ideally fold in and out from other wingpoints. However, the resultant transitions are very nasty.

Display the source blob
Display the rendered blob
Raw
batman-logos.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>InfoBat</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: yellow;
}
h2,h3,h4 {
margin-bottom: 0;
}
h2,h3 {
margin-top: 0;
}
svg {
height: 80%;
}
.name {
text-transform: uppercase;
font-variant: small-caps;
}
.medium {
text-transform: uppercase;
}
.comment {
font-style: italic;
}
</style>
</head>
<body>
<div class="batlogos">
<svg width="900" height="420" viewBox="0 0 150 80">
<path id="batlogo"></path>
</svg>
<div class="explanation">
<h2><span class="name"></span> (<span class="year"></span>)</h2>
<h4><span class="medium"></span>: <span class="location"></span> <span class="comment"></span></h4>
</div><!--.explanation-->
</div><!--.batlogos-->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.tsv("sigils.tsv", ingest)
.then(mainfn)
;
function ingest(row) {
row.year = row.year || row.id.split('-')[0];
return row;
} // ingest()
function mainfn(sigils) {
var logos = d3.map({})
, paths = []
;
d3.xml("batman-logos.svg")
.then(function(xml) {
Array.from(xml.getElementsByTagName('path')).reverse()
.forEach(function(d) {
logos.set([d.getAttribute('id')], d.getAttribute('d'));
})
;
d3.select("path#batlogo")
.call(animate)
;
})
;
var duration = 2500
, ease = d3.easeQuad
;
function animate(sel) {
var start = sigils.shift()
, end = sigils[0];
sigils.push(start);
d3.selectAll(".name, .year, .medium, .location, .comment")
.transition()
.delay(duration)
.each(function() {
var self = d3.select(this);
self.text(function() { return end[self.attr("class")]; });
})
;
sel.datum({start, end})
.transition()
.duration(duration)
.ease(ease)
.attrTween("d", function(d) {
return d3.interpolate(logos.get(d.start.id), logos.get(d.end.id));
})
.on("end", function() { sel.call(animate); })
;
} // animate()
} // mainfn()
</script>
Raw
sigils.tsv
We can make this file beautiful and searchable if this error is corrected: It looks like row 4 should actually have 6 columns, instead of 5 in line 3.
id year name location medium comment
1939-comics-sigil1 Detective Comics Batman's Chest Sigil Comics first appearance of Batman
1939-comics-sigil2 Detective Comics Batman's Chest Sigil Comics updated
1940-comics-title Batman Title Logo Comics
1957-comics-title Batman Title Logo Comics
1960-comics-title Batman Title Logo Comics
1964-comics-sigil Batman Comic Batman's Chest Sigil Comics first yellow oval
1965-comics-title Batman Title Logo Comics
1966-tv-logo-scenes Batman Scene Transitions TV Show
1966-tv-logo-car Batman Batmobile Car Doors TV Show
1966-tv-sigil Batman Batman's Chest Sigil TV Show as worn by Adam West
1970-comics-sigil Batman Batman's Chest Sigil Comics as drawn by Neal Adams
1970-comics-title Batman Title Logo Comics as drawn by Neal Adams
1977-cartoon-title The New Adventures of Batman Title Logo Cartoon
1983-comics-title Batman and the Outsiders Title Logo Comics
1986-comics-title Batman Title Logo Comic
1986-novel-promo The Dark Knight Returns Promotional Logo Graphic novel
1986-novel-sigil-1 The Dark Knight Returns, Book 1 Batman's Chest Sigil Graphic novel as drawn by Frank Miller
1986-novel-sigil-2 The Dark Knight Returns, Book 3 Batman's Chest Sigil Graphic novel as drawn by Frank Miller
1987-comics-sigil Batman Batman's Chest Sigil Comic as drawn by Norm Breyfogle
1989-movie-logo Batman Title Logo Movie
1989-comics-title Batman Title Logo Comics
1989-movie-sigil Batman Batman's Chest Sigil Movie as worn by Michael Keaton
1992-movie-sigil Batman Returns Batman's Chest Sigil Movie as worn by Michael Keaton
1993-comics-logo Batman Title Logo Comics
1993-comics-promo Knightfall Promotional Logo Comics
1993-comics-sigil Speeding Bullets Superman's Chest Sigil Comics as drawn by Eduardo Barreto
1989-movie-logo 1993 Batman Batman's Chest Sigil The Animated Series
1995-movie-sigil Batman Forever Batman's Chest Sigil Movie as worn by Val Kilmer
1996-comics-title Batman Title Logo Comics
1996-comics-sigil The Long Halloween Batman's Chest Sigil Comics as drawn by Tim Sale
1997-movie-sigil-batgirl Batman & Robin Batgirl's Chest Sigil Movie as worn by Alicia Silverstone
1997-comics-sigil Gotham Knights Batman's Chest Sigil Comics
1999-comics-sigil-1 Batman War on Crime Batman's Chest Sigil Comics as drawn by Alex Ross
1999-comics-sigil-2 Batman Beyond Future Batman's Chest Sigil Comics as drawn on Terry McGinness
2000-comics-title-batgirl Batgirl Title Logo Comics
2000-comics-logo Gotham Knights Title Logo Comics
2002-comics-sigil Batman Hush Batman's Chest Sigil Comics as drawn by Jim Lee
2004-cartoon-title The Batman Title Logo Cartoon
2004-comics-sigil Superman and Batman Batman's Chest Sigil Comics as drawn by Michael Turner
2005-movie-logo Batman Begins Title Logo Movie
2005-movie-sigil Batman Begins Batman's Chest Sigil Movie
2005-comics-sigil-1 Batman and Robin The Boy Wonder Batman's Chest Sigil Comics
2005-comics-sigil-2 Superman BatZarro's Chest Sigil Comics as drawn by Ed McGuiness
2007-comics-title Batman and Superman vs Aliens and Predator Title Logo Comics
2008-tv-title Brave and the Bold Title Logo Cartoon
2008-tv-sigil Brave and the Bold Batman's Chest Sigil Cartoon
2008-movie-title The Dark Knight Title Logo Movie
2005-movie-logo 2008 The Dark Knight Batman's Chest Sigil Movie as worn by Christian Bale
2009-game-sigil Arkham Asylum Title Logo & Chest Sigil Video game
2009-comics-sigil Batman RIP Batman's Chest Sigil Comics as drawn by Tony Daniel
2009-comics-title Batman and Robin Title Logo Comics
2010-comics-sigil Flashpoint Batman's Chest Sigil Comics alternate universe
2010-comics-title Batman Earth One Title Logo Comics
2011-comics-title The New 52 Title Logo Comics
2011-comics-sigil The New 52 Batman's Chest Sigil Comics
2012-movie-title The Dark Knight Rises Title Logo Movie
2005-movie-logo 2012 The Dark Knight Rises Batman's Chest Sigil Movie as worn by Christian Bale
2013-tv-title Beware the Batman Title Logo Animated Show
2013-comics-sigil Beware the Batman Batman's Chest Sigil Animated Show
2017-movie-title Batman vs Superman: Dawn of Justice Title Logo Movie
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment