xxxxxxxxxx<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