Personal Logo Iteration 3 by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js'></script>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
  <style>
    * {
      font-family: "Libre Baskerville";
      text-align: center;
      color: rgb(73, 193, 244);
    }
  </style>
</head>

<body>
  <canvas id='logo'></canvas>
  <h1>
    <div>Shirley Wu</div>
<!--     <div>Xueyang</div>
    <div>Wu</div> -->
  </h1>
  <script>
  	var canvas = document.getElementById('logo');
    canvas.width = 120;
    canvas.height = 250;
    var ctx = canvas.getContext('2d');
    ctx.globalCompositeOperation = 'overlay';
    
    var padding = 40;
    size = 100;
    var radius = size / 2;
    
    var cx = canvas.width / 2;
    var cy1 = padding + radius;
    var y = cy1 + radius * Math.sin(0.4 * Math.PI);
    var cy2 = y - radius * Math.sin(-0.1 * Math.PI);
    var start1 = 0.25;
    var start2 = -0.75;
    var end1 = 2;
    var end2 = 1;
    
    var yellow = [242, 242, 93];
    var magenta = [240, 68, 114];
    var cyan = [73, 193, 244];
    
    // draw fractals
    function drawFractals(times, startAngle, endAngle, cx, cy) {
      _.times(times, function(i) {
        var start = _.random(startAngle, endAngle);
        var end = start + _.random(0.25, .85);
        end = end > endAngle ? endAngle : end;
        var color = i % 2 ? cyan : yellow;
        var opacity = _.random(0.1, 0.35);
        ctx.fillStyle = 'rgba(' + color.join(',') + ',' + opacity + ')';

        ctx.beginPath();
        ctx.arc(cx, cy, radius, start * Math.PI, end * Math.PI);
        ctx.fill();
      });
    }
    
    function drawLogo() {
      ctx.clearRect(0, 0, 120, 250);
      var duration = 1000;
      var i = 0;
      d3.timer(function(elapsed) {
        i += 1;
        if (i % 5 === 0) {
          drawFractals(2, start1, end1, cx, cy1);
          drawFractals(2, start2, end2, cx, cy2);
        } 
        return elapsed >= duration;
      });
    }
    
    drawLogo();
    d3.select(canvas)
    	.style('cursor', 'pointer')
    	.on('mouseenter', drawLogo);
    
  </script>
</body>