JSFiddle - React, Tailwind, and code Playground

by manchagnu

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<! gradient with svg !-->
<svg height="50" width="400">
    <defs>
        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:blue;stop-opacity:1"></stop>
            <stop offset="25%" style="stop-color:cyan;stop-opacity:1"></stop>
            <stop offset="50%" style="stop-color:green;stop-opacity:1"></stop>
            <stop offset="75%" style="stop-color:yellow;stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:red;stop-opacity:1"></stop>
        </linearGradient>
    </defs>
    <rect x="10" y="10" width="200" height="200" fill="url(#gradient1)"></rect>
</svg>

JavaScript

// gradient with d3
var colors = ["blue","cyan","green","yellow","red"].reverse();
var intervals = 100/(colors.length - 1);

var group = d3
    .select('body')
    .append('svg')
    .attr('width', '50')
    .attr('height', '300')
    .append('g');

var gradient = group
    .append('defs')
    .append('linearGradient')
    .attr('id', 'gradient1')
    .attr('x1', '0%')
    .attr('y1', '0%')
    .attr('x2', '0%')
    .attr('y2', '100%');

gradient
    .selectAll('stop')
    .data(colors)
    .enter()
    .append('stop')
    .attr('offset', function(d, i) {return intervals * i + "%";})
    .attr('style', function(d) {return 'stop-color:' + d + ';stop-opacity:1'})

group
    .append('rect')
    .attr('x', '10')
    .attr('y', '10')
    .attr('width', '50')
    .attr('height', '100%')
    .attr('fill', 'url(#gradient1)');