gradient

<!DOCTYPE html>
<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