Skip to content

Instantly share code, notes, and snippets.

@peterchappell

peterchappell/.block

Last active March 22, 2017 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterchappell/921e8353ec1735be4c6664408f134ace to your computer and use it in GitHub Desktop.
Save peterchappell/921e8353ec1735be4c6664408f134ace to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
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=500 height=500>
<defs><radialGradient id="sun-gradient" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#FFF76B"></stop><stop offset="50%" stop-color="#FFF845"></stop><stop offset="90%" stop-color="#FFDA4E"></stop><stop offset="100%" stop-color="#FB8933"></stop></radialGradient>
<filter id="gooey"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="gooey"></feColorMatrix><feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite></filter>
<filter id="fuzzyFilter" width="300%" x="-100%" color-interpolation-filters="sRGB"><feGaussianBlur class="blurValues" in="SourceGraphic" stdDeviation="0 0"></feGaussianBlur></filter>
</defs>
<rect x="0" y="0" width="500" height="500" style="fill:lightblue"></rect>
<rect x="0" y="350" width="500" height="300" style="fill:lightgreen"></rect>
<circle cx="0" cy="0" r="160" style="fill:yellow; filter: url('#fuzzyFilter');" opacity="0.2"></circle>
<rect x="50" y="200" width="400" height="200" style="fill:#ff7b0f"></rect>
<path d="M 20 200 L 480 200 L 240 50 Z" style="fill:red" />
<rect x="170" y="300" width="60" height="100" style="fill: green;"></rect>
<rect x="80" y="240" width="40" height="40" style="fill: white;"></rect>
<rect x="300" y="240" width="120" height="40" style="fill: white;"></rect>
<rect x="25" y="400" width="60" height="100" style="fill: brown; filter: url('#gooey');" transform="skewX(20)"></rect>
<circle cx="0" cy="0" r="100" style="fill:url('#sun-gradient')"></circle>
<circle cx="215" cy="350" r="7" style="fill: yellow;"></circle>
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment