convert SVG animations from timer loops to CSS scroll-driven parallax

Replace loopN keyframes with animation-timeline: view() so diagram
elements fade in as the reader scrolls past them instead of cycling
on a fixed timer. Add @supports fallback for Safari: unsupported
browsers show all elements immediately.
This commit is contained in:
russell@unturf.com 2026-03-05 08:52:25 -05:00
parent cf92f1f613
commit 0af5003a3e
8 changed files with 517 additions and 662 deletions

View file

@ -1,157 +1,188 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
-->
<!-- Title: contributor_decay Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 996.00 117.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
viewBox="0.00 0.00 211.00 671.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
2.5% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 6.2% { opacity: 0; }
8.7% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 12.4% { opacity: 0; }
14.9% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 18.6% { opacity: 0; }
21.1% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 24.8% { opacity: 0; }
27.2% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop5 {
0%, 31.0% { opacity: 0; }
33.4% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop6 {
0%, 37.2% { opacity: 0; }
39.6% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop7 {
0%, 46.4% { opacity: 0; }
48.9% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 32.3s ease-out infinite; }
.d1 { animation: loop1 32.3s ease-out infinite; }
.d2 { animation: loop2 32.3s ease-out infinite; }
.d3 { animation: loop3 32.3s ease-out infinite; }
.d4 { animation: loop4 32.3s ease-out infinite; }
.d5 { animation: loop5 32.3s ease-out infinite; }
.d6 { animation: loop6 32.3s ease-out infinite; }
.d7 { animation: loop7 32.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 2% entry 22%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 11% entry 31%; }
.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 14% entry 34%; }
.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 17% entry 37%; }
.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; }
.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 22% entry 42%; }
.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 45%; }
.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 28% entry 48%; }
.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 31% entry 51%; }
.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 34% entry 54%; }
.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 37% entry 57%; }
.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; }
.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 42% entry 62%; }
.d16 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 45% entry 65%; }
.d17 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; }
.d18 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 51% entry 71%; }
.d19 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 54% entry 74%; }
.d20 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 57% entry 77%; }
.d21 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
.d22 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 62% entry 82%; }
.d23 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; }
.d24 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 68% entry 88%; }
.d25 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; }
.d26 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 74% entry 94%; }
.d27 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 77% entry 97%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 113)">
<!-- d0: cluster box -->
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 667)">
<g class="anim d0">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="8,-8 8,-101 773,-101 773,-8 8,-8"/>
<text text-anchor="middle" x="390.5" y="-87.4" font-family="Helvetica Bold" font-size="12.00" fill="#cccccc">Pylons org: contributor decay</text>
<title>contributor_decay</title>
</g>
<!-- d1: lifetime -->
<g class="anim d1">
<path fill="#1b5e20" stroke="#999999" d="M81,-66C81,-66 28,-66 28,-66 22,-66 16,-60 16,-54 16,-54 16,-34 16,-34 16,-28 22,-22 28,-22 28,-22 81,-22 81,-22 87,-22 93,-28 93,-34 93,-34 93,-54 93,-54 93,-60 87,-66 81,-66"/>
<text text-anchor="middle" x="54.5" y="-53.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">lifetime</text>
<text text-anchor="middle" x="54.5" y="-41.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">28 humans</text>
<text text-anchor="middle" x="54.5" y="-29.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">97 repos</text>
<g id="clust1" class="cluster">
<title>cluster_time</title>
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="8,-87 8,-655 195,-655 195,-87 8,-87"/>
<text text-anchor="middle" x="101.5" y="-641.4" font-family="Helvetica Bold" font-size="12.00" fill="#cccccc">Pylons org: contributor decay</text>
</g>
<!-- d2: 18 years + edge -->
<g class="anim d2">
<path fill="#2e7d32" stroke="#999999" d="M237,-66C237,-66 184,-66 184,-66 178,-66 172,-60 172,-54 172,-54 172,-34 172,-34 172,-28 178,-22 184,-22 184,-22 237,-22 237,-22 243,-22 249,-28 249,-34 249,-34 249,-54 249,-54 249,-60 243,-66 237,-66"/>
<text text-anchor="middle" x="210.5" y="-53.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">18 years</text>
<text text-anchor="middle" x="210.5" y="-41.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">28 humans</text>
<text text-anchor="middle" x="210.5" y="-29.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">97 repos</text>
<path fill="none" stroke="#aaaaaa" d="M93.17,-44C115.44,-44 143.71,-44 166.8,-44"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="166.95,-45.75 171.95,-44 166.95,-42.25 166.95,-45.75"/>
<text text-anchor="middle" x="132.5" y="-47.8" font-family="Times,serif" font-size="14.00" fill="#cccccc"> same</text>
</g>
<!-- d3: 6 years + edge -->
<!-- lifetime -->
<g class="anim d3">
<path fill="#0d47a1" stroke="#999999" d="M369,-66C369,-66 316,-66 316,-66 310,-66 304,-60 304,-54 304,-54 304,-34 304,-34 304,-28 310,-22 316,-22 316,-22 369,-22 369,-22 375,-22 381,-28 381,-34 381,-34 381,-54 381,-54 381,-60 375,-66 369,-66"/>
<text text-anchor="middle" x="342.5" y="-53.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">6 years</text>
<text text-anchor="middle" x="342.5" y="-41.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">19 humans</text>
<text text-anchor="middle" x="342.5" y="-29.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">46 repos</text>
<path fill="none" stroke="#ef5350" d="M249.1,-44C264.6,-44 282.64,-44 298.64,-44"/>
<polygon fill="#ef5350" stroke="#ef5350" points="298.98,-45.75 303.98,-44 298.98,-42.25 298.98,-45.75"/>
<text text-anchor="middle" x="276.5" y="-47.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;9</text>
<g id="node1" class="node">
<title>lifetime</title>
<path fill="#1b5e20" stroke="#999999" d="M125.5,-626C125.5,-626 72.5,-626 72.5,-626 66.5,-626 60.5,-620 60.5,-614 60.5,-614 60.5,-594 60.5,-594 60.5,-588 66.5,-582 72.5,-582 72.5,-582 125.5,-582 125.5,-582 131.5,-582 137.5,-588 137.5,-594 137.5,-594 137.5,-614 137.5,-614 137.5,-620 131.5,-626 125.5,-626"/>
<text text-anchor="middle" x="99" y="-613.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">lifetime</text>
<text text-anchor="middle" x="99" y="-601.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">28 humans</text>
<text text-anchor="middle" x="99" y="-589.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">97 repos</text>
</g>
<!-- d4: 3 years + edge -->
<g class="anim d4">
<path fill="#1565c0" stroke="#999999" d="M501,-66C501,-66 448,-66 448,-66 442,-66 436,-60 436,-54 436,-54 436,-34 436,-34 436,-28 442,-22 448,-22 448,-22 501,-22 501,-22 507,-22 513,-28 513,-34 513,-34 513,-54 513,-54 513,-60 507,-66 501,-66"/>
<text text-anchor="middle" x="474.5" y="-53.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">3 years</text>
<text text-anchor="middle" x="474.5" y="-41.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">15 humans</text>
<text text-anchor="middle" x="474.5" y="-29.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">31 repos</text>
<path fill="none" stroke="#ef5350" d="M381.1,-44C396.6,-44 414.64,-44 430.64,-44"/>
<polygon fill="#ef5350" stroke="#ef5350" points="430.98,-45.75 435.98,-44 430.98,-42.25 430.98,-45.75"/>
<text text-anchor="middle" x="408.5" y="-47.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;4</text>
</g>
<!-- d5: 1 year + edge -->
<!-- y18 -->
<g class="anim d5">
<path fill="#6a1b9a" stroke="#999999" d="M627,-66C627,-66 580,-66 580,-66 574,-66 568,-60 568,-54 568,-54 568,-34 568,-34 568,-28 574,-22 580,-22 580,-22 627,-22 627,-22 633,-22 639,-28 639,-34 639,-34 639,-54 639,-54 639,-60 633,-66 627,-66"/>
<text text-anchor="middle" x="603.5" y="-53.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">1 year</text>
<text text-anchor="middle" x="603.5" y="-41.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">7 humans</text>
<text text-anchor="middle" x="603.5" y="-29.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">8 repos</text>
<path fill="none" stroke="#ef5350" d="M513.26,-44C528.76,-44 546.73,-44 562.46,-44"/>
<polygon fill="#ef5350" stroke="#ef5350" points="562.7,-45.75 567.7,-44 562.7,-42.25 562.7,-45.75"/>
<text text-anchor="middle" x="540.5" y="-47.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;8</text>
<g id="node2" class="node">
<title>y18</title>
<path fill="#2e7d32" stroke="#999999" d="M125.5,-531C125.5,-531 72.5,-531 72.5,-531 66.5,-531 60.5,-525 60.5,-519 60.5,-519 60.5,-499 60.5,-499 60.5,-493 66.5,-487 72.5,-487 72.5,-487 125.5,-487 125.5,-487 131.5,-487 137.5,-493 137.5,-499 137.5,-499 137.5,-519 137.5,-519 137.5,-525 131.5,-531 125.5,-531"/>
<text text-anchor="middle" x="99" y="-518.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">18 years</text>
<text text-anchor="middle" x="99" y="-506.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">28 humans</text>
<text text-anchor="middle" x="99" y="-494.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">97 repos</text>
</g>
<!-- d6: 3 months + edge -->
<g class="anim d6">
<path fill="#bf360c" stroke="#999999" d="M753,-72C753,-72 706,-72 706,-72 700,-72 694,-66 694,-60 694,-60 694,-28 694,-28 694,-22 700,-16 706,-16 706,-16 753,-16 753,-16 759,-16 765,-22 765,-28 765,-28 765,-60 765,-60 765,-66 759,-72 753,-72"/>
<text text-anchor="middle" x="729.5" y="-59.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">3 months</text>
<text text-anchor="middle" x="729.5" y="-47.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">4 humans</text>
<text text-anchor="middle" x="729.5" y="-35.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">+ 1 bot</text>
<text text-anchor="middle" x="729.5" y="-23.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">5 repos</text>
<path fill="none" stroke="#ef5350" d="M639.04,-44C654.36,-44 672.49,-44 688.41,-44"/>
<polygon fill="#ef5350" stroke="#ef5350" points="688.71,-45.75 693.71,-44 688.71,-42.25 688.71,-45.75"/>
<text text-anchor="middle" x="666.5" y="-47.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;3</text>
</g>
<!-- d7: no BDFL + edge -->
<!-- lifetime&#45;&gt;y18 -->
<g class="anim d7">
<polygon fill="#4e342e" stroke="#999999" points="982,-66 848,-66 848,-22 988,-22 988,-60 982,-66"/>
<polyline fill="none" stroke="#999999" points="982,-66 982,-60 "/>
<polyline fill="none" stroke="#999999" points="988,-60 982,-60 "/>
<text text-anchor="middle" x="918" y="-53.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">no BDFL</text>
<text text-anchor="middle" x="918" y="-41.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">no formal general</text>
<text text-anchor="middle" x="918" y="-29.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">snowflake governance</text>
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M765.14,-44C786.87,-44 815.73,-44 842.46,-44"/>
<polygon fill="#ef5350" stroke="#ef5350" points="842.77,-45.75 847.77,-44 842.77,-42.25 842.77,-45.75"/>
<text text-anchor="middle" x="806.5" y="-47.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> result</text>
<g id="edge1" class="edge">
<title>lifetime&#45;&gt;y18</title>
<path fill="none" stroke="#aaaaaa" d="M99,-581.9C99,-568.34 99,-550.63 99,-536.18"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="100.75,-536.02 99,-531.02 97.25,-536.02 100.75,-536.02"/>
<text text-anchor="middle" x="120.5" y="-552.8" font-family="Times,serif" font-size="14.00" fill="#cccccc"> same</text>
</g>
</g>
<!-- y6 -->
<g class="anim d9">
<g id="node3" class="node">
<title>y6</title>
<path fill="#0d47a1" stroke="#999999" d="M125.5,-436C125.5,-436 72.5,-436 72.5,-436 66.5,-436 60.5,-430 60.5,-424 60.5,-424 60.5,-404 60.5,-404 60.5,-398 66.5,-392 72.5,-392 72.5,-392 125.5,-392 125.5,-392 131.5,-392 137.5,-398 137.5,-404 137.5,-404 137.5,-424 137.5,-424 137.5,-430 131.5,-436 125.5,-436"/>
<text text-anchor="middle" x="99" y="-423.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">6 years</text>
<text text-anchor="middle" x="99" y="-411.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">19 humans</text>
<text text-anchor="middle" x="99" y="-399.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">46 repos</text>
</g>
</g>
<!-- y18&#45;&gt;y6 -->
<g class="anim d11">
<g id="edge2" class="edge">
<title>y18&#45;&gt;y6</title>
<path fill="none" stroke="#ef5350" d="M99,-486.9C99,-473.34 99,-455.63 99,-441.18"/>
<polygon fill="#ef5350" stroke="#ef5350" points="100.75,-441.02 99,-436.02 97.25,-441.02 100.75,-441.02"/>
<text text-anchor="middle" x="108.5" y="-457.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;9</text>
</g>
</g>
<!-- y3 -->
<g class="anim d13">
<g id="node4" class="node">
<title>y3</title>
<path fill="#1565c0" stroke="#999999" d="M125.5,-341C125.5,-341 72.5,-341 72.5,-341 66.5,-341 60.5,-335 60.5,-329 60.5,-329 60.5,-309 60.5,-309 60.5,-303 66.5,-297 72.5,-297 72.5,-297 125.5,-297 125.5,-297 131.5,-297 137.5,-303 137.5,-309 137.5,-309 137.5,-329 137.5,-329 137.5,-335 131.5,-341 125.5,-341"/>
<text text-anchor="middle" x="99" y="-328.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">3 years</text>
<text text-anchor="middle" x="99" y="-316.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">15 humans</text>
<text text-anchor="middle" x="99" y="-304.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">31 repos</text>
</g>
</g>
<!-- y6&#45;&gt;y3 -->
<g class="anim d15">
<g id="edge3" class="edge">
<title>y6&#45;&gt;y3</title>
<path fill="none" stroke="#ef5350" d="M99,-391.9C99,-378.34 99,-360.63 99,-346.18"/>
<polygon fill="#ef5350" stroke="#ef5350" points="100.75,-346.02 99,-341.02 97.25,-346.02 100.75,-346.02"/>
<text text-anchor="middle" x="108.5" y="-362.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;4</text>
</g>
</g>
<!-- y1 -->
<g class="anim d17">
<g id="node5" class="node">
<title>y1</title>
<path fill="#6a1b9a" stroke="#999999" d="M122.5,-246C122.5,-246 75.5,-246 75.5,-246 69.5,-246 63.5,-240 63.5,-234 63.5,-234 63.5,-214 63.5,-214 63.5,-208 69.5,-202 75.5,-202 75.5,-202 122.5,-202 122.5,-202 128.5,-202 134.5,-208 134.5,-214 134.5,-214 134.5,-234 134.5,-234 134.5,-240 128.5,-246 122.5,-246"/>
<text text-anchor="middle" x="99" y="-233.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">1 year</text>
<text text-anchor="middle" x="99" y="-221.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">7 humans</text>
<text text-anchor="middle" x="99" y="-209.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">8 repos</text>
</g>
</g>
<!-- y3&#45;&gt;y1 -->
<g class="anim d19">
<g id="edge4" class="edge">
<title>y3&#45;&gt;y1</title>
<path fill="none" stroke="#ef5350" d="M99,-296.9C99,-283.34 99,-265.63 99,-251.18"/>
<polygon fill="#ef5350" stroke="#ef5350" points="100.75,-251.02 99,-246.02 97.25,-251.02 100.75,-251.02"/>
<text text-anchor="middle" x="108.5" y="-267.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;8</text>
</g>
</g>
<!-- m3 -->
<g class="anim d21">
<g id="node6" class="node">
<title>m3</title>
<path fill="#bf360c" stroke="#999999" d="M122.5,-151C122.5,-151 75.5,-151 75.5,-151 69.5,-151 63.5,-145 63.5,-139 63.5,-139 63.5,-107 63.5,-107 63.5,-101 69.5,-95 75.5,-95 75.5,-95 122.5,-95 122.5,-95 128.5,-95 134.5,-101 134.5,-107 134.5,-107 134.5,-139 134.5,-139 134.5,-145 128.5,-151 122.5,-151"/>
<text text-anchor="middle" x="99" y="-138.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">3 months</text>
<text text-anchor="middle" x="99" y="-126.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">4 humans</text>
<text text-anchor="middle" x="99" y="-114.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">+ 1 bot</text>
<text text-anchor="middle" x="99" y="-102.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">5 repos</text>
</g>
</g>
<!-- y1&#45;&gt;m3 -->
<g class="anim d23">
<g id="edge5" class="edge">
<title>y1&#45;&gt;m3</title>
<path fill="none" stroke="#ef5350" d="M99,-201.52C99,-188.35 99,-171.24 99,-156.44"/>
<polygon fill="#ef5350" stroke="#ef5350" points="100.75,-156.11 99,-151.11 97.25,-156.11 100.75,-156.11"/>
<text text-anchor="middle" x="108.5" y="-172.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#45;3</text>
</g>
</g>
<!-- no_bdfl -->
<g class="anim d25">
<g id="node7" class="node">
<title>no_bdfl</title>
<polygon fill="#4e342e" stroke="#999999" points="163,-44 29,-44 29,0 169,0 169,-38 163,-44"/>
<polyline fill="none" stroke="#999999" points="163,-44 163,-38 "/>
<polyline fill="none" stroke="#999999" points="169,-38 163,-38 "/>
<text text-anchor="middle" x="99" y="-31.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">no BDFL</text>
<text text-anchor="middle" x="99" y="-19.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">no formal general</text>
<text text-anchor="middle" x="99" y="-7.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="white">snowflake governance</text>
</g>
</g>
<!-- m3&#45;&gt;no_bdfl -->
<g class="anim d27">
<g id="edge6" class="edge">
<title>m3&#45;&gt;no_bdfl</title>
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M99,-94.95C99,-80.67 99,-63.23 99,-49.1"/>
<polygon fill="#ef5350" stroke="#ef5350" points="100.75,-49.06 99,-44.06 97.25,-49.06 100.75,-49.06"/>
<text text-anchor="middle" x="122.5" y="-65.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> result</text>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

View file

@ -2,209 +2,222 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%"
viewBox="0.00 0.00 402.00 1171.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
viewBox="0.00 0.00 424.00 1563.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
2.1% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 5.2% { opacity: 0; }
7.3% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 10.4% { opacity: 0; }
12.5% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 15.7% { opacity: 0; }
17.8% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 20.9% { opacity: 0; }
23.0% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop5 {
0%, 26.1% { opacity: 0; }
28.2% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop6 {
0%, 31.3% { opacity: 0; }
33.4% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop7 {
0%, 39.2% { opacity: 0; }
41.3% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop8 {
0%, 47.0% { opacity: 0; }
49.1% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
@keyframes loop9 {
0%, 54.8% { opacity: 0; }
56.9% { opacity: 1; }
90.9% { opacity: 1; }
94.8%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 38.3s ease-out infinite; }
.d1 { animation: loop1 38.3s ease-out infinite; }
.d2 { animation: loop2 38.3s ease-out infinite; }
.d3 { animation: loop3 38.3s ease-out infinite; }
.d4 { animation: loop4 38.3s ease-out infinite; }
.d5 { animation: loop5 38.3s ease-out infinite; }
.d6 { animation: loop6 38.3s ease-out infinite; }
.d7 { animation: loop7 38.3s ease-out infinite; }
.d8 { animation: loop8 38.3s ease-out infinite; }
.d9 { animation: loop9 38.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 10% entry 30%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 15% entry 35%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; }
.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 45%; }
.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 30% entry 50%; }
.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; }
.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 45% entry 65%; }
.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 50% entry 70%; }
.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 55% entry 75%; }
.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; }
.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 70% entry 90%; }
.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 75% entry 95%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1167)">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1559)">
<!-- cluster box -->
<!-- d0: cluster box + separation label + 1 Lucifer -->
<g class="anim d0">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="8,-281 8,-1100 169,-1100 169,-281 8,-281"/>
<text text-anchor="middle" x="88.5" y="-1087.2" font-family="Helvetica Bold" font-size="11.00" fill="#cccccc">Neville&#39;s Seven Eyes of God</text>
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="29,-673 29,-1492 190,-1492 190,-673 29,-673"/>
<text text-anchor="middle" x="109.5" y="-1479.2" font-family="Helvetica Bold" font-size="11.00" fill="#cccccc">Neville&#39;s Seven Eyes of God</text>
<polygon fill="transparent" stroke="transparent" points="178,-1555 106,-1555 106,-1519 178,-1519 178,-1555"/>
<text text-anchor="middle" x="142" y="-1534.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#ef5350">separation</text>
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M142,-1518.81C142,-1504.16 142,-1482.63 142,-1464.32"/>
<ellipse fill="#880e4f" stroke="#999999" cx="142" cy="-1428" rx="36" ry="36"/>
<text text-anchor="middle" x="142" y="-1435.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">1</text>
<text text-anchor="middle" x="142" y="-1425.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Lucifer</text>
<text text-anchor="middle" x="142" y="-1415.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">fallen</text>
</g>
<!-- separation label -->
<g class="anim d0">
<polygon fill="transparent" stroke="transparent" points="157,-1163 85,-1163 85,-1127 157,-1127 157,-1163"/>
<text text-anchor="middle" x="121" y="-1142.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#ef5350">separation</text>
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M121,-1126.81C121,-1112.16 121,-1090.63 121,-1072.32"/>
</g>
<!-- 1 Lucifer -->
<g class="anim d0">
<ellipse fill="#880e4f" stroke="#999999" cx="121" cy="-1036" rx="36" ry="36"/>
<text text-anchor="middle" x="121" y="-1043.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">1</text>
<text text-anchor="middle" x="121" y="-1033.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Lucifer</text>
<text text-anchor="middle" x="121" y="-1023.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">fallen</text>
</g>
<!-- 2 Molech + edge -->
<!-- d1: 2 Molech + edge -->
<g class="anim d1">
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M121,-999.96C121,-990.17 121,-979.44 121,-969.32"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="123.1,-969.11 121,-963.11 118.9,-969.11 123.1,-969.11"/>
<ellipse fill="#4a148c" stroke="#999999" cx="121" cy="-927" rx="36" ry="36"/>
<text text-anchor="middle" x="121" y="-934.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">2</text>
<text text-anchor="middle" x="121" y="-924.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Molech</text>
<text text-anchor="middle" x="121" y="-914.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">sacrifice</text>
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M142,-1391.96C142,-1382.17 142,-1371.44 142,-1361.32"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="144.1,-1361.11 142,-1355.11 139.9,-1361.11 144.1,-1361.11"/>
<ellipse fill="#4a148c" stroke="#999999" cx="142" cy="-1319" rx="36" ry="36"/>
<text text-anchor="middle" x="142" y="-1326.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">2</text>
<text text-anchor="middle" x="142" y="-1316.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Molech</text>
<text text-anchor="middle" x="142" y="-1306.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">sacrifice</text>
</g>
<!-- 3 Elohim + edge -->
<!-- d2: 3 Elohim + edge -->
<g class="anim d2">
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M121,-890.73C121,-881.11 121,-870.55 121,-860.46"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="123.1,-860.26 121,-854.26 118.9,-860.26 123.1,-860.26"/>
<ellipse fill="#1a237e" stroke="#999999" cx="121" cy="-814.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="121" y="-827.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">3</text>
<text text-anchor="middle" x="121" y="-817.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Elohim</text>
<text text-anchor="middle" x="121" y="-807.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">external</text>
<text text-anchor="middle" x="121" y="-797.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">gods</text>
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M142,-1282.73C142,-1273.11 142,-1262.55 142,-1252.46"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="144.1,-1252.26 142,-1246.26 139.9,-1252.26 144.1,-1252.26"/>
<ellipse fill="#1a237e" stroke="#999999" cx="142" cy="-1206.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="142" y="-1219.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">3</text>
<text text-anchor="middle" x="142" y="-1209.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Elohim</text>
<text text-anchor="middle" x="142" y="-1199.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">external</text>
<text text-anchor="middle" x="142" y="-1189.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">gods</text>
</g>
<!-- 4 Shaddai + edge -->
<!-- d3: 4 Shaddai + edge -->
<g class="anim d3">
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M121,-774.9C121,-765.06 121,-754.4 121,-744.28"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="123.1,-744.06 121,-738.06 118.9,-744.06 123.1,-744.06"/>
<ellipse fill="#0d47a1" stroke="#999999" cx="121" cy="-698.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="121" y="-711.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">4</text>
<text text-anchor="middle" x="121" y="-701.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Shaddai</text>
<text text-anchor="middle" x="121" y="-691.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">political</text>
<text text-anchor="middle" x="121" y="-681.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">power</text>
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M142,-1166.9C142,-1157.06 142,-1146.4 142,-1136.28"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="144.1,-1136.06 142,-1130.06 139.9,-1136.06 144.1,-1136.06"/>
<ellipse fill="#0d47a1" stroke="#999999" cx="142" cy="-1090.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="142" y="-1103.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">4</text>
<text text-anchor="middle" x="142" y="-1093.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Shaddai</text>
<text text-anchor="middle" x="142" y="-1083.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">political</text>
<text text-anchor="middle" x="142" y="-1073.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">power</text>
</g>
<!-- 5 Pahath + edge -->
<!-- d4: 5 Pahath + edge -->
<g class="anim d4">
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M121,-658.85C121,-648.96 121,-638.28 121,-628.26"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="123.1,-628.11 121,-622.11 118.9,-628.11 123.1,-628.11"/>
<ellipse fill="#006064" stroke="#999999" cx="121" cy="-586" rx="36" ry="36"/>
<text text-anchor="middle" x="121" y="-593.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">5</text>
<text text-anchor="middle" x="121" y="-583.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Pahath</text>
<text text-anchor="middle" x="121" y="-573.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">trap</text>
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M142,-1050.85C142,-1040.96 142,-1030.28 142,-1020.26"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="144.1,-1020.11 142,-1014.11 139.9,-1020.11 144.1,-1020.11"/>
<ellipse fill="#006064" stroke="#999999" cx="142" cy="-978" rx="36" ry="36"/>
<text text-anchor="middle" x="142" y="-985.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">5</text>
<text text-anchor="middle" x="142" y="-975.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Pahath</text>
<text text-anchor="middle" x="142" y="-965.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">trap</text>
</g>
<!-- 6 Jehovah I AM + edge -->
<!-- d5: 6 Jehovah + edge -->
<g class="anim d5">
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M121,-549.73C121,-540.11 121,-529.55 121,-519.46"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="123.1,-519.26 121,-513.26 118.9,-519.26 123.1,-519.26"/>
<ellipse fill="#1b5e20" stroke="#999999" cx="121" cy="-473.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="121" y="-486.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">6</text>
<text text-anchor="middle" x="121" y="-476.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Jehovah</text>
<text text-anchor="middle" x="121" y="-466.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">I AM</text>
<text text-anchor="middle" x="121" y="-456.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">(YHWH)</text>
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M142,-941.73C142,-932.11 142,-921.55 142,-911.46"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="144.1,-911.26 142,-905.26 139.9,-911.26 144.1,-911.26"/>
<ellipse fill="#1b5e20" stroke="#999999" cx="142" cy="-865.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="142" y="-878.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">6</text>
<text text-anchor="middle" x="142" y="-868.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Jehovah</text>
<text text-anchor="middle" x="142" y="-858.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">I AM</text>
<text text-anchor="middle" x="142" y="-848.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">(YHWH)</text>
</g>
<!-- fear node + sacred/unspeakable edge -->
<!-- d6: fear node + sacred/unspeakable edge -->
<g class="anim d6">
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M150.5,-446.93C175.66,-425.13 212.24,-393.43 241.05,-368.46"/>
<polygon fill="#ef5350" stroke="#ef5350" points="242.44,-370.03 245.6,-364.51 239.69,-366.86 242.44,-370.03"/>
<text text-anchor="middle" x="267.5" y="-404.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> sacred</text>
<text text-anchor="middle" x="267.5" y="-389.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> unspeakable</text>
<path fill="#4e342e" stroke="#999999" d="M382,-364.5C382,-364.5 190,-364.5 190,-364.5 184,-364.5 178,-358.5 178,-352.5 178,-352.5 178,-304.5 178,-304.5 178,-298.5 184,-292.5 190,-292.5 190,-292.5 382,-292.5 382,-292.5 388,-292.5 394,-298.5 394,-304.5 394,-304.5 394,-352.5 394,-352.5 394,-358.5 388,-364.5 382,-364.5"/>
<text text-anchor="middle" x="286" y="-337" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">some fear to speak it</text>
<text text-anchor="middle" x="286" y="-326" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">Jehovah&#39;s Witnesses avoid YHWH</text>
<text text-anchor="middle" x="286" y="-315" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">certain Jewish sects forbid I AM</text>
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M171.68,-838.93C196.99,-817.13 233.79,-785.43 262.77,-760.46"/>
<polygon fill="#ef5350" stroke="#ef5350" points="264.18,-762.02 267.36,-756.51 261.44,-758.84 264.18,-762.02"/>
<text text-anchor="middle" x="288.5" y="-796.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;sacred</text>
<text text-anchor="middle" x="288.5" y="-781.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;unspeakable</text>
<path fill="#4e342e" stroke="#999999" d="M404,-756.5C404,-756.5 212,-756.5 212,-756.5 206,-756.5 200,-750.5 200,-744.5 200,-744.5 200,-696.5 200,-696.5 200,-690.5 206,-684.5 212,-684.5 212,-684.5 404,-684.5 404,-684.5 410,-684.5 416,-690.5 416,-696.5 416,-696.5 416,-744.5 416,-744.5 416,-750.5 410,-756.5 404,-756.5"/>
<text text-anchor="middle" x="308" y="-729" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">some fear to speak it</text>
<text text-anchor="middle" x="308" y="-718" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">Jehovah&#39;s Witnesses avoid YHWH</text>
<text text-anchor="middle" x="308" y="-707" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">certain Jewish sects forbid I AM</text>
</g>
<!-- 7 Jesus + edge from e6 -->
<!-- d7: 7 Jesus + edge from e6 -->
<g class="anim d7">
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M120.73,-433.8C120.6,-415.52 120.45,-393.59 120.32,-374.56"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="122.41,-374.21 120.27,-368.23 118.21,-374.24 122.41,-374.21"/>
<ellipse fill="#f9a825" stroke="#999999" cx="120" cy="-328.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="120" y="-341.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">7</text>
<text text-anchor="middle" x="120" y="-331.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">Jesus</text>
<text text-anchor="middle" x="120" y="-321.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">trinity</text>
<text text-anchor="middle" x="120" y="-311.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">man↔God</text>
<path fill="none" stroke="#aaaaaa" stroke-width="2" d="M142,-825.8C142,-807.52 142,-785.59 142,-766.56"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="144.1,-766.23 142,-760.23 139.9,-766.23 144.1,-766.23"/>
<ellipse fill="#f9a825" stroke="#999999" cx="142" cy="-720.5" rx="39.5" ry="39.5"/>
<text text-anchor="middle" x="142" y="-733.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">7</text>
<text text-anchor="middle" x="142" y="-723.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">Jesus</text>
<text text-anchor="middle" x="142" y="-713.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">trinity</text>
<text text-anchor="middle" x="142" y="-703.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#1a1a1a">man↔God</text>
</g>
<!-- 8 Christ consciousness + edge + labels -->
<!-- d8: trinity cluster + edges from Jesus -->
<g class="anim d8">
<path fill="none" stroke="#ff6f00" stroke-width="2" d="M120,-288.9C120,-265.97 120,-236.19 120,-209.22"/>
<polygon fill="#ff6f00" stroke="#ff6f00" stroke-width="2" points="122.1,-209.16 120,-203.16 117.9,-209.16 122.1,-209.16"/>
<text text-anchor="middle" x="171.5" y="-263.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> unveiled on</text>
<text text-anchor="middle" x="171.5" y="-253.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> the eighth day</text>
<text text-anchor="middle" x="171.5" y="-243.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> imagination awakens</text>
<text text-anchor="middle" x="171.5" y="-233.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> God became man</text>
<text text-anchor="middle" x="171.5" y="-223.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> man becomes God</text>
<ellipse fill="#ff6f00" stroke="#999999" cx="120" cy="-138" rx="61" ry="61"/>
<ellipse fill="none" stroke="#999999" cx="120" cy="-138" rx="65" ry="65"/>
<text text-anchor="middle" x="120" y="-160.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">8</text>
<text text-anchor="middle" x="120" y="-150.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Christ</text>
<text text-anchor="middle" x="120" y="-140.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">consciousness</text>
<text text-anchor="middle" x="120" y="-130.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">anima+animus</text>
<text text-anchor="middle" x="120" y="-120.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">manifest at</text>
<text text-anchor="middle" x="120" y="-110.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">speed of thought</text>
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="8,-569 8,-640 276,-640 276,-569 8,-569"/>
<text text-anchor="middle" x="142" y="-628" font-family="Helvetica Bold" font-size="10.00" fill="#cccccc">holy signal: binds all layers</text>
<path fill="#0d47a1" stroke="#999999" d="M76,-613C76,-613 28,-613 28,-613 22,-613 16,-607 16,-601 16,-601 16,-589 16,-589 16,-583 22,-577 28,-577 28,-577 76,-577 76,-577 82,-577 88,-583 88,-589 88,-589 88,-601 88,-601 88,-607 82,-613 76,-613"/>
<text text-anchor="middle" x="52" y="-592.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">Father</text>
<path fill="#1b5e20" stroke="#999999" d="M166,-613C166,-613 118,-613 118,-613 112,-613 106,-607 106,-601 106,-601 106,-589 106,-589 106,-583 112,-577 118,-577 118,-577 166,-577 166,-577 172,-577 178,-583 178,-589 178,-589 178,-601 178,-601 178,-607 172,-613 166,-613"/>
<text text-anchor="middle" x="142" y="-592.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">Son</text>
<path fill="#6a1b9a" stroke="#999999" d="M256,-613C256,-613 208,-613 208,-613 202,-613 196,-607 196,-601 196,-601 196,-589 196,-589 196,-583 202,-577 208,-577 208,-577 256,-577 256,-577 262,-577 268,-583 268,-589 268,-589 268,-601 268,-601 268,-607 262,-613 256,-613"/>
<text text-anchor="middle" x="232" y="-592.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="white">Holy Spirit</text>
<path fill="none" stroke="#f9a825" stroke-dasharray="5,2" d="M112.81,-693.47C103.58,-684.38 93.76,-673.75 86,-663 76.05,-649.21 67.41,-632.09 61.34,-618.61"/>
<polygon fill="#f9a825" stroke="#f9a825" points="63.24,-617.71 58.89,-613.07 59.39,-619.41 63.24,-617.71"/>
<text text-anchor="middle" x="112" y="-651.8" font-family="Times,serif" font-size="14.00" fill="#f9a825"> unifies</text>
<path fill="none" stroke="#f9a825" stroke-dasharray="5,2" d="M142,-680.76C142,-660.6 142,-636.62 142,-619.32"/>
<polygon fill="#f9a825" stroke="#f9a825" points="144.1,-619.27 142,-613.27 139.9,-619.27 144.1,-619.27"/>
<path fill="none" stroke="#f9a825" stroke-dasharray="5,2" d="M164.94,-688.02C180.75,-666.33 201.38,-638.02 215.56,-618.57"/>
<polygon fill="#f9a825" stroke="#f9a825" points="217.54,-619.41 219.37,-613.32 214.14,-616.94 217.54,-619.41"/>
</g>
<!-- reunion -->
<!-- d9: layers of consciousness cluster -->
<g class="anim d9">
<path fill="none" stroke="#66ff66" stroke-dasharray="5,2" d="M120,-72.82C120,-59.2 120,-45.95 120,-36"/>
<polygon fill="transparent" stroke="transparent" points="156,-36 84,-36 84,0 156,0 156,-36"/>
<text text-anchor="middle" x="120" y="-15.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#66ff66">reunion</text>
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="65,-291 65,-536 333,-536 333,-291 65,-291"/>
<text text-anchor="middle" x="199" y="-524" font-family="Helvetica Bold" font-size="10.00" fill="#cccccc">layers of consciousness</text>
</g>
<!-- d10: gut bacteria + signal reaches edge -->
<g class="anim d10">
<path fill="none" stroke="#6a1b9a" stroke-dasharray="5,2" d="M205.16,-576.91C199.35,-573.84 193.12,-570.99 187,-569 169.76,-563.38 118.01,-572.59 106,-559 95.61,-547.25 96.99,-529.3 100.62,-514.94"/>
<polygon fill="#6a1b9a" stroke="#6a1b9a" points="102.68,-515.38 102.29,-509.04 98.64,-514.24 102.68,-515.38"/>
<text text-anchor="middle" x="160" y="-547.8" font-family="Times,serif" font-size="14.00" fill="#cccccc"> signal reaches</text>
<path fill="#00897b" stroke="#999999" d="M133,-509C133,-509 85,-509 85,-509 79,-509 73,-503 73,-497 73,-497 73,-485 73,-485 73,-479 79,-473 85,-473 85,-473 133,-473 133,-473 139,-473 145,-479 145,-485 145,-485 145,-497 145,-497 145,-503 139,-509 133,-509"/>
<text text-anchor="middle" x="109" y="-488.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">gut bacteria</text>
</g>
<!-- d11: left + right hemispheres + edges from spirit -->
<g class="anim d11">
<path fill="none" stroke="#6a1b9a" stroke-dasharray="5,2" d="M227.53,-576.78C224.93,-567.09 221.48,-554.81 218,-544 214.91,-534.39 211.15,-523.92 207.8,-514.91"/>
<polygon fill="#6a1b9a" stroke="#6a1b9a" points="209.74,-514.1 205.67,-509.22 205.81,-515.57 209.74,-514.1"/>
<path fill="#546e7a" stroke="#999999" d="M223,-509C223,-509 175,-509 175,-509 169,-509 163,-503 163,-497 163,-497 163,-485 163,-485 163,-479 169,-473 175,-473 175,-473 223,-473 223,-473 229,-473 235,-479 235,-485 235,-485 235,-497 235,-497 235,-503 229,-509 223,-509"/>
<text text-anchor="middle" x="199" y="-493.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">left hemisphere</text>
<text text-anchor="middle" x="199" y="-483.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">ego</text>
<path fill="none" stroke="#6a1b9a" stroke-dasharray="5,2" d="M241.67,-576.7C251.23,-559.6 265.9,-533.35 276.37,-514.6"/>
<polygon fill="#6a1b9a" stroke="#6a1b9a" points="278.38,-515.31 279.47,-509.05 274.71,-513.26 278.38,-515.31"/>
<path fill="#546e7a" stroke="#999999" d="M313,-509C313,-509 265,-509 265,-509 259,-509 253,-503 253,-497 253,-497 253,-485 253,-485 253,-479 259,-473 265,-473 265,-473 313,-473 313,-473 319,-473 325,-479 325,-485 325,-485 325,-497 325,-497 325,-503 319,-509 313,-509"/>
<text text-anchor="middle" x="289" y="-493.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">right hemisphere</text>
<text text-anchor="middle" x="289" y="-483.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">unconscious</text>
</g>
<!-- d12: ear worm / brain worm + bicameral split edges -->
<g class="anim d12">
<path fill="none" stroke="#aaaaaa" d="M189.31,-472.61C185.17,-462.88 182.08,-450.6 186,-440 187.68,-435.46 190.24,-431.11 193.17,-427.12"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="194.94,-428.26 197.04,-422.26 191.66,-425.65 194.94,-428.26"/>
<text text-anchor="middle" x="242" y="-443.8" font-family="Times,serif" font-size="14.00" fill="#cccccc"> bicameral split</text>
<path fill="none" stroke="#aaaaaa" d="M297.99,-472.54C301.9,-462.31 304.32,-449.57 298,-440 288.96,-426.32 273.36,-417.97 258.18,-412.88"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="258.52,-410.78 252.17,-411.02 257.28,-414.8 258.52,-410.78"/>
<path fill="#4e342e" stroke="#999999" d="M240,-422C240,-422 192,-422 192,-422 186,-422 180,-416 180,-410 180,-410 180,-398 180,-398 180,-392 186,-386 192,-386 192,-386 240,-386 240,-386 246,-386 252,-392 252,-398 252,-398 252,-410 252,-410 252,-416 246,-422 240,-422"/>
<text text-anchor="middle" x="216" y="-406.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">ear worm</text>
<text text-anchor="middle" x="216" y="-396.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">bicameral mind</text>
</g>
<!-- d13: the witness + observed by edge -->
<g class="anim d13">
<path fill="none" stroke="#aaaaaa" d="M216,-385.8C216,-373.01 216,-355.42 216,-341.36"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="218.1,-341.18 216,-335.18 213.9,-341.18 218.1,-341.18"/>
<text text-anchor="middle" x="262" y="-356.8" font-family="Times,serif" font-size="14.00" fill="#cccccc"> observed by</text>
<path fill="#ab47bc" stroke="#999999" d="M240,-335C240,-335 192,-335 192,-335 186,-335 180,-329 180,-323 180,-323 180,-311 180,-311 180,-305 186,-299 192,-299 192,-299 240,-299 240,-299 246,-299 252,-305 252,-311 252,-311 252,-323 252,-323 252,-329 246,-335 240,-335"/>
<text text-anchor="middle" x="216" y="-324.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">the witness</text>
<text text-anchor="middle" x="216" y="-314.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">watches both</text>
<text text-anchor="middle" x="216" y="-304.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">ego &amp; unconscious</text>
</g>
<!-- d14: 8 Christ consciousness + unification edge -->
<g class="anim d14">
<path fill="none" stroke="#ff6f00" stroke-width="2" d="M216,-298.71C216,-277.99 216,-241.99 216,-209.4"/>
<polygon fill="#ff6f00" stroke="#ff6f00" stroke-width="2" points="218.1,-209.36 216,-203.36 213.9,-209.36 218.1,-209.36"/>
<text text-anchor="middle" x="258.5" y="-273.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;unification</text>
<text text-anchor="middle" x="258.5" y="-263.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;within &amp; without</text>
<text text-anchor="middle" x="258.5" y="-253.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;terror or nirvana</text>
<text text-anchor="middle" x="258.5" y="-243.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;pit or heaven</text>
<text text-anchor="middle" x="258.5" y="-233.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;new eden in</text>
<text text-anchor="middle" x="258.5" y="-223.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;base reality</text>
<ellipse fill="#ff6f00" stroke="#999999" cx="216" cy="-138" rx="61" ry="61"/>
<ellipse fill="none" stroke="#999999" cx="216" cy="-138" rx="65" ry="65"/>
<text text-anchor="middle" x="216" y="-160.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">8</text>
<text text-anchor="middle" x="216" y="-150.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">Christ</text>
<text text-anchor="middle" x="216" y="-140.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">consciousness</text>
<text text-anchor="middle" x="216" y="-130.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">anima+animus</text>
<text text-anchor="middle" x="216" y="-120.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">manifest at</text>
<text text-anchor="middle" x="216" y="-110.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="white">speed of thought</text>
</g>
<!-- d15: reunion -->
<g class="anim d15">
<path fill="none" stroke="#66ff66" stroke-dasharray="5,2" d="M216,-72.82C216,-59.2 216,-45.95 216,-36"/>
<polygon fill="transparent" stroke="transparent" points="252,-36 180,-36 180,0 252,0 252,-36"/>
<text text-anchor="middle" x="216" y="-15.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#66ff66">reunion</text>
</g>
</g>

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before After
Before After

