Linear Gradient

Linear Gradient
Reference: https://www.w3.org/TR/SVG/pservers.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>

<body>

linearGradient with html / svg <br/>
    <svg width="620" height="120">
        <defs>
            <linearGradient id="gradient">         
                <stop offset="0.0%" stop-color="#90B9AD"></stop>  
                <stop offset="20%" stop-color="#6D8B6D"></stop>
                <stop offset="40%" stop-color="#E46460"></stop>
                <stop offset="60%" stop-color="#EB9263"></stop>
                <stop offset="80%" stop-color="#F3DF89"></stop> 
                <stop offset="100%" stop-color="#F3DF89"></stop>
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="600" height="100" fill="url(#gradient)" stroke="black" stroke-width="1" />
    </svg>

<br /><br /><br />
    linearGradient with d3<br />

var colorRange = ['#C0D9CC', '#F6F6F4', '#925D60', '#B74F55', '#969943']
        
        var color = d3.scaleLinear().range(colorRange).domain([1, 2, 3, 4, 5]);

var svg = d3.select('body')
            .append('svg')
            .attr("width", width + (margin * 2))
            .attr("height", height + (margin * 2))
            .append("g")
            .attr("transform", "translate(" + (margin) + "," + (margin) + ")");

var linearGradient = svg.append("defs")
            .append("linearGradient")
            .attr("id", "linear-gradient");
           
        //.attr("gradientTransform", "rotate(45)");

linearGradient.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", color(1));

linearGradient.append("stop")
            .attr("offset", "25%")
            .attr("stop-color", color(2));

linearGradient.append("stop")
            .attr("offset", "50%")
            .attr("stop-color", color(3));

linearGradient.append("stop")
            .attr("offset", "75%")
            .attr("stop-color", color(4));

linearGradient.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", color(5));

svg.append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .style("fill", "url(#linear-gradient)");

</script>

</body>

https://d3js.org/d3.v4.min.js