D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
seemantk
Full window
Github gist
Partially filling rectangles with linear gradients
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta author="Seemant Kulleen"> <meta description="Using SVG:LinearGradients to partially fill rectangles."> <script src="https://d3js.org/d3.v4.min.js"></script> <style> rect { stroke: black; } .bar { stop-opacity: 1; stop-color: red; } .empty { stop-color: blue; } .clear { stop-opacity: 0; } </style> </head> <body> <svg width="960" height="500"> <defs> <linearGradient id="gradient1" x1="0" x2="1" y1="0" y2="0"> <stop offset="0%" stop-color="red"></stop> <stop offset="100%" stop-color="blue"></stop> </linearGradient> <linearGradient id="gradient-2stops" x1="0" x2="1" y1="0" y2="0"> <stop offset="0%" stop-color="red"></stop> <stop offset="57%" stop-color="red"></stop> <stop offset="100%" stop-color="blue"></stop> </linearGradient> <linearGradient id="gradient-3stops" x1="0" x2="1" y1="0" y2="0"> <stop offset="0%" stop-color="red"></stop> <stop offset="57%" stop-color="red"></stop> <stop offset="57%" stop-color="blue"></stop> </linearGradient> <linearGradient id="gradient-css" x1="0" x2="1" y1="0" y2="0"> <stop offset="0%" class="bar"></stop> <stop offset="57%" class="bar"></stop> <stop offset="57%" class="empty"></stop> </linearGradient> <linearGradient id="gradient-opacity" x1="0" x2="1" y1="0" y2="0"> <stop offset="0%" class="bar"></stop> <stop offset="57%" class="bar"></stop> <stop offset="57%" class="clear"></stop> </linearGradient> </defs> <g class="axis"></g> <rect x="50" y="50" width="400" height="50" style="fill: url(#gradient1); stroke: black;"></rect> <g class="axis"></g> <rect x="50" y="150" width="400" height="50" style="fill: url(#gradient-2stops); stroke: black;"></rect> <g class="axis"></g> <rect x="50" y="250" width="400" height="50" style="fill: url(#gradient-3stops); stroke: black;"></rect> <g class="axis"></g> <rect x="50" y="350" width="400" height="50" style="fill: url(#gradient-css); stroke: black;"></rect> <g class="axis"></g> <rect x="50" y="450" width="400" height="50" style="fill: url(#gradient-opacity);"></rect> </svg> <script> var scale = d3.scaleLinear().domain([0,100]).range([0,400]) , axis = d3.axisTop().scale(scale) ; d3.selectAll(".axis") .attr("transform", function(d, i) { console.log(i * 100 + 50); return "translate(50," + ((i * 100) + 50) + ")"; }) .call(axis) ; </script> </body>
https://d3js.org/d3.v4.min.js