Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Last active January 14, 2020 16:55
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 mforando/4d1682dccd7a680d7e29b3bb03b4d970 to your computer and use it in GitHub Desktop.
Save mforando/4d1682dccd7a680d7e29b3bb03b4d970 to your computer and use it in GitHub Desktop.
Download ZIP
Pattern Fills
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>
<svg height='700'>
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="6" height="6">
<rect width='6' height='6' fill='#fff'/>
<path d='M0 0L6 6ZM6 0L0 6Z' stroke-width='0.5' stroke='#aaa'/>
</pattern>
<pattern id="diagonal-green" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='10' height='10' fill='white'/>
<path d='M-1,1 l2,-2
M0,10 l10,-10
M9,11 l2,-2' stroke='green' stroke-width='2'/>
</pattern>
<pattern id="diagonal-red" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='10' height='10' fill='white'/>
<path d='M-1,1 l2,-2
M0,10 l10,-10
M9,11 l2,-2' stroke='red' stroke-width='4'/>
</pattern>
<pattern id="vertical-stripe-green" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='8' height='10' fill='green' />
<rect x='8' y='0' width='10' height='1' fill='white' />
</pattern>
<pattern id="vertical-stripe-black" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='2' height='10' fill='black' />
<rect x='2' y='0' width='10' height='1' fill='white' />
</pattern>
<pattern id="horizontal-stripe-black" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='10' height='10' fill='black' />
<rect x='0' y='0' width='10' height='1' fill='white' />
</pattern>
<pattern id="horizontal-stripe-purple" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='10' height='10' fill='purple' />
<rect x='0' y='0' width='10' height='5' fill='white' />
</pattern>
<pattern id="horizontal-stripe-red" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='10' height='10' fill='red' />
<rect x='0' y='0' width='10' height='5' fill='darkred' />
</pattern>
<pattern id="vertical-stripe-blue" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width='5' height='10' fill='rgb(0,80,160)' />
<rect x='5' y='0' width='5' height='10' fill='white' />
</pattern>
<pattern id="quartercircles-blue" x="0" y="10" width="5" height="5" patternUnits="userSpaceOnUse" >
<circle cx="5" cy="5" r="4.5" style="stroke: none; fill: rgb(0,80,160)" />
</pattern>
<pattern id="quartercircles-purple" x="0" y="10" width="5" height="5" patternUnits="userSpaceOnUse" >
<circle cx="5" cy="5" r="4.5" style="stroke: none; fill: purple" />
</pattern>
</defs>
<circle cx='50' cy='50' fill="url(#horizontal-stripe-red)" r='20' stroke='black'></circle>
<circle cx='50' cy='100' fill="url(#quartercircles-blue)" r='20' stroke='black'></circle>
<circle cx='50' cy='150' fill="url(#vertical-stripe-blue)" r='20' stroke='black'></circle>
<circle cx='50' cy='200' fill="url(#quartercircles-purple)" r='20' stroke='black'></circle>
<circle cx='50' cy='250' fill="url(#horizontal-stripe-purple)" r='20' stroke='black'></circle>
<circle cx='50' cy='250' fill="url(#horizontal-stripe-purple)" r='20' stroke='black'></circle>
<circle cx='50' cy='300' fill="url(#horizontal-stripe-black)" r='20' stroke='black'></circle>
<circle cx='50' cy='350' fill="url(#vertical-stripe-black)" r='20' stroke='black'></circle>
<circle cx='50' cy='400' fill="url(#vertical-stripe-green)" r='20' stroke='black'></circle>
<circle cx='50' cy='500' fill="url(#diagonal-red)" r='20' stroke='black'></circle>
<circle cx='50' cy='450' fill="url(#diagonal-green)" r='20' stroke='black'></circle>
<circle cx='50' cy='550' fill="url(#crosshatch)" r='20' stroke='black'></circle>
</svg>
<body>
<script>
d3.selectAll('circle').style('fill-opacity',.5)
var str = new XMLSerializer().serializeToString(d3.select('#horizontal-stripe-5').node());
var encoded = window.btoa(str)
console.log(str, encoded)
// 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("Edit the code below to change me!")
.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