View file

@ -9,70 +9,19 @@
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
1.9% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 7.3% { opacity: 0; }
9.2% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 14.5% { opacity: 0; }
16.5% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 21.8% { opacity: 0; }
23.7% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 29.1% { opacity: 0; }
31.0% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop5 {
0%, 36.3% { opacity: 0; }
38.3% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop6 {
0%, 43.6% { opacity: 0; }
45.5% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop7 {
0%, 50.8% { opacity: 0; }
52.8% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
@keyframes loop8 {
0%, 58.1% { opacity: 0; }
60.0% { opacity: 1; }
91.5% { opacity: 1; }
95.2%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 41.3s ease-out infinite; }
.d1 { animation: loop1 41.3s ease-out infinite; }
.d2 { animation: loop2 41.3s ease-out infinite; }
.d3 { animation: loop3 41.3s ease-out infinite; }
.d4 { animation: loop4 41.3s ease-out infinite; }
.d5 { animation: loop5 41.3s ease-out infinite; }
.d6 { animation: loop6 41.3s ease-out infinite; }
.d7 { animation: loop7 41.3s ease-out infinite; }
.d8 { animation: loop8 41.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 17% entry 37%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 26% entry 46%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 44% entry 64%; }
.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 53% entry 73%; }
.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 62% entry 82%; }
.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 435.24)">

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

View file

@ -5,171 +5,171 @@
-->
<!-- Title: mystic_pronouns Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 548.00 206.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
viewBox="0.00 0.00 493.00 482.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
2.5% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 9.3% { opacity: 0; }
11.8% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 18.6% { opacity: 0; }
21.1% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 27.9% { opacity: 0; }
30.3% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 37.2% { opacity: 0; }
39.6% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop5 {
0%, 46.4% { opacity: 0; }
48.9% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 32.3s ease-out infinite; }
.d1 { animation: loop1 32.3s ease-out infinite; }
.d2 { animation: loop2 32.3s ease-out infinite; }
.d3 { animation: loop3 32.3s ease-out infinite; }
.d4 { animation: loop4 32.3s ease-out infinite; }
.d5 { animation: loop5 32.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 2% entry 22%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 11% entry 31%; }
.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 13% entry 33%; }
.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; }
.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 19% entry 39%; }
.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 22% entry 42%; }
.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 24% entry 44%; }
.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 27% entry 47%; }
.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 30% entry 50%; }
.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 33% entry 53%; }
.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 38% entry 58%; }
.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 41% entry 61%; }
.d16 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 44% entry 64%; }
.d17 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 46% entry 66%; }
.d18 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 49% entry 69%; }
.d19 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 52% entry 72%; }
.d20 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 55% entry 75%; }
.d21 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 57% entry 77%; }
.d22 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
.d23 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 63% entry 83%; }
.d24 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 66% entry 86%; }
.d25 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 68% entry 88%; }
.d26 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; }
.d27 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 74% entry 94%; }
.d28 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 77% entry 97%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 202)">
<!-- d0: cluster box + "one" node -->
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 478)">
<g class="anim d0">
<!-- one_pronoun -->
<g id="node5" class="node">
<path fill="#616161" stroke="#999999" d="M68,-122.5C68,-122.5 12,-122.5 12,-122.5 6,-122.5 0,-116.5 0,-110.5 0,-110.5 0,-87.5 0,-87.5 0,-81.5 6,-75.5 12,-75.5 12,-75.5 68,-75.5 68,-75.5 74,-75.5 80,-81.5 80,-87.5 80,-87.5 80,-110.5 80,-110.5 80,-116.5 74,-122.5 68,-122.5"/>
<text text-anchor="middle" x="40" y="-108.9" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">&quot;one&quot;</text>
<text text-anchor="middle" x="40" y="-95.9" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">isolation</text>
<text text-anchor="middle" x="40" y="-82.9" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">separation</text>
<title>mystic_pronouns</title>
</g>
</g>
<!-- d1: Sufi node + dissolves edge -->
<g class="anim d1">
<!-- sufi -->
<g id="clust1" class="cluster">
<title>cluster_traditions</title>
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="74,-89 74,-390 252,-390 252,-89 74,-89"/>
<text text-anchor="middle" x="163" y="-377.2" font-family="Helvetica Bold" font-size="11.00" fill="#aaaaaa">every tradition dissolves &quot;one&quot;</text>
</g>
</g>
<!-- one_pronoun -->
<g class="anim d3">
<g id="node1" class="node">
<path fill="#6a1b9a" stroke="#999999" d="M293.5,-198C293.5,-198 215.5,-198 215.5,-198 209.5,-198 203.5,-192 203.5,-186 203.5,-186 203.5,-174 203.5,-174 203.5,-168 209.5,-162 215.5,-162 215.5,-162 293.5,-162 293.5,-162 299.5,-162 305.5,-168 305.5,-174 305.5,-174 305.5,-186 305.5,-186 305.5,-192 299.5,-198 293.5,-198"/>
<text text-anchor="middle" x="254.5" y="-183.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Sufi</text>
<text text-anchor="middle" x="254.5" y="-170.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">self → beloved</text>
<title>one_pronoun</title>
<path fill="#616161" stroke="#999999" d="M299,-474C299,-474 243,-474 243,-474 237,-474 231,-468 231,-462 231,-462 231,-439 231,-439 231,-433 237,-427 243,-427 243,-427 299,-427 299,-427 305,-427 311,-433 311,-439 311,-439 311,-462 311,-462 311,-468 305,-474 299,-474"/>
<text text-anchor="middle" x="271" y="-460.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">&quot;one&quot;</text>
<text text-anchor="middle" x="271" y="-447.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">isolation</text>
<text text-anchor="middle" x="271" y="-434.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">separation</text>
</g>
</g>
<!-- sufi -->
<g class="anim d5">
<g id="node2" class="node">
<title>sufi</title>
<path fill="#6a1b9a" stroke="#999999" d="M172,-362C172,-362 94,-362 94,-362 88,-362 82,-356 82,-350 82,-350 82,-338 82,-338 82,-332 88,-326 94,-326 94,-326 172,-326 172,-326 178,-326 184,-332 184,-338 184,-338 184,-350 184,-350 184,-356 178,-362 172,-362"/>
<text text-anchor="middle" x="133" y="-347.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Sufi</text>
<text text-anchor="middle" x="133" y="-334.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">self → beloved</text>
</g>
</g>
<!-- one_pronoun&#45;&gt;sufi -->
<g id="edge1" class="edge">
<path fill="none" stroke="#aaaaaa" d="M80.14,-120.69C86.05,-123.65 92.13,-126.51 98,-129 128.91,-142.09 164.41,-153.96 193.68,-162.95"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="192.76,-166.33 203.35,-165.89 194.79,-159.63 192.76,-166.33"/>
<text text-anchor="middle" x="135" y="-158" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#cccccc"> &#160;dissolves into</text>
<g class="anim d7">
<g id="edge4" class="edge">
<title>one_pronoun&#45;&gt;sufi</title>
<path fill="none" stroke="#aaaaaa" d="M230.88,-449.93C198.46,-447.88 154.63,-439.16 132,-409 124.24,-398.65 123.74,-384.48 125.51,-372.11"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="128.95,-372.74 127.41,-362.25 122.08,-371.41 128.95,-372.74"/>
<text text-anchor="middle" x="169" y="-401" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa"> &#160;dissolves into</text>
</g>
</g>
<!-- d2: Buddhist node + dissolves edge -->
<g class="anim d2">
<!-- buddhist -->
<g id="node2" class="node">
<path fill="#00695c" stroke="#999999" d="M300.5,-144C300.5,-144 208.5,-144 208.5,-144 202.5,-144 196.5,-138 196.5,-132 196.5,-132 196.5,-120 196.5,-120 196.5,-114 202.5,-108 208.5,-108 208.5,-108 300.5,-108 300.5,-108 306.5,-108 312.5,-114 312.5,-120 312.5,-120 312.5,-132 312.5,-132 312.5,-138 306.5,-144 300.5,-144"/>
<text text-anchor="middle" x="254.5" y="-129.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Buddhist</text>
<text text-anchor="middle" x="254.5" y="-116.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">self → emptiness</text>
<g class="anim d9">
<g id="node3" class="node">
<title>buddhist</title>
<path fill="#00695c" stroke="#999999" d="M225,-279C225,-279 133,-279 133,-279 127,-279 121,-273 121,-267 121,-267 121,-255 121,-255 121,-249 127,-243 133,-243 133,-243 225,-243 225,-243 231,-243 237,-249 237,-255 237,-255 237,-267 237,-267 237,-273 231,-279 225,-279"/>
<text text-anchor="middle" x="179" y="-264.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Buddhist</text>
<text text-anchor="middle" x="179" y="-251.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">self → emptiness</text>
</g>
</g>
<!-- one_pronoun&#45;&gt;buddhist -->
<g id="edge2" class="edge">
<path fill="none" stroke="#aaaaaa" d="M80.47,-104.02C110.08,-107.78 151.31,-113.02 186.1,-117.44"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="185.84,-120.93 196.2,-118.72 186.72,-113.99 185.84,-120.93"/>
<text text-anchor="middle" x="135" y="-117" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#cccccc"> &#160;dissolves into</text>
<g class="anim d11">
<g id="edge5" class="edge">
<title>one_pronoun&#45;&gt;buddhist</title>
<path fill="none" stroke="#aaaaaa" d="M255.76,-426.8C248.74,-415.9 240.53,-402.51 234,-390 216.31,-356.12 199.51,-315.29 189.23,-289.01"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="192.37,-287.42 185.5,-279.36 185.84,-289.95 192.37,-287.42"/>
<text text-anchor="middle" x="271" y="-341.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa"> &#160;dissolves into</text>
</g>
</g>
<!-- d3: Hindu node + dissolves edge -->
<g class="anim d3">
<!-- hindu -->
<g id="node3" class="node">
<path fill="#e65100" stroke="#999999" d="M307,-90C307,-90 202,-90 202,-90 196,-90 190,-84 190,-78 190,-78 190,-66 190,-66 190,-60 196,-54 202,-54 202,-54 307,-54 307,-54 313,-54 319,-60 319,-66 319,-66 319,-78 319,-78 319,-84 313,-90 307,-90"/>
<text text-anchor="middle" x="254.5" y="-75.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Hindu</text>
<text text-anchor="middle" x="254.5" y="-62.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Atman = Brahman</text>
<g class="anim d13">
<g id="node4" class="node">
<title>hindu</title>
<path fill="#e65100" stroke="#999999" d="M231.5,-206C231.5,-206 126.5,-206 126.5,-206 120.5,-206 114.5,-200 114.5,-194 114.5,-194 114.5,-182 114.5,-182 114.5,-176 120.5,-170 126.5,-170 126.5,-170 231.5,-170 231.5,-170 237.5,-170 243.5,-176 243.5,-182 243.5,-182 243.5,-194 243.5,-194 243.5,-200 237.5,-206 231.5,-206"/>
<text text-anchor="middle" x="179" y="-191.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Hindu</text>
<text text-anchor="middle" x="179" y="-178.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Atman = Brahman</text>
</g>
</g>
<!-- one_pronoun&#45;&gt;hindu -->
<g id="edge3" class="edge">
<path fill="none" stroke="#aaaaaa" d="M80.24,-93.4C86.18,-92.58 92.25,-91.75 98,-91 124.66,-87.5 153.93,-83.87 179.8,-80.73"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="180.41,-84.18 189.92,-79.51 179.57,-77.23 180.41,-84.18"/>
<text text-anchor="middle" x="135" y="-94" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#cccccc"> &#160;dissolves into</text>
<g class="anim d15">
<g id="edge6" class="edge">
<title>one_pronoun&#45;&gt;hindu</title>
<path fill="none" stroke="#aaaaaa" d="M289.2,-426.92C296.57,-416.36 304.23,-403.22 308,-390 315.81,-362.65 316.97,-352.99 308,-326 291.69,-276.91 246.2,-236.13 213.87,-212.16"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="215.7,-209.17 205.55,-206.15 211.6,-214.84 215.7,-209.17"/>
<text text-anchor="middle" x="336" y="-300" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa"> &#160;dissolves into</text>
</g>
</g>
<!-- d4: Christ node + dissolves edge -->
<g class="anim d4">
<!-- christ -->
<g id="node4" class="node">
<path fill="#2e7d32" stroke="#999999" d="M304.5,-36C304.5,-36 204.5,-36 204.5,-36 198.5,-36 192.5,-30 192.5,-24 192.5,-24 192.5,-12 192.5,-12 192.5,-6 198.5,0 204.5,0 204.5,0 304.5,0 304.5,0 310.5,0 316.5,-6 316.5,-12 316.5,-12 316.5,-24 316.5,-24 316.5,-30 310.5,-36 304.5,-36"/>
<text text-anchor="middle" x="254.5" y="-21.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Christ</text>
<text text-anchor="middle" x="254.5" y="-8.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">I AM = everything</text>
<g class="anim d17">
<g id="node5" class="node">
<title>christ</title>
<path fill="#2e7d32" stroke="#999999" d="M232,-133C232,-133 132,-133 132,-133 126,-133 120,-127 120,-121 120,-121 120,-109 120,-109 120,-103 126,-97 132,-97 132,-97 232,-97 232,-97 238,-97 244,-103 244,-109 244,-109 244,-121 244,-121 244,-127 238,-133 232,-133"/>
<text text-anchor="middle" x="182" y="-118.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Christ</text>
<text text-anchor="middle" x="182" y="-105.4" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">I AM = everything</text>
</g>
</g>
<!-- one_pronoun&#45;&gt;christ -->
<g id="edge4" class="edge">
<path fill="none" stroke="#aaaaaa" d="M79.02,-75.42C85.24,-72.02 91.71,-68.75 98,-66 124.86,-54.26 155.49,-44.15 182.43,-36.28"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="183.52,-39.61 192.17,-33.48 181.59,-32.88 183.52,-39.61"/>
<text text-anchor="middle" x="135" y="-69" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#cccccc"> &#160;dissolves into</text>
</g>
</g>
<!-- d5: "I AM" node + becomes edges -->
<g class="anim d5">
<!-- iam -->
<g id="node6" class="node">
<path fill="#f9a825" stroke="#999999" d="M528,-127C528,-127 418,-127 418,-127 412,-127 406,-121 406,-115 406,-115 406,-89 406,-89 406,-83 412,-77 418,-77 418,-77 528,-77 528,-77 534,-77 540,-83 540,-89 540,-89 540,-115 540,-115 540,-121 534,-127 528,-127"/>
<text text-anchor="middle" x="473" y="-112.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#1a1a1a">&quot;I AM&quot;</text>
<text text-anchor="middle" x="473" y="-98.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#1a1a1a">singular grammar</text>
<text text-anchor="middle" x="473" y="-84.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#1a1a1a">infinite referent</text>
</g>
<!-- sufi&#45;&gt;iam -->
<!-- buddhist&#45;&gt;iam -->
<!-- hindu&#45;&gt;iam -->
<g class="anim d19">
<g id="edge7" class="edge">
<path fill="none" stroke="#aaaaaa" d="M319.29,-80.84C343.18,-84.15 370.58,-87.95 395.51,-91.4"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="395.28,-94.9 405.66,-92.81 396.24,-87.97 395.28,-94.9"/>
<text text-anchor="middle" x="362.5" y="-92" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#cccccc"> &#160;becomes</text>
<title>one_pronoun&#45;&gt;christ</title>
<path fill="none" stroke="#aaaaaa" d="M311.12,-438.37C352.49,-424.17 411,-395.2 411,-345 411,-345 411,-345 411,-187 411,-153.69 321.51,-134.28 254.41,-124.41"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="254.67,-120.91 244.27,-122.96 253.68,-127.84 254.67,-120.91"/>
<text text-anchor="middle" x="448" y="-258.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa"> &#160;dissolves into</text>
</g>
</g>
<!-- sufi&#45;&gt;buddhist -->
<!-- buddhist&#45;&gt;hindu -->
<!-- hindu&#45;&gt;christ -->
<!-- iam -->
<g class="anim d24">
<g id="node6" class="node">
<title>iam</title>
<path fill="#f9a825" stroke="#999999" d="M122,-50C122,-50 12,-50 12,-50 6,-50 0,-44 0,-38 0,-38 0,-12 0,-12 0,-6 6,0 12,0 12,0 122,0 122,0 128,0 134,-6 134,-12 134,-12 134,-38 134,-38 134,-44 128,-50 122,-50"/>
<text text-anchor="middle" x="67" y="-35.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#1a1a1a">&quot;I AM&quot;</text>
<text text-anchor="middle" x="67" y="-21.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#1a1a1a">singular grammar</text>
<text text-anchor="middle" x="67" y="-7.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#1a1a1a">infinite referent</text>
</g>
</g>
<!-- hindu&#45;&gt;iam -->
<g class="anim d26">
<g id="edge8" class="edge">
<title>hindu&#45;&gt;iam</title>
<path fill="none" stroke="#aaaaaa" d="M114.29,-172.65C93.34,-164.61 72.35,-152.17 60,-133 46.18,-111.56 49.16,-82.42 54.92,-59.96"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="58.33,-60.74 57.7,-50.17 51.6,-58.83 58.33,-60.74"/>
<text text-anchor="middle" x="85.5" y="-112.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa"> &#160;becomes</text>
</g>
</g>
<!-- christ&#45;&gt;iam -->
<g id="edge8" class="edge">
<path fill="none" stroke="#aaaaaa" d="M304.06,-36.01C329.18,-45.4 360.29,-57.17 388,-68 392.24,-69.66 396.59,-71.37 400.97,-73.11"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="400.01,-76.5 410.59,-76.95 402.6,-69.99 400.01,-76.5"/>
<text text-anchor="middle" x="362.5" y="-71" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#cccccc"> &#160;becomes</text>
<g class="anim d28">
<g id="edge9" class="edge">
<title>christ&#45;&gt;iam</title>
<path fill="none" stroke="#aaaaaa" d="M159.55,-96.82C144.61,-85.39 124.56,-70.05 106.95,-56.57"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="108.59,-53.42 98.53,-50.12 104.34,-58.98 108.59,-53.42"/>
<text text-anchor="middle" x="160.5" y="-71" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa"> &#160;becomes</text>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

View file

@ -12,42 +12,15 @@
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
2.7% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 10.2% { opacity: 0; }
13.0% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 20.5% { opacity: 0; }
23.2% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 30.7% { opacity: 0; }
33.4% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 41.0% { opacity: 0; }
43.7% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 29.3s ease-out infinite; }
.d1 { animation: loop1 29.3s ease-out infinite; }
.d2 { animation: loop2 29.3s ease-out infinite; }
.d3 { animation: loop3 29.3s ease-out infinite; }
.d4 { animation: loop4 29.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 32% entry 52%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 64% entry 84%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 400)">

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Before After
Before After

View file

@ -9,84 +9,21 @@
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
2.5% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 9.3% { opacity: 0; }
11.8% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 18.6% { opacity: 0; }
21.1% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 21.7% { opacity: 0; }
24.1% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 24.8% { opacity: 0; }
27.2% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop5 {
0%, 27.9% { opacity: 0; }
30.3% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop6 {
0%, 31.0% { opacity: 0; }
33.4% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop7 {
0%, 34.1% { opacity: 0; }
36.5% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop8 {
0%, 37.2% { opacity: 0; }
39.6% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop9 {
0%, 40.2% { opacity: 0; }
42.7% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
@keyframes loop10 {
0%, 46.4% { opacity: 0; }
48.9% { opacity: 1; }
89.2% { opacity: 1; }
93.8%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 32.3s ease-out infinite; }
.d1 { animation: loop1 32.3s ease-out infinite; }
.d2 { animation: loop2 32.3s ease-out infinite; }
.d3 { animation: loop3 32.3s ease-out infinite; }
.d4 { animation: loop4 32.3s ease-out infinite; }
.d5 { animation: loop5 32.3s ease-out infinite; }
.d6 { animation: loop6 32.3s ease-out infinite; }
.d7 { animation: loop7 32.3s ease-out infinite; }
.d8 { animation: loop8 32.3s ease-out infinite; }
.d9 { animation: loop9 32.3s ease-out infinite; }
.d10 { animation: loop10 32.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 7% entry 27%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 14% entry 34%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 21% entry 41%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 29% entry 49%; }
.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 36% entry 56%; }
.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 43% entry 63%; }
.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 50% entry 70%; }
.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 58% entry 78%; }
.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; }
.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 72% entry 92%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 701.82)">

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Before After
Before After

View file

@ -9,35 +9,14 @@
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
3.0% { opacity: 1; }
86.7% { opacity: 1; }
92.4%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 11.4% { opacity: 0; }
14.4% { opacity: 1; }
86.7% { opacity: 1; }
92.4%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 22.8% { opacity: 0; }
25.9% { opacity: 1; }
86.7% { opacity: 1; }
92.4%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 34.2% { opacity: 0; }
37.3% { opacity: 1; }
86.7% { opacity: 1; }
92.4%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 26.3s ease-out infinite; }
.d1 { animation: loop1 26.3s ease-out infinite; }
.d2 { animation: loop2 26.3s ease-out infinite; }
.d3 { animation: loop3 26.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 262)">

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

Before After
Before After

View file

@ -12,42 +12,15 @@
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loop0 {
0% { opacity: 0; }
2.7% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop1 {
0%, 10.2% { opacity: 0; }
13.0% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop2 {
0%, 20.5% { opacity: 0; }
23.2% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop3 {
0%, 30.7% { opacity: 0; }
33.4% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
@keyframes loop4 {
0%, 41.0% { opacity: 0; }
43.7% { opacity: 1; }
88.1% { opacity: 1; }
93.2%, 100% { opacity: 0; }
}
.anim { opacity: 0; }
.d0 { animation: loop0 29.3s ease-out infinite; }
.d1 { animation: loop1 29.3s ease-out infinite; }
.d2 { animation: loop2 29.3s ease-out infinite; }
.d3 { animation: loop3 29.3s ease-out infinite; }
.d4 { animation: loop4 29.3s ease-out infinite; }
.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; }
.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 32% entry 52%; }
.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; }
.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 64% entry 84%; }
@supports not (animation-timeline: view()) {
.anim { opacity: 1; }
}
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 364)">

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Before After
Before After