Built with blockbuilder.org
forked from jonsadka's block: Hexagram (Inner Lines)
forked from jonsadka's block: Hexagram (No Inner Lines)
forked from jonsadka's block: Animated Hexagram (No Inner Lines)
license: mit |
Built with blockbuilder.org
forked from jonsadka's block: Hexagram (Inner Lines)
forked from jonsadka's block: Hexagram (No Inner Lines)
forked from jonsadka's block: Animated Hexagram (No Inner Lines)
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
background-color: #164677; | |
margin:0; position:fixed; top:0; right:0; bottom:0; left:0; | |
} | |
.parent-container { | |
position: relative; | |
} | |
.pattern-container { | |
position: absolute; | |
width: 100%; | |
height: 500px; | |
} | |
/* Perimeted of one star is 129 */ | |
.pattern { | |
fill: none; | |
stroke: #2067AC; | |
stroke-dasharray: 129, 129; | |
stroke-dashoffset: 0; | |
} | |
</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="40" height="40" patternUnits="userSpaceOnUse"> | |
<path class="pattern point-up" d="M0 10,20 40,40 10Z" /> | |
<path class="pattern point-down" d="M0 30,20 0,40 30Z"/> | |
</pattern> | |
</defs> | |
<rect fill="url(#Pattern)" width="100%" height="100%"/> | |
</svg> | |
</div> | |
</div> | |
</body> | |
<script> | |
let upperThreshold = 129 + 129; | |
const lowerThreshold = 0; | |
const increment = 5; | |
let reset = false; | |
setInterval(() => { | |
const patterns = document.getElementsByClassName('pattern'); | |
for (let i = 0; i < patterns.length; i++) { | |
const pattern = patterns[i]; | |
var previousStrokeDashOffset = +pattern.style['stroke-dashoffset']; | |
if (previousStrokeDashOffset > upperThreshold) { | |
reset = true; | |
} else { | |
reset = false | |
} | |
reset ? | |
pattern.style['stroke-dashoffset'] = lowerThreshold: | |
pattern.style['stroke-dashoffset'] = previousStrokeDashOffset += increment * Math.random() * 2; | |
} | |
}, 40) | |
</script> | |