Built with blockbuilder.org
Generative Patterns
<!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; } | |
.parent-container { | |
position: relative; | |
} | |
.pattern-container { | |
position: absolute; | |
width: 100%; | |
height: 500px; | |
} | |
.pattern { | |
fill: none; | |
stroke: #857979; | |
stroke-width: 1px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="parent-container"> | |
<div class="pattern-container"> | |
<svg width="100%" height="100%"> | |
<defs> | |
<pattern id="Pattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"> | |
<path class="pattern first" d="M0 30,40 60,50 60,60 30,50 0,40 0,0 30" /> | |
<path class="pattern second" d="M60 30,20 60,10 60,0 30,10 0,20 0,60 30" /> | |
</pattern> | |
</defs> | |
<rect fill="url(#Pattern)" width="100%" height="100%"/> | |
</svg> | |
</div> | |
</div> | |
</body> | |
<script> | |
setInterval(function(){ | |
const leftPosition = Math.round(Math.random() * 60); | |
d3.selectAll('.pattern') | |
.transition().duration(600) | |
.attr('d', (d, i) => getPath(d, i, leftPosition)) | |
}, 1200) | |
function getPath(d, index, leftPosition) { | |
const rightPosition = 60 - leftPosition; | |
const flatWidth = 10; | |
const firstPath = `M0 30,${rightPosition - flatWidth} 60,${rightPosition} 60,60 30,${rightPosition} 0,${rightPosition - flatWidth} 0,0 30`; | |
const secondPath = `M60 30,${leftPosition + flatWidth} 60,${leftPosition} 60,0 30,${leftPosition} 0,${leftPosition + flatWidth} 0,60 30`; | |
if (index === 0){ | |
return firstPath; | |
} else { | |
return secondPath | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment