D3 Logo for VisFest

Created for d3 VisFest unconf 2016

uses forceSimulation and transitions.

forked from kenpenn's block: D3 Logo for VisFest

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>unconf d3</title>
  <style>
    body {margin:0;}
    svg { background: #000; }
  </style>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="lg-dt" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0" stop-color="#f26d58"></stop>
      <stop offset="1" stop-color="#f9a03c"></stop>
    </linearGradient>
    <linearGradient id="lg-b" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0" stop-color="#f9a03c"></stop>
      <stop offset="1" stop-color="#f7974e"></stop>
    </linearGradient>
    <linearGradient id="lg-3t" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0" stop-color="#b84e51"></stop>
      <stop offset="1" stop-color="#f68e48"></stop>
    </linearGradient>
    <linearGradient id="lg-3m" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0" stop-color="#f68a49"></stop>
      <stop offset="1" stop-color="#f9a03C"></stop>
    </linearGradient>
  </defs>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script>
  var svg = d3.select('svg');
  var points = [[465.500,366.708], [401.833,303.042], [410.332,287.251], [415.153,269.188], [415.153,250], [415.153,188.095], [364.970,137.912], [303.065,137.912], [269,137.912], [269,50], [303.065,50], [413.522,50], [503.065,139.543], [503.065,250], [503.065,293.558], [489.141,333.863], [465.500,366.708], [465.500,366.708], [429.192,417.153], [369.964,450], [303.065,450], [269,450], [269,362.087], [303.065,362.087], [345.781,362.087], [382.916,338.193], [401.833,303.042], [465.500,366.708], [688.732,349.524], [694.983,314.612], [685.780,278.070], [662.421,250], [692.686,213.630], [699.187,163.040], [679.103,120.200], [659.019,77.360], [615.973,49.999], [568.659,50], [428,50], [428,50], [462.611,71.680], [491.004,101.971], [510.401,137.912], [568.654,137.912], [580.825,137.912], [592.071,144.405], [598.156,154.945], [604.242,165.485], [604.242,178.470], [598.156,189.010], [592.071,199.551], [580.825,206.043], [568.654,206.043], [545.252,206.043], [688.732,349.524], [545.252,206.043], [689.029,349.821], [687.173,360.040], [683.992,370.117], [679.453,379.799], [659.369,422.639], [616.323,450.000], [569.009,450], [548.791,450], [491.233,392.441], [498.479,382.870], [505.009,372.726], [510.751,362.087], [569.004,362.087], [581.175,362.087], [592.421,355.594], [598.506,345.054], [604.592,334.514], [604.592,321.529], [598.506,310.989], [592.421,300.448], [581.175,293.956], [569.004,293.956], [534.938,293.956], [540.445,264.910], [540.445,235.089], [534.938,206.043], [545.252,206.043], [548.791,450], [428,450], [452.437,434.692], [473.774,415.092], [491.034,392.242], [548.791,450]];
  var colors = ['hsl(341, 100%, 50%)', 'hsl(359, 100%, 50%)', 'hsl(18, 100%, 50%)', 'hsl(35, 100%, 50%)', 'hsl(52, 100%, 50%)', 'hsl(83, 100%, 50%)', 'hsl(127, 100%, 50%)', 'hsl(160, 100%, 50%)', 'hsl(190, 100%, 50%)', 'hsl(212, 100%, 50%)', 'hsl(227, 100%, 50%)', 'hsl(242, 100%, 50%)', 'hsl(259, 100%, 50%)', 'hsl(273, 100%, 50%)', 'hsl(296, 100%, 50%)'];
  var cLen = colors.length;
  var clx = 0;
  var circles = [];

points.forEach(function(point) {
    clx = clx < cLen ? clx : 0;
    var circle = {};
    circle.reqX = point[0];
    circle.reqY = point[1];
    circle.fill = colors[clx];
    circles.push(circle);
    clx += 1;
  });

var sim = d3.forceSimulation()
        .force('charge', d3.forceManyBody().distanceMax(50))
        .force('center', d3.forceCenter( 480, 250 ))
        .alphaDecay(0.06);

var circs = svg.selectAll('circle')
        .data(circles)
        .enter()
        .append('circle')
          .attr('r', 5)
          .attr('fill', function(d) { return d.fill })
          .attr('transform', 'translate(480,250)')
          .attr('opacity', 1);

sim
    .nodes(circles)
    .on('tick', function() {
      circs
        .attr('transform', function(d) {
              return 'translate(' + d.x + ',' + d.y + ')';
        });
    })
    .on('end', function() {
      circs.each(function(p, i) {
        d3.select(this)
          .transition()
          .duration(500)
            .attr('transform', function(d) {
              return 'translate(' + d.reqX + ',' + d.reqY + ')';
            })
          .on('end', function () {
              if (i + 1 == cLen) {
                blowUpCircs();
                appendPaths();
              }
          });
      });
    });

function blowUpCircs() {
    circs
      .transition()
      .delay(200)
      .duration(1000)
      .attr('r', 30)
      .attr('opacity', 0);
  }

function appendPaths() {
    var paths = [{ id: 'dee-top', style: 'fill:url(#lg-dt)', points: [['M465.500', 366.708], ['L401.833', 303.042], ['C410.332', 287.251], [415.153, 269.188], [415.153, 250], ['C415.153', 188.095], [364.970, 137.912], [303.065, 137.912], ['L269', 137.912], ['L269', 50], ['L303.065', 50], ['C413.522', 50], [503.065, 139.543], [503.065, 250], ['C503.065', 293.558], [489.141, 333.863], [465.500, 366.708]] }, { id: 'dee-bottom', style: 'fill:url(#lg-b)', points: [['M465.500', 366.708], ['C429.192', 417.153], [369.964, 450], [303.065, 450], ['L269', 450], ['L269', 362.087], ['L303.065', 362.087], ['C345.781', 362.087], [382.916, 338.193], [401.833, 303.042], ['L465.500', 366.708]] }, { id: 'three-top', style: 'fill:url(#lg-3t)', points: [['M688.732', 349.524], ['C694.983', 314.612], [685.780, 278.070], [662.421, 250], ['C692.686', 213.630], [699.187, 163.040], [679.103, 120.200], ['C659.019', 77.360], [615.973, 49.999], [568.659, 50], ['L428', 50], ['L428', 50], ['C462.611', 71.680], [491.004, 101.971], [510.401, 137.912], ['L568.654', 137.912], ['C580.825', 137.912], [592.071, 144.405], [598.156, 154.945], ['C604.242', 165.485], [604.242, 178.470], [598.156, 189.010], ['C592.071', 199.551], [580.825, 206.043], [568.654, 206.043], ['L545.252', 206.043], ['L688.732', 349.524]] }, { id: 'three-mid', style: 'fill:url(#lg-3m)', points: [['M545.252', 206.043], ['L689.029', 349.821], ['C687.173', 360.040], [683.992, 370.117], [679.453, 379.799], ['C659.369', 422.639], [616.323, 450.000], [569.009, 450], ['L548.791', 450], ['L491.233', 392.441], ['C498.479', 382.870], [505.009, 372.726], [510.751, 362.087], ['L569.004', 362.087], ['C581.175', 362.087], [592.421, 355.594], [598.506, 345.054], ['C604.592', 334.514], [604.592, 321.529], [598.506, 310.989], ['C592.421', 300.448], [581.175, 293.956], [569.004, 293.956], ['L534.938', 293.956], ['C540.445', 264.910], [540.445, 235.089], [534.938, 206.043], ['L545.252', 206.043]] }, { id: 'three-bottom', style: 'fill:url(#lg-b)', points: [['M688.732', 349.524], ['M548.791', 450], ['L428', 450], ['C452.437', 434.692], [473.774, 415.092], [491.034, 392.242], ['L548.791', 450]] }];

paths.forEach(function(path) {
      var d = '';
      var logoEl;
      path.points.forEach(function(point){
        d += point[0] + ',' + point[1] + ' ';
      });
      d += ' Z';
      logoEl = svg.append('path')
        .attr('id', path.id)
        .attr('style', path.style)
        .attr('opacity', 0)
        .attr('d', d);

logoEl
        .transition()
        .delay(600)
        .duration(600)
          .attr('opacity', 1)

});
  }
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js