Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> // Feel free to change or delete any of the code you see in this editor! let svg = d3.select("body") .append("svg") .attr("width", 960) .attr("height", 500) let defs = svg.append("defs"); // linear gradient let linearGrad = defs .append('linearGradient') .attr('id', 'linear-gradient'); let radialGrad = defs .append('radialGradient') .attr('id', 'radial-gradient') .attr("cx", "25%") .attr("cy", "25%") .attr("r", "65%"); radialGrad.append("stop") .attr('offset', '0%') .attr('stop-color', '#00f4d8') radialGrad.append("stop") .attr('offset', '100%') .attr('stop-color','#008987') linearGrad .attr('x1', '0%') .attr('y1', '0%') .attr('x2', '100%') .attr('y2', '0%') // appending color to our gardient linearGrad .append("stop") .attr('offset', '0%') .attr('stop-color', '#00f4d8') linearGrad .append("stop") .attr('offset', '100%') .attr('stop-color', '#008987') svg.append('rect') .attr('id', 'legend-rect') .attr('x', 200) .attr('y', 100) .attr('width', 200) .attr('height', 100) d3.select('#legend-rect') .style('fill', 'url(#linear-gradient)') svg.append('circle') .attr('id', 'legend-circle') .attr('cx', 350) .attr('cy', 295) .attr('r', 50) svg.append('circle') .attr('id', 'legend-circle2') .attr('cx', 350) .attr('cy', 373) .attr('r', 50) .attr('stroke', 'black') .attr('stroke-opacity', 0.7) .attr('stroke-width', 5) d3.select('#legend-circle') .style('fill', 'url(#radial-gradient)') .style('opacity', 0.9) d3.select('#legend-circle2') .style('fill', 'url(#radial-gradient)') .style('opacity', 0.9) svg.append('line') .attr('x1', 10) .attr('y1', 10) .attr('x2', 350) .attr('y2', 10) .attr('stroke-width', 20) .attr('stroke', 'url(#linear-gradient)') </script></body> https://d3js.org/d3.v4.min.js