Skip to content

Instantly share code, notes, and snippets.

@GitNoise

GitNoise/.block

Last active January 17, 2020 09:36
Show Gist options
  • Save GitNoise/42aa3c2002c873386638cc1f9f8c797b to your computer and use it in GitHub Desktop.
Save GitNoise/42aa3c2002c873386638cc1f9f8c797b to your computer and use it in GitHub Desktop.
Download ZIP
dashed arrays
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; }
svg {border: 1px solid red;}
.spiral { transform: translate(25%)}
.rotate {
animation: rotate 5s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dashed-line {
stroke-dasharray: 50;
}
@keyframes dash-animation {
to {
stroke-dashoffset: 1000;
}
}
.dash-move {
animation: dash-animation 20s infinite linear;
}
</style>
</head>
<body>
<svg>
<g class="spiral">
<g class="rotate">
<svg xmlns="http://www.w3.org/2000/svg" width="50%" heihgt="50%" viewBox="0 150 744 1052">
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="20" dy="20" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
</defs>
<path d="m351 487c0 8-11 4-14-1-6-11 4-24 15-27 19-5 37 11 40 30 4 27-18 50-44 53-35 4-64-25-66-59-3-42 32-77 73-79 50-3 90 39 92 88 2 57-46 104-102 105-65 2-117-53-119-117-1-72 60-131 131-132 80-1 144 67 145 146 1 87-74 158-160 158-95 0-171-81-171-175 0-102 88-185 190-184 110 1 198 95 197 204C557 615 456 709 340 708 215 706 115 598 117 475 119 342 233 236 364 238 504 240 616 361 614 500 611 648 484 766 337 763 182 760 58 626 61 472 65 309 206 179 367 183c170 4 306 151 302 320-4 178-158 319-335 315" fill="none" stroke="grey" stroke-width="10" style="filter:url(#dropshadow)"/>
</svg>
</g>
</g>
<g class="lines">
<path style="filter:url(#dropshadow)" class="dashed-line dash-move" fill="none" stroke="red" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</g>
</svg>
<script>
const size = 400;
var svg = d3.select("svg")
.attr("width", size)
.attr("height", size)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment