Skip to content

Instantly share code, notes, and snippets.

@headwinds

headwinds/.block

Created July 2, 2020 13:59
Show Gist options
  • Save headwinds/78280948e8f393390b3236790f0a7c76 to your computer and use it in GitHub Desktop.
Save headwinds/78280948e8f393390b3236790f0a7c76 to your computer and use it in GitHub Desktop.
Download ZIP
programmatic gradient
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="my-cool-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#447799" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#112266" />
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.13649 9.12098L2.7259 11L3.56825 7.02016L0 4.20163L4.93119 3.62098L7.13649 0L9.34179 3.62098L14.273 4.20163L10.7047 7.02016L11.5471 11L7.13649 9.12098Z" fill="fill:url(#my-cool-gradient); #000"/>
</svg>
<svg width="200" height="200" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="my-cool-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#447799" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#112266" />
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.13649 9.12098L2.7259 11L3.56825 7.02016L0 4.20163L4.93119 3.62098L7.13649 0L9.34179 3.62098L14.273 4.20163L10.7047 7.02016L11.5471 11L7.13649 9.12098Z" fill="#000"/>
</svg>
<svg width="200" height="200" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.13649 9.12098L2.7259 11L3.56825 7.02016L0 4.20163L4.93119 3.62098L7.13649 0L9.34179 3.62098L14.273 4.20163L10.7047 7.02016L11.5471 11L7.13649 9.12098Z" style="fill:url(#myLinearGradient1);" />
</svg>
<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<clipPath id="bubbleKenseo">
<path d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</clipPath>
</defs>
<path fill="pink" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
<g x="0" y="0" width="79.36px" height="93.844px" clip-path="url(#bubbleKenseo)" height="100">
<rect id="progressMove" x="0" y="60%" width="100%" height="100%" fill="green" />
</g>
</svg>
<svg id="starProgress" width="100px" height="100px" viewBox="0 0 79.36 93.844">
<defs>
<clipPath id="starKenseo">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.13649 9.12098L2.7259 11L3.56825 7.02016L0 4.20163L4.93119 3.62098L7.13649 0L9.34179 3.62098L14.273 4.20163L10.7047 7.02016L11.5471 11L7.13649 9.12098Z" fill="#000"/>
</clipPath>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.13649 9.12098L2.7259 11L3.56825 7.02016L0 4.20163L4.93119 3.62098L7.13649 0L9.34179 3.62098L14.273 4.20163L10.7047 7.02016L11.5471 11L7.13649 9.12098Z" fill="pink"/>
<g x="0" y="0" width="100px" height="100px" clip-path="url(#starKenseo)" height="100">
<rect id="progressMove" x="0" y="60%" width="100%" height="100%" fill="green" />
</g>
</svg>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
svg.append("text")
.text("programmatic gradient")
.attr("y", 200)
.attr("x", 120)
.attr("font-size", 36)
.attr("font-family", "monospace")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment