Skip to content

Instantly share code, notes, and snippets.

@jpbyrne

jpbyrne/.block

Last active March 22, 2017 14:05
Show Gist options
  • Save jpbyrne/091597da666304607f900b08b512a2a4 to your computer and use it in GitHub Desktop.
Save jpbyrne/091597da666304607f900b08b512a2a4 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="1080" height="720" style="background-color: dodgerblue;">
<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>
<linearGradient id="sky-gradient" gradientTransform="rotate(90)"><stop offset="0%" stop-color="#FB8933"></stop><stop offset="100%" stop-color="indianred"></stop></linearGradient>
</defs>
<!-- ground -->
<rect x="0" y="460" width="1000" height="100" style="fill: green; stroke: yellowgreen; stroke-width: 6;" />
<!-- house -->
<g transform="translate(280, 220)">
<!-- walls -->
<rect width="400" height="261" style="fill: bisque;" />
<!-- roof -->
<path transform="translate(200, -125) scale(25)" d="M 0 0 L 10 5 L -10 5 Z" style="fill: url('#sky-gradient');" />
<!-- door -->
<rect x="15%" y="20%" width="90" height="120" style="fill: sienna;" />
</g>
<!-- sun -->
<circle cx="180" cy="120" r="60" style="fill: url('#sun-gradient');" />
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment