Built with blockbuilder.org
forked from sxywu's block: Personal logo iteration 4
forked from sxywu's block: Personal logo iteration 5
forked from sxywu's block: Personal logo iteration 6
license: mit |
Built with blockbuilder.org
forked from sxywu's block: Personal logo iteration 4
forked from sxywu's block: Personal logo iteration 5
forked from sxywu's block: Personal logo iteration 6
<!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 / 2; | |
var height = 400; | |
var svg = d3.select('svg') | |
.attr('width', width) | |
.attr('height', height); | |
var defs = svg.append('defs'); | |
var colors = d3.scaleOrdinal() | |
.range(['#F5C6DD', '#B6DEED', '#9E84C2', '#D3BEDA', '#FFE4E1']); | |
var strokeColor = '#68bff1'; | |
var fillColor = '#e1fafe'; | |
var radius = 50; | |
var strokeWidth = 3; | |
var angles = _.times(6, function(i) { | |
return 60 * i; | |
}); | |
// data for the diamonds for the snowflake | |
var transforms = [ | |
[[0, -36], 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 * 1.5) + "px") | |
// .attr('x1', (-radius * 2) + 'px') | |
// .attr('y1', (-radius * 2) + 'px') | |
// .attr('x2', (radius * 2) + 'px') | |
// .attr('y2', (radius * 2) + 'px') | |
.attr("gradientUnits", "userSpaceOnUse"); | |
//First stop to fill the region between 0% and 40% | |
gradient.append("stop") | |
.attr("offset", "25%") | |
.attr("stop-color", fillColor); | |
//Second stop to fill the region between 40% and 100% | |
gradient.append("stop") | |
.attr("offset", "100%") | |
.attr("stop-color", strokeColor); | |
/************************************* | |
** clip path | |
*************************************/ | |
var clip = defs.append('clipPath') | |
.attr('id', 'snowflake') | |
.attr("gradientUnits", "userSpaceOnUse"); | |
var allFlakes = _.chain(angles) | |
.map(function(a) { | |
return _.map(transforms, function(t) { | |
return [a, t]; | |
}); | |
}).flatten().value() | |
clip.selectAll('path') | |
.data(allFlakes) | |
.enter().append('path') | |
.attr('d', 'M0,-12 L10,0 L0,12 L-10,0 L0,-12Z').attr('transform', function(d) { | |
var a = d[0]; | |
var t = d[1]; | |
return 'rotate(' + a + ')translate(' + t[0] + ')' + | |
'scale(' + t[1] + ')'; | |
}).attr('stroke-width', strokeWidth); | |
/************************************* | |
** draw snowflake | |
*************************************/ | |
// do da drawing | |
var snowflake = svg.append('g') | |
.classed('snowflake', true) | |
// .attr('opacity', .5) | |
.attr('transform', 'translate(' + [width / 2, height / 2] + ')'); | |
snowflake.append('circle') | |
.attr('r', radius * 1.5) | |
.attr('fill', '#fff') | |
.style('stroke', 'url(#gradient)') | |
.attr('stroke-width', strokeWidth * 1.5); | |
snowflake.append('circle') | |
.classed('gradient', true) | |
.attr('r', radius * 1.25) | |
.style('clip-path', 'url(#snowflake)') | |
.style('fill', 'url(#gradient)') | |
.attr('opacity', .5); | |
var flake = snowflake.selectAll('g') | |
.data(angles).enter().append('g') | |
.attr('transform', function(d) { | |
return 'rotate(' + d + ')'; | |
}); | |
flake.append('line') | |
.attr('y1', -50) | |
.attr('y2', 50) | |
.attr('stroke-width', strokeWidth) | |
.attr('stroke', strokeColor) | |
.attr('stroke-opacity', 1); | |
flake.selectAll('path') | |
.data(transforms) | |
.enter().append('path') | |
.attr('d', 'M0,-12 L10,0 L0,12 L-10,0 L0,-12Z').attr('transform', function(d) { | |
return 'translate(' + d[0] + ')' + | |
'scale(' + d[1] + ')'; | |
}).attr('fill', 'none') | |
.attr('stroke-alignment', 'inner') | |
.attr('stroke-width', strokeWidth) | |
.attr('stroke', strokeColor) | |
.attr('stroke-opacity', 1) | |
.attr('stroke-linecap', 'round') | |
.attr('stroke-linejoin', 'bevel'); | |
/************************************* | |
** 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> |