Skip to content

Instantly share code, notes, and snippets.

@robert-moore
Last active March 22, 2017 19:46
Show Gist options
  • Save robert-moore/6e9e31891df5d2f382d910539acf8b5f to your computer and use it in GitHub Desktop.
Save robert-moore/6e9e31891df5d2f382d910539acf8b5f to your computer and use it in GitHub Desktop.
Blue Radial SVG Gradient with D3.js
var blueRadialGradientStops = [{
"color": "#0189DF", "offset":0
}, {
"color": "#005A9B", "offset":30
}, {
"color": "#00326A", "offset":63
}, {
"color": "#071932", "offset":100
}
];
var defs = d3.select('svg')
.append('defs');
defs.append('radialGradient')
.attr('id', 'blueRadialGradient')
.attr('cx', '35%')
.attr('cy', '18.5%')
.attr('fx', '35%')
.attr('fy', '18.5%')
.attr('r', '100%')
.selectAll('stop')
.data(blueRadialGradientStops)
.enter()
.append('stop')
.attr('stop-color', function(d) { return d.color; })
.attr('offset', function(d) { return d.offset + '%'; });
svg.append('rect')
.attr('width', width)
.attr('height', height)
.attr('fill', 'url(#blueRadialGradient)');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment