Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/index.html

Last active January 15, 2018 08:07
Show Gist options
  • Save EfratVil/484d0555f6f818ca6eea3de549a21e86 to your computer and use it in GitHub Desktop.
Save EfratVil/484d0555f6f818ca6eea3de549a21e86 to your computer and use it in GitHub Desktop.
Download ZIP
Linear Gradient
Raw
index.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"> <!--gradientTransform="rotate(45)"-->
<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 />
<script>
var margin = 0,
width = 600 - margin,
height = 100 - margin;
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment