Personal logo iteration 9 by sxywu

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
  <style>
    * {
      font-family: "Libre Baskerville";
      font-size: 32px;
    }
    
    /* blend options taken from visual cinnamon tutorial: //www.visualcinnamon.com/2016/05/beautiful-color-blending-svg-d3.html */
    /*Set isolate on the group element*/
    svg {isolation: isolate;}  
    /*Set blend mode on SVG element: e.g. screen, multiply*/
/*     .gradient { mix-blend-mode: multiply; } */
/*     .snowflake line, .snowflake path{mix-blend-mode: multiply}; */
  </style>
</head>

<body>
  <svg></svg>
  
  <script>    
    var width = window.innerWidth;
    var height = 400;
    var svg = d3.select('svg')
    	.attr('width', width)
    	.attr('height', height);
    var defs = svg.append('defs');
    
    var colors = ['#F5C6DD', '#B6DEED', '#9E84C2', '#D3BEDA', '#FFE4E1'];
//     var strokeColor = '#68bff1';
//     var fillColor = '#e1fafe';
    var strokeColor = '#83CCF5';
    var fillColor = '#F5C6DD';
    var radius = 50;
    var strokeWidth = 3;
    var angles = _.times(6, function(i) {
      return (2 * Math.PI / 6) * i;
    });
    // data for the diamonds for the snowflake
    var transforms = [
      [[0, -38], 1.25, .25], // translate, scale, opacity
      [[0, -26], 1, .2],
      [[0, -16], .85, .2],
    ];
    
    /*************************************
    ** gradient
    *************************************/
    //Set up a horizontal gradient
    var gradient = defs.append("radialGradient")
    	.attr('id', 'gradient')
    	.attr("cx", (-radius / 3) + "px")
      .attr("cy",  (-radius / 3) + "px")
      .attr("r", (radius * 2) + "px")
    	.attr("gradientUnits", "userSpaceOnUse");
    
    gradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", fillColor);
//     gradient.append("stop")
//       .attr("offset", "50%")
//       .attr("stop-color", colors[3]);
    gradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", strokeColor);
    
    var fillgradient = defs.append("linearGradient")
    	.attr('id', 'fillgradient')
    	.attr('x2', '0%')
    	.attr('y2', '100%');
    
    fillgradient.append("stop")
      .attr("offset", "25%")
      .attr("stop-color", '#fff');
    fillgradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", strokeColor);
    
    /*************************************
    ** draw snowflake
    *************************************/
   
    // do da drawing
    var snowflake = svg.append('g')
    	.classed('snowflake', true)
    	.style('stroke', 'url(#gradient)')
    	.attr('transform', 'translate(' + [width / 2, height / 2] + ')');
    
    snowflake.append('circle')
    	.attr('r', radius * 1.4)
    	.attr('fill', 'none')
    	.attr('stroke-width', strokeWidth * 2);
    
    // x' = x * cos(theta) - y * sin(theta)
    // y' = y * cos(theta) + x * sin(theta)
    var y1 = 0;
    var y2 = -50;
    snowflake.selectAll('line')
    	.data(angles).enter().append('line')
    	.attr('x1', function(theta) {
      	return y1 * Math.sin(theta);
      }).attr('y1', function(theta) {
      	return y1 * Math.cos(theta);
      }).attr('x2', function(theta) {
      	return y2 * Math.sin(theta);
      }).attr('y2', function(theta) {
      	return y2 * Math.cos(theta);
      }).attr('stroke-width', strokeWidth)
      .attr('stroke-opacity', 1);
    
    var diamond = [[0,-12], [10,0], [0,12], [-10,0], [0,-12]];
    var allFlakes = _.chain(angles)
    	.map(function(a) {
        return _.map(transforms, function(t) {
          return [a, t];
        });
      }).flatten().value();
    snowflake.selectAll('path')
    	.data(allFlakes).enter().insert('path', 'line')
    	.attr('d', function(d) {
      	var theta = d[0];
      	var transforms = d[1];
      	return 'M' + _.map(diamond, function(point) {
          var x = point[0] * transforms[1] + transforms[0][0];
          var y = point[1] * transforms[1] + transforms[0][1];
          return [
            x * Math.cos(theta) - y * Math.sin(theta),
            y * Math.cos(theta) + x * Math.sin(theta)
          ];
        }).join(' L') + 'Z'; 
      })
//       .attr('fill', 'url(#fillgradient)')
    	.attr('fill', 'none')
    	.attr('fill-opacity', .25)
      .attr('stroke-width', strokeWidth)
      .attr('stroke-opacity', 1)
      .attr('stroke-linecap', 'round')
      .attr('stroke-linejoin', 'round');
    
    
    /*************************************
    ** sxywu text
    *************************************/
    svg.append('text')
    	.attr('x', width / 2)
    	.attr('y', height / 2 + 125)
    	.attr('text-anchor', 'middle')
    	.attr('dy', '.35em')
    	.attr('fill', strokeColor)
    	.style('fill', 'url(#gradient)')
    	.text('sxywu')
  </script>
</body>