| <!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.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#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> |
| id year name location medium comment | |
| 1940-comics-title Batman Title Logo Comics | |
| 1949-movie-sigil Batman Movie Serials Batman's Chest Sigil Movies as worn by Robert Lowery | |
| 1957-comics-title Batman Title Logo Comics | |
| 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 | |
| 1991-comics-title Batman Red Rain Title Logo Comics as drawn by Kelly Jones | |
| 1992-movie-sigil Batman Returns Batman's Chest Sigil Movie as worn by Michael Keaton | |
| 1993-cartoon-title Batman The Animated Series Title Logo Cartoon | |
| 1989-movie-logo 1993 Batman The Animated Series Batman's Chest Sigil Cartoon | |
| 1993-comics-sigil Speeding Bullets Superman's Chest Sigil Comics as drawn by Eduardo Barreto | |
| 1994-cartoon-title The New Adventures of Batman and Robin Title Logo Cartoon | |
| 1995-movie-promo Batman Forever Promotional Logo Movie | |
| 1995-movie-sigil Batman Forever Batman's Chest Sigil Movie as worn by Val Kilmer | |
| 1996-comics-title Batman Title Logo Comics | |
| 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 | |
| 2006-comics-title Batman Title logo Comics | |
| 2008-tv-sigil Brave and the Bold Batman's Chest Sigil Cartoon | |
| 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 | |
| 2014-cartoon-sigil DC Animated Movies Batman's New Chest Sigil Animated Show | |
| 2014-75anniv-logo 75th Anniversary Promotional Logo Comics |
