Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/jhroemer/jhroemer.github.io. My personal website jensroemer.com
Something went wrong. Try again.
4.5 kB · 213 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214---const nodeColor = "#000";
const unevenLayerNumberOffset = 20;const evenLayerNumberOffset = 10;
const graph = [ [0, 1, 2], [3, 4], [5, 6, 7],];---
<script> const nodeClick = () => { const edges: NodeListOf<SVGLineElement> = document.querySelectorAll("line.edge");
function delay(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); }
async function processItems() { for (const edge of edges) { const length = edge.getTotalLength(); edge.style.transition = `stroke-dashoffset 0.5s cubic-bezier(0.6, 0.6, 0, 1)`; edge.style.strokeDashoffset = `${-length}`; await delay(150); }
await delay(150); edges.forEach((edge) => { const length = edge.getTotalLength(); edge.style.transition = "unset"; edge.style.strokeDashoffset = `${length}`; }); }
processItems(); };
const nodes = document.querySelectorAll("[id^=node-]"); nodes.forEach((node) => { node.addEventListener("click", nodeClick); });
const edges: NodeListOf<SVGLineElement> = document.querySelectorAll("line.edge"); edges.forEach((edge) => { const length = edge.getTotalLength(); edge.style.strokeDasharray = `${length}`; edge.style.strokeDashoffset = `${length}`; });</script>
<style> @keyframes draw { to { stroke-dashoffset: -24; } }
circle:hover { cursor: pointer; transition: fill 0.1s ease, stroke-width 0.1s ease; fill: #1d1d1d; stroke-width: 0.5; }
.test:hover { stroke-dashoffset: -24; /* animation: draw 1s ease; */ }</style>
<svg viewBox="0 0 100 60"> <rect width="100" height="100" fill="white"></rect> <defs> <linearGradient id="explosiveGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#A9A9A9; stop-opacity:0.1"></stop> <stop offset="25%" style="stop-color:#A9A9A9; stop-opacity:0.3"></stop> <stop offset="60%" style="stop-color:#FFA500; stop-opacity:0.7"></stop> <stop offset="70%" style="stop-color:#FF69B4; stop-opacity:0.95"></stop> <stop offset="100%" style="stop-color:#FF69B4; stop-opacity:1"></stop> </linearGradient> </defs>
{ graph.map((layer, index) => { return layer.map((n, innerIndex) => { const offset = index % 2 === 0 ? evenLayerNumberOffset : unevenLayerNumberOffset; return ( <circle class="node" id={`node-${n}`} cx={20 + index * 30} cy={offset + innerIndex * 20} r="4" fill="transparent" stroke={nodeColor} stroke-width="0.2" /> ); }); }) }
<!-- Edges towards second layer --> <line class="edge" x1="24" y1="10" x2="46" y2="20" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="24" y1="10" x2="46" y2="40" stroke="url(#explosiveGradient)" stroke-width="0.4"></line>
<line class="edge" x1="24" y1="30" x2="46" y2="20" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="24" y1="30" x2="46" y2="40" stroke="url(#explosiveGradient)" stroke-width="0.4"></line>
<line class="edge" x1="24" y1="50" x2="46" y2="20" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="24" y1="50" x2="46" y2="40" stroke="url(#explosiveGradient)" stroke-width="0.4"></line>
<!-- Edges towards third layer --> <line class="edge" x1="54" y1="20" x2="76" y2="10" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="54" y1="20" x2="76" y2="30" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="54" y1="20" x2="76" y2="50" stroke="url(#explosiveGradient)" stroke-width="0.4"></line>
<line class="edge" x1="54" y1="40" x2="76" y2="10" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="54" y1="40" x2="76" y2="30" stroke="url(#explosiveGradient)" stroke-width="0.4"></line> <line class="edge" x1="54" y1="40" x2="76" y2="50" stroke="url(#explosiveGradient)" stroke-width="0.4"></line></svg>