Skip to content

Instantly share code, notes, and snippets.

@seemantk

seemantk/README.md

Last active October 12, 2018 15:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seemantk/10486785028863b8e55885221dbab779 to your computer and use it in GitHub Desktop.
Save seemantk/10486785028863b8e55885221dbab779 to your computer and use it in GitHub Desktop.
Download ZIP
Halos 2: Experimental Halo (The "Combine" Trick)
Raw
README.md

This is an experiement with the Bat + Halo for a subset of the Batsymbols. By adding one more object into the situation (the Halo), the complexity of the entire picture has increased dramatically (maybe four-fold, if I got the maths right).

Here we have all the non-intersecting round/oval halos. That is to say, these halos are entirely disjointed from their associated Bats. (Unlike 2004's New Adventures of B&R, 2009's Batman RIP and 2010's Flashpoint, where part of the halo is obscured by the main logo).

This technique uses Inkscape's "combine" feature to turn the Bat and the Halo into a single path. This way, the logos can simply be plugged into the existing code and work.

The Halo is itself a "combine" of two shapes:

  • The inner ring of the halo is a 28-point shape.
  • The outer ring is an 8-point shape.

You can see the uneven distribution take effect in the transitions to/from the 1993 Speeding Bullets batlogo, the single non-rounded halo in this bunch.

The Combine Technique

SVG path strings don't have a specially defined starting point and ending point. Two strings can form the same shape, but look different from one another.

So, this technique relies on the shapes being defined in the same order for each logo.

Display the source blob
Display the rendered blob
Raw
batman-logos.svg
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>HaloBat</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="batsymbols">
<svg width="900" height="477" viewBox="0 0 150 80">
<path id="bat"></path>
</svg>
<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><!--.batsymbols-->
<script src="https://d3js.org/d3.v5.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#bat")
.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")
.call(crossfade)
;
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); })
;
function crossfade(sel) {
sel
.transition()
.delay(duration)
.each(function() {
d3.select(this)
.text(function() { return end[this.className]; })
;
})
;
} // crossfade()
} // animate()
} // mainfn()
</script>
Raw
sigils.tsv
We can make this file beautiful and searchable if this error is corrected: It looks like row 7 should actually have 6 columns, instead of 5. in line 6.
id year name location medium comment
1964-comics-sigil Batman Comic Batman's Chest Sigil Comics first yellow oval
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
1986-novel-sigil-1 The Dark Knight Returns, Book 1 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-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-sigil Speeding Bullets Superman's Chest Sigil Comics as drawn by Eduardo Barreto
1995-movie-sigil Batman Forever Batman's Chest Sigil Movie as worn by Val Kilmer
1997-movie-sigil Batman & Robin Batman's Chest Sigil Movie as worn by George Clooney
2004-cartoon-sigil The Batman Batman's Chest Sigil Cartoon
2008-tv-sigil Brave and the Bold Batman's Chest Sigil Cartoon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment