Personal Logo Iteration 1 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(240, 68, 114);
    }
  </style>
</head>

<body>
  <canvas id='logo'></canvas>
  <h1>
    <div>Shirley</div>
    <div>Xueyang</div>
    <div>Wu</div>
  </h1>
  <script>
  	var canvas = document.getElementById('logo');
//     canvas.width = window.innerWidth;
//     canvas.height = window.innerHeight;
    canvas.width = 120;
    canvas.height = 250;
    var ctx = canvas.getContext('2d');
    
    var padding = 40;
//     var size = (window.innerHeight - padding * 2) / 2;
    size = 100;
    var radius = size / 2;
    
    var cx = canvas.width / 2;
    var cy1 = padding + radius;
    var y = cy1 + radius * Math.sin(0.25 * Math.PI);
    var cy2 = y - radius * Math.sin(-0.25 * 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];
    
    // draw fractals
    function drawFractals(times, startAngle, endAngle, cx, cy) {
      _.times(times, function(i) {
        var start = _.random(startAngle, endAngle);
        var end = start + _.random(0.25, 0.75);
        end = end > endAngle ? endAngle : end;
        var color = i % 2 ? yellow : magenta;
        var opacity = _.random(0.08, 0.2);
        ctx.fillStyle = 'rgba(' + color.join(',') + ',' + opacity + ')';

        ctx.beginPath();
        ctx.arc(cx, cy, radius, start * Math.PI, end * Math.PI);
        ctx.fill();
      });
    }
    
    drawFractals(24, start1, end1, cx, cy1);
    drawFractals(24, start2, end2, cx, cy2);
    
    // draw circles
    ctx.strokeStyle = ctx.fillStyle = 'rgb(' + magenta.join(',') + ')';
    ctx.lineWidth = Math.floor(size / 10);
    ctx.lineCap = "round";
    
    ctx.beginPath();
    ctx.arc(cx, cy1, radius, start1 * Math.PI, end1 * Math.PI);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(cx, cy2, radius, start2 * Math.PI, end2 * Math.PI);
    ctx.stroke();
    
  </script>
</body>