animate all 7 SVG diagrams: CSS fade-in with staggered delays, no JS

This commit is contained in:
russell@unturf.com 2026-03-04 13:11:33 -05:00
parent af27aa60c0
commit 66f7f3d9d3
7 changed files with 432 additions and 329 deletions

View file

@ -1,133 +1,135 @@
<?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: eight_eyes Pages: 1 -->
<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">
<defs>
<style type="text/css">
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 2s; }
.d2 { animation-delay: 4s; }
.d3 { animation-delay: 6s; }
.d4 { animation-delay: 8s; }
.d5 { animation-delay: 10s; }
.d6 { animation-delay: 12s; }
.d7 { animation-delay: 15s; }
.d8 { animation-delay: 18s; }
.d9 { animation-delay: 21s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1167)">
<g id="clust1" class="cluster">
<!-- cluster box -->
<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="#aaaaaa">Neville&#39;s Seven Eyes of God</text>
</g>
<!-- e1 -->
<g id="node1" class="node">
<!-- 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>
<!-- e2 -->
<g id="node2" class="node">
<!-- 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>
</g>
<!-- e1&#45;&gt;e2 -->
<g id="edge1" class="edge">
<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"/>
</g>
<!-- e3 -->
<g id="node3" class="node">
<!-- 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>
</g>
<!-- e2&#45;&gt;e3 -->
<g id="edge2" class="edge">
<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"/>
</g>
<!-- e4 -->
<g id="node4" class="node">
<!-- 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>
</g>
<!-- e3&#45;&gt;e4 -->
<g id="edge3" class="edge">
<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"/>
</g>
<!-- e5 -->
<g id="node5" class="node">
<!-- 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>
</g>
<!-- e4&#45;&gt;e5 -->
<g id="edge4" class="edge">
<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"/>
</g>
<!-- e6 -->
<g id="node6" class="node">
<!-- 6 Jehovah I AM + 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>
</g>
<!-- e5&#45;&gt;e6 -->
<g id="edge5" class="edge">
<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"/>
</g>
<!-- e7 -->
<g id="node7" class="node">
<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="#333333">7</text>
<text text-anchor="middle" x="120" y="-331.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#333333">Jesus</text>
<text text-anchor="middle" x="120" y="-321.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#333333">triniy</text>
<text text-anchor="middle" x="120" y="-311.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#333333">man↔God</text>
</g>
<!-- e6&#45;&gt;e7 -->
<g id="edge6" class="edge">
<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"/>
</g>
<!-- fear -->
<g id="node9" class="node">
<!-- 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>
</g>
<!-- e6&#45;&gt;fear -->
<g id="edge10" class="edge">
<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"> &#160;sacred</text>
<text text-anchor="middle" x="267.5" y="-389.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;unspeakable</text>
<!-- 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="#333333">7</text>
<text text-anchor="middle" x="120" y="-331.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#333333">Jesus</text>
<text text-anchor="middle" x="120" y="-321.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#333333">trinity</text>
<text text-anchor="middle" x="120" y="-311.3" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#333333">man↔God</text>
</g>
<!-- e8 -->
<g id="node8" class="node">
<!-- 8 Christ consciousness + edge + labels -->
<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>
@ -137,38 +139,13 @@
<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>
</g>
<!-- e7&#45;&gt;e8 -->
<g id="edge7" class="edge">
<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"> &#160;unveiled on</text>
<text text-anchor="middle" x="171.5" y="-253.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;the eighth day</text>
<text text-anchor="middle" x="171.5" y="-243.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;imagination awakens</text>
<text text-anchor="middle" x="171.5" y="-233.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;God became man</text>
<text text-anchor="middle" x="171.5" y="-223.8" font-family="Times,serif" font-size="9.00" fill="#ff6f00"> &#160;man becomes God</text>
</g>
<!-- reunion -->
<g id="node11" class="node">
<polygon fill="#999999" stroke="transparent" points="156,-36 84,-36 84,0 156,0 156,-36"/>
<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>
</g>
<!-- e8&#45;&gt;reunion -->
<g id="edge9" class="edge">
<path fill="none" stroke="#66ff66" stroke-dasharray="5,2" d="M120,-72.82C120,-59.2 120,-45.95 120,-36"/>
</g>
<!-- separation -->
<g id="node10" class="node">
<polygon fill="#999999" 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>
</g>
<!-- separation&#45;&gt;e1 -->
<g id="edge8" class="edge">
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M121,-1126.81C121,-1112.16 121,-1090.63 121,-1072.32"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

View file

@ -6,19 +6,88 @@
<!-- Title: load_bearing Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 530.00 388.47" 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; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 3s; }
.d2 { animation-delay: 6s; }
.d3 { animation-delay: 9s; }
.d4 { animation-delay: 12s; }
.d5 { animation-delay: 15s; }
.d6 { animation-delay: 18s; }
.d7 { animation-delay: 21s; }
.d8 { animation-delay: 24s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 384.47)">
<!-- d0: cluster box + "our framework" label -->
<g class="anim d0">
<g id="clust1" class="cluster">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="8,-299.47 8,-372.47 514,-372.47 514,-299.47 8,-299.47"/>
<text text-anchor="middle" x="261" y="-358.87" font-family="Helvetica Bold" font-size="12.00" fill="#aaaaaa">&quot;our&quot; framework</text>
</g>
</g>
<!-- d1: PyPI node -->
<g class="anim d1">
<!-- pypi -->
<g id="node1" class="node">
<path fill="#3775a9" stroke="#999999" d="M58,-343.47C58,-343.47 28,-343.47 28,-343.47 22,-343.47 16,-337.47 16,-331.47 16,-331.47 16,-319.47 16,-319.47 16,-313.47 22,-307.47 28,-307.47 28,-307.47 58,-307.47 58,-307.47 64,-307.47 70,-313.47 70,-319.47 70,-319.47 70,-331.47 70,-331.47 70,-337.47 64,-343.47 58,-343.47"/>
<text text-anchor="middle" x="43" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">PyPI</text>
</g>
</g>
<!-- d2: RhodeCode node -->
<g class="anim d2">
<!-- rhodecode -->
<g id="node2" class="node">
<path fill="#259bce" stroke="#999999" d="M162,-343.47C162,-343.47 100,-343.47 100,-343.47 94,-343.47 88,-337.47 88,-331.47 88,-331.47 88,-319.47 88,-319.47 88,-313.47 94,-307.47 100,-307.47 100,-307.47 162,-307.47 162,-307.47 168,-307.47 174,-313.47 174,-319.47 174,-319.47 174,-331.47 174,-331.47 174,-337.47 168,-343.47 162,-343.47"/>
<text text-anchor="middle" x="131" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">RhodeCode</text>
</g>
</g>
<!-- d3: Remarkbox node -->
<g class="anim d3">
<!-- remarkbox -->
<g id="node3" class="node">
<path fill="#6c5ce7" stroke="#999999" d="M264,-343.47C264,-343.47 204,-343.47 204,-343.47 198,-343.47 192,-337.47 192,-331.47 192,-331.47 192,-319.47 192,-319.47 192,-313.47 198,-307.47 204,-307.47 204,-307.47 264,-307.47 264,-307.47 270,-307.47 276,-313.47 276,-319.47 276,-319.47 276,-331.47 276,-331.47 276,-337.47 270,-343.47 264,-343.47"/>
<text text-anchor="middle" x="234" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Remarkbox</text>
</g>
</g>
<!-- d4: MakePostSell node -->
<g class="anim d4">
<!-- mps -->
<g id="node4" class="node">
<path fill="#00897b" stroke="#999999" d="M377.5,-343.47C377.5,-343.47 306.5,-343.47 306.5,-343.47 300.5,-343.47 294.5,-337.47 294.5,-331.47 294.5,-331.47 294.5,-319.47 294.5,-319.47 294.5,-313.47 300.5,-307.47 306.5,-307.47 306.5,-307.47 377.5,-307.47 377.5,-307.47 383.5,-307.47 389.5,-313.47 389.5,-319.47 389.5,-319.47 389.5,-331.47 389.5,-331.47 389.5,-337.47 383.5,-343.47 377.5,-343.47"/>
<text text-anchor="middle" x="342" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">MakePostSell</text>
</g>
</g>
<!-- d5: "thousands of Pyramid apps" node -->
<g class="anim d5">
<!-- apps -->
<g id="node5" class="node">
<path fill="#546e7a" stroke="#999999" d="M494,-343.47C494,-343.47 420,-343.47 420,-343.47 414,-343.47 408,-337.47 408,-331.47 408,-331.47 408,-319.47 408,-319.47 408,-313.47 414,-307.47 420,-307.47 420,-307.47 494,-307.47 494,-307.47 500,-307.47 506,-313.47 506,-319.47 506,-319.47 506,-331.47 506,-331.47 506,-337.47 500,-343.47 494,-343.47"/>
<text text-anchor="middle" x="457" y="-328.87" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">thousands of</text>
<text text-anchor="middle" x="457" y="-315.87" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Pyramid apps</text>
</g>
</g>
<!-- d6: All edges from apps to Pyramid + Pyramid node -->
<g class="anim d6">
<!-- pyramid -->
<g id="node6" class="node">
@ -32,55 +101,34 @@
<path fill="none" stroke="#aaaaaa" d="M65.18,-307.45C69.61,-304.52 74.34,-301.71 79,-299.47 107.11,-285.97 140.01,-275.52 168.26,-268.02"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="168.94,-270.01 174.21,-266.47 167.87,-265.95 168.94,-270.01"/>
</g>
<!-- rhodecode -->
<g id="node2" class="node">
<path fill="#259bce" stroke="#999999" d="M162,-343.47C162,-343.47 100,-343.47 100,-343.47 94,-343.47 88,-337.47 88,-331.47 88,-331.47 88,-319.47 88,-319.47 88,-313.47 94,-307.47 100,-307.47 100,-307.47 162,-307.47 162,-307.47 168,-307.47 174,-313.47 174,-319.47 174,-319.47 174,-331.47 174,-331.47 174,-337.47 168,-343.47 162,-343.47"/>
<text text-anchor="middle" x="131" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">RhodeCode</text>
</g>
<!-- rhodecode&#45;&gt;pyramid -->
<g id="edge2" class="edge">
<path fill="none" stroke="#aaaaaa" d="M155.67,-307.46C170.22,-297.44 188.72,-284.68 204.09,-274.09"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="205.43,-275.72 209.17,-270.58 203.04,-272.26 205.43,-275.72"/>
</g>
<!-- remarkbox -->
<g id="node3" class="node">
<path fill="#6c5ce7" stroke="#999999" d="M264,-343.47C264,-343.47 204,-343.47 204,-343.47 198,-343.47 192,-337.47 192,-331.47 192,-331.47 192,-319.47 192,-319.47 192,-313.47 198,-307.47 204,-307.47 204,-307.47 264,-307.47 264,-307.47 270,-307.47 276,-313.47 276,-319.47 276,-319.47 276,-331.47 276,-331.47 276,-337.47 270,-343.47 264,-343.47"/>
<text text-anchor="middle" x="234" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Remarkbox</text>
</g>
<!-- remarkbox&#45;&gt;pyramid -->
<g id="edge3" class="edge">
<path fill="none" stroke="#aaaaaa" d="M234,-307.28C234,-298.04 234,-286.51 234,-276.5"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="236.1,-276.5 234,-270.5 231.9,-276.5 236.1,-276.5"/>
</g>
<!-- mps -->
<g id="node4" class="node">
<path fill="#00897b" stroke="#999999" d="M377.5,-343.47C377.5,-343.47 306.5,-343.47 306.5,-343.47 300.5,-343.47 294.5,-337.47 294.5,-331.47 294.5,-331.47 294.5,-319.47 294.5,-319.47 294.5,-313.47 300.5,-307.47 306.5,-307.47 306.5,-307.47 377.5,-307.47 377.5,-307.47 383.5,-307.47 389.5,-313.47 389.5,-319.47 389.5,-319.47 389.5,-331.47 389.5,-331.47 389.5,-337.47 383.5,-343.47 377.5,-343.47"/>
<text text-anchor="middle" x="342" y="-322.37" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">MakePostSell</text>
</g>
<!-- mps&#45;&gt;pyramid -->
<g id="edge4" class="edge">
<path fill="none" stroke="#aaaaaa" d="M316.13,-307.46C300.88,-297.44 281.48,-284.68 265.36,-274.09"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="266.2,-272.12 260.03,-270.58 263.89,-275.63 266.2,-272.12"/>
</g>
<!-- apps -->
<g id="node5" class="node">
<path fill="#546e7a" stroke="#999999" d="M494,-343.47C494,-343.47 420,-343.47 420,-343.47 414,-343.47 408,-337.47 408,-331.47 408,-331.47 408,-319.47 408,-319.47 408,-313.47 414,-307.47 420,-307.47 420,-307.47 494,-307.47 494,-307.47 500,-307.47 506,-313.47 506,-319.47 506,-319.47 506,-331.47 506,-331.47 506,-337.47 500,-343.47 494,-343.47"/>
<text text-anchor="middle" x="457" y="-328.87" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">thousands of</text>
<text text-anchor="middle" x="457" y="-315.87" font-family="Helvetica,sans-Serif" font-size="12.00" fill="white">Pyramid apps</text>
</g>
<!-- apps&#45;&gt;pyramid -->
<g id="edge5" class="edge">
<path fill="none" stroke="#aaaaaa" d="M419.54,-307.45C412.77,-304.62 405.72,-301.84 399,-299.47 366.8,-288.1 330.28,-277.67 299.8,-269.63"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="300.13,-267.54 293.79,-268.05 299.06,-271.61 300.13,-267.54"/>
</g>
</g>
<!-- d7: Russell node + xkcd edge -->
<g class="anim d7">
<!-- russell -->
<g id="node7" class="node">
@ -98,6 +146,10 @@
<text text-anchor="middle" x="283.5" y="-190.27" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;load&#45;bearing</text>
<text text-anchor="middle" x="283.5" y="-175.27" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;block</text>
</g>
</g>
<!-- d8: NASA note + no funding edge -->
<g class="anim d8">
<!-- nasa -->
<g id="node8" class="node">
@ -114,5 +166,7 @@
<polygon fill="#ef5350" stroke="#ef5350" points="236.1,-42.04 234,-36.04 231.9,-42.04 236.1,-42.04"/>
<text text-anchor="middle" x="277" y="-57.8" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;no funding</text>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Before After
Before After

View file

@ -6,60 +6,25 @@
<!-- 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">
<defs>
<style type="text/css">
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 3s; }
.d2 { animation-delay: 6s; }
.d3 { animation-delay: 9s; }
.d4 { animation-delay: 12s; }
.d5 { animation-delay: 15s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 202)">
<!-- sufi -->
<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>
</g>
<!-- 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="#333333">&quot;I AM&quot;</text>
<text text-anchor="middle" x="473" y="-98.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#333333">singular grammar</text>
<text text-anchor="middle" x="473" y="-84.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#333333">infinite referent</text>
</g>
<!-- sufi&#45;&gt;iam -->
<!-- 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>
<!-- buddhist&#45;&gt;iam -->
<!-- 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>
<!-- hindu&#45;&gt;iam -->
<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="#aaaaaa"> &#160;becomes</text>
</g>
<!-- 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>
<!-- 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="#aaaaaa"> &#160;becomes</text>
</g>
<!-- d0: cluster box + "one" node -->
<g class="anim d0">
<!-- one_pronoun -->
<g id="node5" class="node">
@ -68,6 +33,17 @@
<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>
</g>
</g>
<!-- d1: Sufi node + dissolves edge -->
<g class="anim d1">
<!-- sufi -->
<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>
</g>
<!-- one_pronoun&#45;&gt;sufi -->
<g id="edge1" class="edge">
@ -75,6 +51,17 @@
<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="#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>
<!-- one_pronoun&#45;&gt;buddhist -->
<g id="edge2" class="edge">
@ -82,6 +69,17 @@
<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="#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>
<!-- one_pronoun&#45;&gt;hindu -->
<g id="edge3" class="edge">
@ -89,6 +87,17 @@
<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="#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>
<!-- one_pronoun&#45;&gt;christ -->
<g id="edge4" class="edge">
@ -96,5 +105,35 @@
<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="#aaaaaa"> &#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="#333333">&quot;I AM&quot;</text>
<text text-anchor="middle" x="473" y="-98.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#333333">singular grammar</text>
<text text-anchor="middle" x="473" y="-84.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#333333">infinite referent</text>
</g>
<!-- sufi&#45;&gt;iam -->
<!-- buddhist&#45;&gt;iam -->
<!-- hindu&#45;&gt;iam -->
<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="#aaaaaa"> &#160;becomes</text>
</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="#aaaaaa"> &#160;becomes</text>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before After
Before After

View file

@ -6,14 +6,34 @@
<!-- Title: naming_dance Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 166.50 404.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; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 3s; }
.d2 { animation-delay: 6s; }
.d3 { animation-delay: 9s; }
.d4 { animation-delay: 12s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 400)">
<!-- d0: Mrs. Lastname node -->
<g class="anim d0">
<!-- formal -->
<g id="node1" class="node">
<path fill="#607d8b" stroke="#999999" d="M107,-396C107,-396 12,-396 12,-396 6,-396 0,-390 0,-384 0,-384 0,-372 0,-372 0,-366 6,-360 12,-360 12,-360 107,-360 107,-360 113,-360 119,-366 119,-372 119,-372 119,-384 119,-384 119,-390 113,-396 107,-396"/>
<text text-anchor="middle" x="59.5" y="-374.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">Mrs. Lastname</text>
</g>
</g>
<!-- d1: Susan node + edge from formal -->
<g class="anim d1">
<!-- first -->
<g id="node2" class="node">
@ -27,6 +47,10 @@
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="63,-322.08 59.5,-312.08 56,-322.08 63,-322.08"/>
<text text-anchor="middle" x="109" y="-333.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> &#160;closeness grows</text>
</g>
</g>
<!-- d2: Suz/Bubs node + edge from first -->
<g class="anim d2">
<!-- nickname -->
<g id="node3" class="node">
@ -40,6 +64,10 @@
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="63,-238.08 59.5,-228.08 56,-238.08 63,-238.08"/>
<text text-anchor="middle" x="97.5" y="-249.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> &#160;trust earned</text>
</g>
</g>
<!-- d3: Mom node + edge from nickname -->
<g class="anim d3">
<!-- mom -->
<g id="node4" class="node">
@ -53,6 +81,10 @@
<polygon fill="#aaaaaa" stroke="#aaaaaa" stroke-width="2" points="63,-154.08 59.5,-144.08 56,-154.08 63,-154.08"/>
<text text-anchor="middle" x="107.5" y="-165.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> &#160;family accepted</text>
</g>
</g>
<!-- d4: Hey You node + edge from mom -->
<g class="anim d4">
<!-- heyyou -->
<g id="node5" class="node">
@ -68,5 +100,7 @@
<text text-anchor="middle" x="99" y="-69.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> &#160;hides inside</text>
<text text-anchor="middle" x="99" y="-57.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> &#160;fake demand</text>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Before After
Before After

View file

@ -1,149 +1,138 @@
<?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: one_multitudes Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 400.50 705.82" 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; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 3s; }
.d2 { animation-delay: 6s; }
.d3 { animation-delay: 7s; }
.d4 { animation-delay: 8s; }
.d5 { animation-delay: 9s; }
.d6 { animation-delay: 10s; }
.d7 { animation-delay: 11s; }
.d8 { animation-delay: 12s; }
.d9 { animation-delay: 13s; }
.d10 { animation-delay: 15s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 701.82)">
<g id="clust1" class="cluster">
<!-- cluster: pretends to contain -->
<g class="anim d1">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="8,-533.91 8,-620.82 162,-620.82 162,-533.91 8,-533.91"/>
<text text-anchor="middle" x="85" y="-608.02" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa">pretends to contain</text>
</g>
<g id="clust2" class="cluster">
<!-- cluster: actually contains -->
<g class="anim d2">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="170,-8 170,-613.37 318,-613.37 318,-8 170,-8"/>
<text text-anchor="middle" x="244" y="-600.57" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa">actually contains</text>
</g>
<!-- one -->
<g id="node1" class="node">
<!-- "one" node -->
<g class="anim d0">
<path fill="#9370db" stroke="#999999" d="M166,-697.82C166,-697.82 128,-697.82 128,-697.82 122,-697.82 116,-691.82 116,-685.82 116,-685.82 116,-673.82 116,-673.82 116,-667.82 122,-661.82 128,-661.82 128,-661.82 166,-661.82 166,-661.82 172,-661.82 178,-667.82 178,-673.82 178,-673.82 178,-685.82 178,-685.82 178,-691.82 172,-697.82 166,-697.82"/>
<text text-anchor="middle" x="147" y="-676.02" font-family="Helvetica,sans-Serif" font-size="16.00" fill="white">&quot;one&quot;</text>
</g>
<!-- singular -->
<g id="node2" class="node">
<!-- singular node -->
<g class="anim d1">
<ellipse fill="#616161" stroke="#999999" cx="85" cy="-567.37" rx="68.68" ry="25.41"/>
<text text-anchor="middle" x="85" y="-570.97" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">a single</text>
<text text-anchor="middle" x="85" y="-556.97" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">isolated self</text>
</g>
<!-- one&#45;&gt;singular -->
<g id="edge1" class="edge">
<!-- one -> singular (claims) -->
<g class="anim d1">
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M129.67,-661.58C124.84,-656.19 119.86,-650.02 116,-643.82 107.44,-630.09 100.34,-613.57 95.11,-599.5"/>
<polygon fill="#ef5350" stroke="#ef5350" points="97.38,-598.57 92.69,-592.82 92.77,-600.23 97.38,-598.57"/>
<text text-anchor="middle" x="143.5" y="-632.62" font-family="Times,serif" font-size="14.00" fill="#ef5350"> &#160;claims</text>
<text text-anchor="middle" x="143.5" y="-632.62" font-family="Times,serif" font-size="14.00" fill="#ef5350">claims</text>
</g>
<!-- stardust -->
<g id="node3" class="node">
<!-- stardust -->
<g class="anim d2">
<ellipse fill="#f9a825" stroke="#999999" cx="224" cy="-567.37" rx="44.7" ry="18"/>
<text text-anchor="middle" x="224" y="-563.97" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">stardust</text>
</g>
<!-- one&#45;&gt;stardust -->
<g id="edge2" class="edge">
<!-- one -> stardust (holds) -->
<g class="anim d2">
<path fill="none" stroke="#aaaaaa" d="M159.03,-661.56C172.35,-642.46 193.86,-611.6 208.45,-590.67"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="210.56,-591.93 212.56,-584.78 206.54,-589.13 210.56,-591.93"/>
<text text-anchor="middle" x="205" y="-632.62" font-family="Times,serif" font-size="14.00" fill="#aaaaaa"> &#160;holds</text>
<text text-anchor="middle" x="205" y="-632.62" font-family="Times,serif" font-size="14.00" fill="#aaaaaa">holds</text>
</g>
<!-- photons -->
<g id="node4" class="node">
<!-- photons -->
<g class="anim d3">
<ellipse fill="#fdd835" stroke="#999999" cx="229" cy="-486.91" rx="44.44" ry="18"/>
<text text-anchor="middle" x="229" y="-483.51" font-family="Helvetica,sans-Serif" font-size="13.00" fill="#333333">photons</text>
</g>
<!-- stardust&#45;&gt;photons -->
<!-- quantum -->
<g id="node5" class="node">
<!-- quantum fields -->
<g class="anim d4">
<ellipse fill="#7cb342" stroke="#999999" cx="239" cy="-406.46" rx="53.98" ry="25.41"/>
<text text-anchor="middle" x="239" y="-410.06" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">quantum</text>
<text text-anchor="middle" x="239" y="-396.06" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">fields</text>
</g>
<!-- photons&#45;&gt;quantum -->
<!-- atoms -->
<g id="node6" class="node">
<!-- atoms + edge from quantum -->
<g class="anim d5">
<path fill="none" stroke="#aaaaaa" d="M239.32,-380.63C239.44,-371.28 239.57,-360.66 239.69,-351.35"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="242.14,-351.25 239.78,-344.22 237.24,-351.19 242.14,-351.25"/>
<ellipse fill="#00897b" stroke="#999999" cx="240" cy="-326" rx="36.77" ry="18"/>
<text text-anchor="middle" x="240" y="-322.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">atoms</text>
</g>
<!-- quantum&#45;&gt;atoms -->
<g id="edge5" class="edge">
<path fill="none" stroke="#aaaaaa" d="M239.32,-380.63C239.44,-371.28 239.57,-360.66 239.69,-351.35"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="242.14,-351.25 239.78,-344.22 237.24,-351.19 242.14,-351.25"/>
</g>
<!-- mito -->
<g id="node7" class="node">
<!-- mitochondria + edge from atoms -->
<g class="anim d6">
<path fill="none" stroke="#aaaaaa" d="M240.97,-307.81C241.47,-298.92 242.09,-287.91 242.64,-278.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="245.09,-278.16 243.04,-271.03 240.2,-277.88 245.09,-278.16"/>
<ellipse fill="#00acc1" stroke="#999999" cx="244" cy="-253" rx="65.89" ry="18"/>
<text text-anchor="middle" x="244" y="-249.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">mitochondria</text>
</g>
<!-- atoms&#45;&gt;mito -->
<g id="edge6" class="edge">
<path fill="none" stroke="#aaaaaa" d="M240.97,-307.81C241.47,-298.92 242.09,-287.91 242.64,-278.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="245.09,-278.16 243.04,-271.03 240.2,-277.88 245.09,-278.16"/>
</g>
<!-- cells -->
<g id="node8" class="node">
<!-- cells + edge from mito -->
<g class="anim d7">
<path fill="none" stroke="#aaaaaa" d="M244,-234.81C244,-225.92 244,-214.91 244,-205.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="246.45,-205.03 244,-198.03 241.55,-205.03 246.45,-205.03"/>
<ellipse fill="#1e88e5" stroke="#999999" cx="244" cy="-180" rx="29.88" ry="18"/>
<text text-anchor="middle" x="244" y="-176.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">cells</text>
</g>
<!-- mito&#45;&gt;cells -->
<g id="edge7" class="edge">
<path fill="none" stroke="#aaaaaa" d="M244,-234.81C244,-225.92 244,-214.91 244,-205.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="246.45,-205.03 244,-198.03 241.55,-205.03 246.45,-205.03"/>
</g>
<!-- organs -->
<g id="node9" class="node">
<!-- organs + edge from cells -->
<g class="anim d8">
<path fill="none" stroke="#aaaaaa" d="M244,-161.81C244,-152.92 244,-141.91 244,-132.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="246.45,-132.03 244,-125.03 241.55,-132.03 246.45,-132.03"/>
<ellipse fill="#5c6bc0" stroke="#999999" cx="244" cy="-107" rx="39.33" ry="18"/>
<text text-anchor="middle" x="244" y="-103.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">organs</text>
</g>
<!-- cells&#45;&gt;organs -->
<g id="edge8" class="edge">
<path fill="none" stroke="#aaaaaa" d="M244,-161.81C244,-152.92 244,-141.91 244,-132.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="246.45,-132.03 244,-125.03 241.55,-132.03 246.45,-132.03"/>
</g>
<!-- multitudes -->
<g id="node10" class="node">
<!-- multitudes + edge from organs -->
<g class="anim d9">
<path fill="none" stroke="#aaaaaa" d="M244,-88.81C244,-79.92 244,-68.91 244,-59.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="246.45,-59.03 244,-52.03 241.55,-59.03 246.45,-59.03"/>
<ellipse fill="#ab47bc" stroke="#999999" cx="244" cy="-34" rx="54.91" ry="18"/>
<text text-anchor="middle" x="244" y="-30.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">multitudes</text>
</g>
<!-- organs&#45;&gt;multitudes -->
<g id="edge9" class="edge">
<path fill="none" stroke="#aaaaaa" d="M244,-88.81C244,-79.92 244,-68.91 244,-59.17"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="246.45,-59.03 244,-52.03 241.55,-59.03 246.45,-59.03"/>
</g>
<!-- above -->
<g id="node11" class="node">
<polygon fill="#999999" stroke="transparent" points="392.5,-697.82 325.5,-697.82 325.5,-661.82 392.5,-661.82 392.5,-697.82"/>
<!-- as above / so below -->
<g class="anim d10">
<polygon fill="transparent" stroke="transparent" points="392.5,-697.82 325.5,-697.82 325.5,-661.82 392.5,-661.82 392.5,-697.82"/>
<text text-anchor="middle" x="359" y="-677.02" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa">as above</text>
</g>
<!-- below -->
<g id="node12" class="node">
<polygon fill="#999999" stroke="transparent" points="391.5,-585.37 326.5,-585.37 326.5,-549.37 391.5,-549.37 391.5,-585.37"/>
<polygon fill="transparent" stroke="transparent" points="391.5,-585.37 326.5,-585.37 326.5,-549.37 391.5,-549.37 391.5,-585.37"/>
<text text-anchor="middle" x="359" y="-564.57" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa">so below</text>
</g>
<!-- above&#45;&gt;below -->
<g id="edge10" class="edge">
<path fill="none" stroke="#aaaaaa" stroke-dasharray="1,5" d="M359,-654.29C359,-636.02 359,-611.17 359,-592.9"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="356.55,-654.56 359,-661.56 361.45,-654.56 356.55,-654.56"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="361.45,-592.51 359,-585.51 356.55,-592.51 361.45,-592.51"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

Before After
Before After

View file

@ -1,101 +1,77 @@
<?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: pronoun_masks Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 393.00 266.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; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 3s; }
.d2 { animation-delay: 6s; }
.d3 { animation-delay: 9s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 262)">
<g id="clust1" class="cluster">
<!-- clusters (always visible) -->
<g class="anim d0">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="0,-12 0,-248 112,-248 112,-12 0,-12"/>
<text text-anchor="middle" x="56" y="-233.6" font-family="Helvetica Bold" font-size="13.00" fill="#aaaaaa">what they write</text>
</g>
<g id="clust2" class="cluster">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="207,-8 207,-250 377,-250 377,-8 207,-8"/>
<text text-anchor="middle" x="292" y="-235.6" font-family="Helvetica Bold" font-size="13.00" fill="#aaaaaa">what they mean</text>
</g>
<!-- we -->
<g id="node1" class="node">
<!-- "we" -> I but lonelier -->
<g class="anim d0">
<path fill="#4a90d9" stroke="#999999" d="M71,-218C71,-218 41,-218 41,-218 35,-218 29,-212 29,-206 29,-206 29,-194 29,-194 29,-188 35,-182 41,-182 41,-182 71,-182 71,-182 77,-182 83,-188 83,-194 83,-194 83,-206 83,-206 83,-212 77,-218 71,-218"/>
<text text-anchor="middle" x="56" y="-196.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">&quot;we&quot;</text>
</g>
<!-- lonely -->
<g id="node5" class="node">
<path fill="#2c3e50" stroke="#999999" d="M334.5,-220C334.5,-220 249.5,-220 249.5,-220 243.5,-220 237.5,-214 237.5,-208 237.5,-208 237.5,-196 237.5,-196 237.5,-190 243.5,-184 249.5,-184 249.5,-184 334.5,-184 334.5,-184 340.5,-184 346.5,-190 346.5,-196 346.5,-196 346.5,-208 346.5,-208 346.5,-214 340.5,-220 334.5,-220"/>
<text text-anchor="middle" x="292" y="-198.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">I, but lonelier</text>
</g>
<!-- we&#45;&gt;lonely -->
<g id="edge1" class="edge">
<path fill="none" stroke="#aaaaaa" d="M83.39,-200.23C118.02,-200.52 179.94,-201.05 227.18,-201.45"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="227.29,-204.96 237.32,-201.54 227.35,-197.96 227.29,-204.96"/>
<text text-anchor="middle" x="159.5" y="-204.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
<path fill="#2c3e50" stroke="#999999" d="M334.5,-220C334.5,-220 249.5,-220 249.5,-220 243.5,-220 237.5,-214 237.5,-208 237.5,-208 237.5,-196 237.5,-196 237.5,-190 243.5,-184 249.5,-184 249.5,-184 334.5,-184 334.5,-184 340.5,-184 346.5,-190 346.5,-196 346.5,-196 346.5,-208 346.5,-208 346.5,-214 340.5,-220 334.5,-220"/>
<text text-anchor="middle" x="292" y="-198.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">I, but lonelier</text>
</g>
<!-- our -->
<g id="node2" class="node">
<!-- "our" -> mine, but I want you to feel invested -->
<g class="anim d1">
<path fill="#7b68ee" stroke="#999999" d="M71,-164C71,-164 41,-164 41,-164 35,-164 29,-158 29,-152 29,-152 29,-140 29,-140 29,-134 35,-128 41,-128 41,-128 71,-128 71,-128 77,-128 83,-134 83,-140 83,-140 83,-152 83,-152 83,-158 77,-164 71,-164"/>
<text text-anchor="middle" x="56" y="-142.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">&quot;our&quot;</text>
</g>
<!-- invested -->
<g id="node6" class="node">
<path fill="none" stroke="#aaaaaa" d="M83.39,-146.11C112.71,-146.24 161.6,-146.45 204.57,-146.63"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="204.77,-150.13 214.78,-146.67 204.8,-143.13 204.77,-150.13"/>
<text text-anchor="middle" x="159.5" y="-149.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
<path fill="#2c3e50" stroke="#999999" d="M357,-166C357,-166 227,-166 227,-166 221,-166 215,-160 215,-154 215,-154 215,-140 215,-140 215,-134 221,-128 227,-128 227,-128 357,-128 357,-128 363,-128 369,-134 369,-140 369,-140 369,-154 369,-154 369,-160 363,-166 357,-166"/>
<text text-anchor="middle" x="292" y="-150.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">mine, but I want</text>
<text text-anchor="middle" x="292" y="-135.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">you to feel invested</text>
</g>
<!-- our&#45;&gt;invested -->
<g id="edge2" class="edge">
<path fill="none" stroke="#aaaaaa" d="M83.39,-146.11C112.71,-146.24 161.6,-146.45 204.57,-146.63"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="204.77,-150.13 214.78,-146.67 204.8,-143.13 204.77,-150.13"/>
<text text-anchor="middle" x="159.5" y="-149.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
</g>
<!-- one -->
<g id="node3" class="node">
<!-- "one" -> I'm afraid to say I -->
<g class="anim d2">
<path fill="#9370db" stroke="#999999" d="M72,-110C72,-110 40,-110 40,-110 34,-110 28,-104 28,-98 28,-98 28,-86 28,-86 28,-80 34,-74 40,-74 40,-74 72,-74 72,-74 78,-74 84,-80 84,-86 84,-86 84,-98 84,-98 84,-104 78,-110 72,-110"/>
<text text-anchor="middle" x="56" y="-88.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">&quot;one&quot;</text>
</g>
<!-- afraid -->
<g id="node7" class="node">
<path fill="none" stroke="#aaaaaa" d="M84.3,-91.88C122.38,-91.72 192.13,-91.42 239.99,-91.22"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="240.16,-94.72 250.15,-91.17 240.13,-87.72 240.16,-94.72"/>
<text text-anchor="middle" x="159.5" y="-94.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
<path fill="#2c3e50" stroke="#999999" d="M321.5,-110C321.5,-110 262.5,-110 262.5,-110 256.5,-110 250.5,-104 250.5,-98 250.5,-98 250.5,-84 250.5,-84 250.5,-78 256.5,-72 262.5,-72 262.5,-72 321.5,-72 321.5,-72 327.5,-72 333.5,-78 333.5,-84 333.5,-84 333.5,-98 333.5,-98 333.5,-104 327.5,-110 321.5,-110"/>
<text text-anchor="middle" x="292" y="-94.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">I&#39;m afraid</text>
<text text-anchor="middle" x="292" y="-79.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">to say I</text>
</g>
<!-- one&#45;&gt;afraid -->
<g id="edge3" class="edge">
<path fill="none" stroke="#aaaaaa" d="M84.3,-91.88C122.38,-91.72 192.13,-91.42 239.99,-91.22"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="240.16,-94.72 250.15,-91.17 240.13,-87.72 240.16,-94.72"/>
<text text-anchor="middle" x="159.5" y="-94.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
</g>
<!-- you -->
<g id="node4" class="node">
<!-- "you" -> talking to myself 6 months from now -->
<g class="anim d3">
<path fill="#e8834a" stroke="#999999" d="M72,-56C72,-56 40,-56 40,-56 34,-56 28,-50 28,-44 28,-44 28,-32 28,-32 28,-26 34,-20 40,-20 40,-20 72,-20 72,-20 78,-20 84,-26 84,-32 84,-32 84,-44 84,-44 84,-50 78,-56 72,-56"/>
<text text-anchor="middle" x="56" y="-34.3" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">&quot;you&quot;</text>
</g>
<!-- future -->
<g id="node8" class="node">
<path fill="none" stroke="#aaaaaa" d="M84.3,-37.65C113.99,-37.27 162.94,-36.64 205.75,-36.09"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="205.96,-39.59 215.91,-35.96 205.87,-32.59 205.96,-39.59"/>
<text text-anchor="middle" x="159.5" y="-40.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
<path fill="#2c3e50" stroke="#999999" d="M356,-54C356,-54 228,-54 228,-54 222,-54 216,-48 216,-42 216,-42 216,-28 216,-28 216,-22 222,-16 228,-16 228,-16 356,-16 356,-16 362,-16 368,-22 368,-28 368,-28 368,-42 368,-42 368,-48 362,-54 356,-54"/>
<text text-anchor="middle" x="292" y="-38.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">talking to myself</text>
<text text-anchor="middle" x="292" y="-23.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">6 months from now</text>
</g>
<!-- you&#45;&gt;future -->
<g id="edge4" class="edge">
<path fill="none" stroke="#aaaaaa" d="M84.3,-37.65C113.99,-37.27 162.94,-36.64 205.75,-36.09"/>
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="205.96,-39.59 215.91,-35.96 205.87,-32.59 205.96,-39.59"/>
<text text-anchor="middle" x="159.5" y="-40.2" font-family="Helvetica,sans-Serif" font-size="11.00" fill="#aaaaaa"> translates to</text>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Before After
Before After

View file

@ -6,13 +6,24 @@
<!-- Title: royal_we Pages: 1 -->
<svg width="100%" height="100%"
viewBox="0.00 0.00 287.00 368.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; }
}
.anim { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
.d0 { animation-delay: 0s; }
.d1 { animation-delay: 3s; }
.d2 { animation-delay: 6s; }
.d3 { animation-delay: 9s; }
.d4 { animation-delay: 12s; }
</style>
</defs>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 364)">
<g id="clust1" class="cluster">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="87,-8 87,-177 225,-177 225,-8 87,-8"/>
<text text-anchor="middle" x="156" y="-164.2" font-family="Helvetica Bold" font-size="11.00" fill="#aaaaaa">behind the curtain</text>
</g>
<!-- d0: readme node -->
<g class="anim d0">
<!-- readme -->
<g id="node1" class="node">
@ -20,6 +31,30 @@
<text text-anchor="middle" x="106" y="-344.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">&quot;We recommend</text>
<text text-anchor="middle" x="106" y="-329.8" font-family="Helvetica,sans-Serif" font-size="14.00" fill="white">installing with pip.&quot;</text>
</g>
</g>
<!-- d1: dev node + "actually written by" edge -->
<g class="anim d1">
<!-- dev -->
<g id="node3" class="node">
<path fill="#2c3e50" stroke="#999999" d="M241.5,-264C241.5,-264 182.5,-264 182.5,-264 176.5,-264 170.5,-258 170.5,-252 170.5,-252 170.5,-226 170.5,-226 170.5,-220 176.5,-214 182.5,-214 182.5,-214 241.5,-214 241.5,-214 247.5,-214 253.5,-220 253.5,-226 253.5,-226 253.5,-252 253.5,-252 253.5,-258 247.5,-264 241.5,-264"/>
<text text-anchor="middle" x="212" y="-249.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">solo dev</text>
<text text-anchor="middle" x="212" y="-235.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">2am</text>
<text text-anchor="middle" x="212" y="-221.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">cold pizza</text>
</g>
<!-- readme&#45;&gt;dev -->
<g id="edge1" class="edge">
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M125.44,-321.66C140.4,-307.55 161.41,-287.72 178.99,-271.14"/>
<polygon fill="#ef5350" stroke="#ef5350" points="181.41,-273.67 186.29,-264.26 176.61,-268.58 181.41,-273.67"/>
<text text-anchor="middle" x="191" y="-296" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#ef5350">actually</text>
<text text-anchor="middle" x="191" y="-285" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#ef5350">written by</text>
</g>
</g>
<!-- d2: audience note + "implies" edge -->
<g class="anim d2">
<!-- audience -->
<g id="node2" class="node">
@ -37,21 +72,14 @@
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="89.5,-272.83 83.28,-264.26 82.8,-274.84 89.5,-272.83"/>
<text text-anchor="middle" x="113.5" y="-290.5" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa">implies</text>
</g>
<!-- dev -->
<g id="node3" class="node">
<path fill="#2c3e50" stroke="#999999" d="M241.5,-264C241.5,-264 182.5,-264 182.5,-264 176.5,-264 170.5,-258 170.5,-252 170.5,-252 170.5,-226 170.5,-226 170.5,-220 176.5,-214 182.5,-214 182.5,-214 241.5,-214 241.5,-214 247.5,-214 253.5,-220 253.5,-226 253.5,-226 253.5,-252 253.5,-252 253.5,-258 247.5,-264 241.5,-264"/>
<text text-anchor="middle" x="212" y="-249.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">solo dev</text>
<text text-anchor="middle" x="212" y="-235.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">2am</text>
<text text-anchor="middle" x="212" y="-221.6" font-family="Helvetica,sans-Serif" font-size="13.00" fill="white">cold pizza</text>
</g>
<!-- readme&#45;&gt;dev -->
<g id="edge1" class="edge">
<path fill="none" stroke="#ef5350" stroke-dasharray="5,2" d="M125.44,-321.66C140.4,-307.55 161.41,-287.72 178.99,-271.14"/>
<polygon fill="#ef5350" stroke="#ef5350" points="181.41,-273.67 186.29,-264.26 176.61,-268.58 181.41,-273.67"/>
<text text-anchor="middle" x="191" y="-296" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#ef5350">actually</text>
<text text-anchor="middle" x="191" y="-285" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#ef5350">written by</text>
<!-- d3: cluster box + ML model node + prompting edge -->
<g class="anim d3">
<g id="clust1" class="cluster">
<polygon fill="transparent" stroke="#999999" stroke-dasharray="5,2" points="87,-8 87,-177 225,-177 225,-8 87,-8"/>
<text text-anchor="middle" x="156" y="-164.2" font-family="Helvetica Bold" font-size="11.00" fill="#aaaaaa">behind the curtain</text>
</g>
<!-- ml -->
<g id="node4" class="node">
@ -69,6 +97,10 @@
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="173.48,-157.01 166.25,-149.26 167.07,-159.82 173.48,-157.01"/>
<text text-anchor="middle" x="213.5" y="-188" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa">prompting</text>
</g>
</g>
<!-- d4: terminal + typing + generating edges -->
<g class="anim d4">
<!-- terminal -->
<g id="node5" class="node">
@ -89,5 +121,7 @@
<polygon fill="#aaaaaa" stroke="#aaaaaa" points="167.79,-62.43 165.68,-52.05 160.86,-61.48 167.79,-62.43"/>
<text text-anchor="middle" x="190.5" y="-73" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#aaaaaa">generating</text>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

Before After
Before After