Halos 2: Experimental Halo (The "Combine" Trick)

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.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>HaloBat</title>

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); })
          ;

} // mainfn()
</script>

https://d3js.org/d3.v5.js