Skip to content

Instantly share code, notes, and snippets.

@sxywu

sxywu/.block

Last active September 14, 2016 20:38
Show Gist options
  • Save sxywu/aaffb3bbe54a6c232d3944487f47a5f3 to your computer and use it in GitHub Desktop.
Save sxywu/aaffb3bbe54a6c232d3944487f47a5f3 to your computer and use it in GitHub Desktop.
Download ZIP
Personal logo iteration 9
Raw
.block
license: mit
Raw
README.md
Raw
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: http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment