Skip to content

Instantly share code, notes, and snippets.

Last active January 15, 2018 08:07
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save EfratVil/484d0555f6f818ca6eea3de549a21e86 to your computer and use it in GitHub Desktop.
Linear Gradient
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//"></script>
linearGradient with html / svg <br/>
<svg width="620" height="120">
<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>
<rect x="0" y="0" width="600" height="100" fill="url(#gradient)" stroke="black" stroke-width="1" />
<br /><br /><br />
linearGradient with d3<br />
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 ='body')
.attr("width", width + (margin * 2))
.attr("height", height + (margin * 2))
.attr("transform", "translate(" + (margin) + "," + (margin) + ")");
var linearGradient = svg.append("defs")
.attr("id", "linear-gradient");
//.attr("gradientTransform", "rotate(45)");
.attr("offset", "0%")
.attr("stop-color", color(1));
.attr("offset", "25%")
.attr("stop-color", color(2));
.attr("offset", "50%")
.attr("stop-color", color(3));
.attr("offset", "75%")
.attr("stop-color", color(4));
.attr("offset", "100%")
.attr("stop-color", color(5));
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.style("stroke", "black")
.style("stroke-width", 2)
.style("fill", "url(#linear-gradient)");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment