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: //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>