unconf badge

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500">
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    <feBlend in="SourceGraphic" in2="goo" />
  </filter>
</svg>
<style>
html, body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select('svg'),
    width = +svg.attr('width'),
    height = +svg.attr('height');

/******************************************************************************
 * Colors
 * https://github.com/Jam3/nice-color-palettes
 */

var colors = ['#000000', '#547980', '#45ada8', '#9de0ad', '#e5fcc2'];

/******************************************************************************
 * Vars
 */

var DURATION = 7500;
var PAD = 2000;
var HEADER_SHIFT = 0;
var ROTATION = 30;

var dt = 0,
    tInit = performance.now();

/******************************************************************************
 * Layers
 */

var bgLayer = svg.append('g');

var gooLayer = svg.append('g')
  .style('filter', 'url(#goo)')
  .style('z-index', 1);

/******************************************************************************
 * Bars
 */

var i = 0,
    barWidth = 100,
    numBars = Math.ceil((width + PAD) / barWidth),
    bars = Array.apply(null, new Array(numBars)).map(() => ({index: i++}));

var elevatedBars = [];
bars = bars.filter((d) => {
  if (d.index % colors.length === 0) {
    elevatedBars.push(d);
    return false;
  }
  return true;
});

var barSelection = bgLayer
  .append('g')
    .attr('transform', `translate(0,0), rotate(${ROTATION})`);

var elevatedBarSelection = gooLayer
  .append('g')
    .attr('transform', `translate(0,0), rotate(${ROTATION})`);

[[bars, barSelection], [elevatedBars, elevatedBarSelection]]
  .forEach((pair) => {
    pair[1].selectAll('rect')
      .data(pair[0])
      .enter().append('rect')
        .attr('x', (d) => d.index * 100 - PAD / 2)
        .attr('y', -PAD)
        .attr('width', barWidth)
        .attr('height', height + PAD)
        .attr('fill', (d) => colors[d.index % colors.length]);
  });

/******************************************************************************
 * Circles
 */

i = 1;
var numCircles = 3,
    circleRadius = 60,
    circles = Array.apply(null, new Array(numCircles))
      .map(() => ({x: i++ * width / (numCircles + 1)}));

var circleSelection = gooLayer.append('g');

circleSelection.selectAll('circle')
  .data(circles)
  .enter().append('circle')
    .attr('cx', (d) => d.x)
    .attr('cy', height / 2 + HEADER_SHIFT)
    .attr('r', circleRadius)
    .attr('fill', colors[0]);

/******************************************************************************
 * Animation
 */

requestAnimationFrame(animate);

function animate () {
  requestAnimationFrame(animate);

dt = (performance.now() - tInit) % DURATION / DURATION;

var shift = dt * 1000;
  [barSelection, elevatedBarSelection].forEach((layer) => {
    layer.attr('transform', `translate(0,${shift}), rotate(${ROTATION})`);
  });
}

</script>

https://d3js.org/d3.v4.min.js