dotscene
Scenes drawn as dots and lines. Each block below is self-contained — copy it onto any page.
bear
A bear
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="bear" viewBox="-22 -5.5 44 75.5" role="img">
<title>A bear</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="bear"]){--ds-dot-r:0.84;--ds-line-w:0.38}</style>
<defs><clipPath id="ds-clip-bear"><rect class="ds-clip" x="-22" y="-5.5" width="44" height="75.5"/></clipPath></defs>
<g clip-path="url(#ds-clip-bear)">
<g data-part="bear">
<line class="ds-line" data-part="bear" data-a="head0" data-b="head1" x1="0" y1="3.5" x2="5" y2="5.12"/>
<line class="ds-line" data-part="bear" data-a="head1" data-b="head2" x1="5" y1="5.12" x2="8.08" y2="9.37"/>
<line class="ds-line" data-part="bear" data-a="head2" data-b="head3" x1="8.08" y1="9.37" x2="8.08" y2="14.63"/>
<line class="ds-line" data-part="bear" data-a="head3" data-b="head4" x1="8.08" y1="14.63" x2="5" y2="18.88"/>
<line class="ds-line" data-part="bear" data-a="head4" data-b="head5" x1="5" y1="18.88" x2="0" y2="20.5"/>
<line class="ds-line" data-part="bear" data-a="head5" data-b="head6" x1="0" y1="20.5" x2="-5" y2="18.88"/>
<line class="ds-line" data-part="bear" data-a="head6" data-b="head7" x1="-5" y1="18.88" x2="-8.08" y2="14.63"/>
<line class="ds-line" data-part="bear" data-a="head7" data-b="head8" x1="-8.08" y1="14.63" x2="-8.08" y2="9.37"/>
<line class="ds-line" data-part="bear" data-a="head8" data-b="head9" x1="-8.08" y1="9.37" x2="-5" y2="5.12"/>
<line class="ds-line" data-part="bear" data-a="head9" data-b="head0" x1="-5" y1="5.12" x2="0" y2="3.5"/>
<line class="ds-line" data-part="bear" data-a="earL0" data-b="earL1" x1="-7" y1="0.5" x2="-4.4" y2="2"/>
<line class="ds-line" data-part="bear" data-a="earL1" data-b="earL2" x1="-4.4" y1="2" x2="-4.4" y2="5"/>
<line class="ds-line" data-part="bear" data-a="earL2" data-b="earL3" x1="-4.4" y1="5" x2="-7" y2="6.5"/>
<line class="ds-line" data-part="bear" data-a="earL3" data-b="earL4" x1="-7" y1="6.5" x2="-9.6" y2="5"/>
<line class="ds-line" data-part="bear" data-a="earL4" data-b="earL5" x1="-9.6" y1="5" x2="-9.6" y2="2"/>
<line class="ds-line" data-part="bear" data-a="earL5" data-b="earL0" x1="-9.6" y1="2" x2="-7" y2="0.5"/>
<line class="ds-line" data-part="bear" data-a="earR0" data-b="earR1" x1="7" y1="0.5" x2="9.6" y2="2"/>
<line class="ds-line" data-part="bear" data-a="earR1" data-b="earR2" x1="9.6" y1="2" x2="9.6" y2="5"/>
<line class="ds-line" data-part="bear" data-a="earR2" data-b="earR3" x1="9.6" y1="5" x2="7" y2="6.5"/>
<line class="ds-line" data-part="bear" data-a="earR3" data-b="earR4" x1="7" y1="6.5" x2="4.4" y2="5"/>
<line class="ds-line" data-part="bear" data-a="earR4" data-b="earR5" x1="4.4" y1="5" x2="4.4" y2="2"/>
<line class="ds-line" data-part="bear" data-a="earR5" data-b="earR0" x1="4.4" y1="2" x2="7" y2="0.5"/>
<line class="ds-line" data-part="bear" data-a="snout0" data-b="snout1" x1="0" y1="13" x2="2.6" y2="14.5"/>
<line class="ds-line" data-part="bear" data-a="snout1" data-b="snout2" x1="2.6" y1="14.5" x2="2.6" y2="17.5"/>
<line class="ds-line" data-part="bear" data-a="snout2" data-b="snout3" x1="2.6" y1="17.5" x2="0" y2="19"/>
<line class="ds-line" data-part="bear" data-a="snout3" data-b="snout4" x1="0" y1="19" x2="-2.6" y2="17.5"/>
<line class="ds-line" data-part="bear" data-a="snout4" data-b="snout5" x1="-2.6" y1="17.5" x2="-2.6" y2="14.5"/>
<line class="ds-line" data-part="bear" data-a="snout5" data-b="snout0" x1="-2.6" y1="14.5" x2="0" y2="13"/>
<line class="ds-line" data-part="bear" data-a="earL3" data-b="head8" x1="-7" y1="6.5" x2="-8.08" y2="9.37"/>
<line class="ds-line" data-part="bear" data-a="earR4" data-b="head1" x1="4.4" y1="5" x2="5" y2="5.12"/>
<line class="ds-line" data-part="bear" data-a="head5" data-b="neck" x1="0" y1="20.5" x2="0" y2="25"/>
<line class="ds-line" data-part="bear" data-a="neck" data-b="chest" x1="0" y1="25" x2="0" y2="34"/>
<line class="ds-line" data-part="bear" data-a="chest" data-b="hip" x1="0" y1="34" x2="0" y2="44"/>
<line class="ds-line" data-part="bear" data-a="neck" data-b="shoulderL" x1="0" y1="25" x2="-11" y2="28"/>
<line class="ds-line" data-part="bear" data-a="neck" data-b="shoulderR" x1="0" y1="25" x2="11" y2="28"/>
<line class="ds-line" data-part="bear" data-a="shoulderL" data-b="elbowL" x1="-11" y1="28" x2="-15" y2="36"/>
<line class="ds-line" data-part="bear" data-a="elbowL" data-b="pawL" x1="-15" y1="36" x2="-16" y2="45"/>
<line class="ds-line" data-part="bear" data-a="shoulderR" data-b="elbowR" x1="11" y1="28" x2="15" y2="36"/>
<line class="ds-line" data-part="bear" data-a="elbowR" data-b="pawR" x1="15" y1="36" x2="16" y2="45"/>
<line class="ds-line" data-part="bear" data-a="hip" data-b="hipL" x1="0" y1="44" x2="-7" y2="45"/>
<line class="ds-line" data-part="bear" data-a="hip" data-b="hipR" x1="0" y1="44" x2="7" y2="45"/>
<line class="ds-line" data-part="bear" data-a="hipL" data-b="kneeL" x1="-7" y1="45" x2="-9" y2="55"/>
<line class="ds-line" data-part="bear" data-a="kneeL" data-b="footL" x1="-9" y1="55" x2="-11" y2="64"/>
<line class="ds-line" data-part="bear" data-a="hipR" data-b="kneeR" x1="7" y1="45" x2="9" y2="55"/>
<line class="ds-line" data-part="bear" data-a="kneeR" data-b="footR" x1="9" y1="55" x2="11" y2="64"/>
<circle class="ds-dot" data-part="bear" data-p="head0" cx="0" cy="3.5" r="0.84"/>
<circle class="ds-dot" data-part="bear" data-p="head1" cx="5" cy="5.12" r="0.84"/>
<circle class="ds-dot" data-part="bear" data-p="head2" cx="8.08" cy="9.37" r="0.84"/>
… 9 kB in total — copy bear.html insteadcar
A car
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="car" viewBox="2 6 166 64" role="img">
<title>A car</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="car"]){--ds-dot-r:1.47;--ds-line-w:0.66}</style>
<defs><clipPath id="ds-clip-car"><rect class="ds-clip" x="2" y="6" width="166" height="64"/></clipPath></defs>
<g clip-path="url(#ds-clip-car)">
<g data-part="car">
<line class="ds-line" data-part="car" data-a="noseLow" data-b="noseHigh" x1="8" y1="58" x2="14" y2="38"/>
<line class="ds-line" data-part="car" data-a="noseHigh" data-b="hoodFront" x1="14" y1="38" x2="34" y2="34"/>
<line class="ds-line" data-part="car" data-a="hoodFront" data-b="screenFoot" x1="34" y1="34" x2="62" y2="31"/>
<line class="ds-line" data-part="car" data-a="screenFoot" data-b="roofFront" x1="62" y1="31" x2="80" y2="12"/>
<line class="ds-line" data-part="car" data-a="roofFront" data-b="roofBack" x1="80" y1="12" x2="124" y2="12"/>
<line class="ds-line" data-part="car" data-a="roofBack" data-b="tailHigh" x1="124" y1="12" x2="156" y2="34"/>
<line class="ds-line" data-part="car" data-a="tailHigh" data-b="tailLow" x1="156" y1="34" x2="162" y2="58"/>
<line class="ds-line" data-part="car" data-a="tailLow" data-b="noseLow" x1="162" y1="58" x2="8" y2="58"/>
<line class="ds-line" data-part="car" data-a="wheelF0" data-b="wheelF1" x1="40" y1="40" x2="48.49" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelF1" data-b="wheelF2" x1="48.49" y1="43.51" x2="52" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelF2" data-b="wheelF3" x1="52" y1="52" x2="48.49" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelF3" data-b="wheelF4" x1="48.49" y1="60.49" x2="40" y2="64"/>
<line class="ds-line" data-part="car" data-a="wheelF4" data-b="wheelF5" x1="40" y1="64" x2="31.51" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelF5" data-b="wheelF6" x1="31.51" y1="60.49" x2="28" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelF6" data-b="wheelF7" x1="28" y1="52" x2="31.51" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelF7" data-b="wheelF0" x1="31.51" y1="43.51" x2="40" y2="40"/>
<line class="ds-line" data-part="car" data-a="wheelR0" data-b="wheelR1" x1="128" y1="40" x2="136.49" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelR1" data-b="wheelR2" x1="136.49" y1="43.51" x2="140" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelR2" data-b="wheelR3" x1="140" y1="52" x2="136.49" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelR3" data-b="wheelR4" x1="136.49" y1="60.49" x2="128" y2="64"/>
<line class="ds-line" data-part="car" data-a="wheelR4" data-b="wheelR5" x1="128" y1="64" x2="119.51" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelR5" data-b="wheelR6" x1="119.51" y1="60.49" x2="116" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelR6" data-b="wheelR7" x1="116" y1="52" x2="119.51" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelR7" data-b="wheelR0" x1="119.51" y1="43.51" x2="128" y2="40"/>
<circle class="ds-dot" data-part="car" data-p="noseLow" cx="8" cy="58" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="noseHigh" cx="14" cy="38" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="hoodFront" cx="34" cy="34" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="screenFoot" cx="62" cy="31" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="roofFront" cx="80" cy="12" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="roofBack" cx="124" cy="12" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="tailHigh" cx="156" cy="34" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="tailLow" cx="162" cy="58" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF0" cx="40" cy="40" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF1" cx="48.49" cy="43.51" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF2" cx="52" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF3" cx="48.49" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF4" cx="40" cy="64" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF5" cx="31.51" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF6" cx="28" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF7" cx="31.51" cy="43.51" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR0" cx="128" cy="40" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR1" cx="136.49" cy="43.51" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR2" cx="140" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR3" cx="136.49" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR4" cx="128" cy="64" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR5" cx="119.51" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR6" cx="116" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR7" cx="119.51" cy="43.51" r="1.47"/>
</g>
</g>
</svg>chairs
Someone has been sitting in my chair
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="chairs" viewBox="-93.6 7 174.89999999999998 64" role="img">
<title>Someone has been sitting in my chair</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="chairs"]){--ds-dot-r:1.38;--ds-line-w:0.62}</style>
<defs><clipPath id="ds-clip-chairs"><rect class="ds-clip" x="-93.6" y="7" width="174.89999999999998" height="64"/></clipPath></defs>
<g clip-path="url(#ds-clip-chairs)">
<g data-part="chairPapa">
<line class="ds-line" data-part="chairPapa" data-a="railTopB" data-b="railTopF" x1="-87.6" y1="20.8" x2="-79.2" y2="20.8"/>
<line class="ds-line" data-part="chairPapa" data-a="railTopB" data-b="seatB" x1="-87.6" y1="20.8" x2="-87.6" y2="43.6"/>
<line class="ds-line" data-part="chairPapa" data-a="railTopF" data-b="seatM" x1="-79.2" y1="20.8" x2="-79.2" y2="43.6"/>
<line class="ds-line" data-part="chairPapa" data-a="seatB" data-b="seatM" x1="-87.6" y1="43.6" x2="-79.2" y2="43.6"/>
<line class="ds-line" data-part="chairPapa" data-a="seatM" data-b="seatF" x1="-79.2" y1="43.6" x2="-55.2" y2="43.6"/>
<line class="ds-line" data-part="chairPapa" data-a="seatB" data-b="footB" x1="-87.6" y1="43.6" x2="-87.6" y2="64"/>
<line class="ds-line" data-part="chairPapa" data-a="seatF" data-b="footF" x1="-55.2" y1="43.6" x2="-55.2" y2="64"/>
<circle class="ds-dot" data-part="chairPapa" data-p="railTopB" cx="-87.6" cy="20.8" r="1.38"/>
<circle class="ds-dot" data-part="chairPapa" data-p="railTopF" cx="-79.2" cy="20.8" r="1.38"/>
<circle class="ds-dot" data-part="chairPapa" data-p="seatB" cx="-87.6" cy="43.6" r="1.38"/>
<circle class="ds-dot" data-part="chairPapa" data-p="seatM" cx="-79.2" cy="43.6" r="1.38"/>
<circle class="ds-dot" data-part="chairPapa" data-p="seatF" cx="-55.2" cy="43.6" r="1.38"/>
<circle class="ds-dot" data-part="chairPapa" data-p="footB" cx="-87.6" cy="64" r="1.38"/>
<circle class="ds-dot" data-part="chairPapa" data-p="footF" cx="-55.2" cy="64" r="1.38"/>
</g>
<g data-part="chairMama">
<line class="ds-line" data-part="chairMama" data-a="railTopB" data-b="railTopF" x1="-13" y1="28" x2="-6" y2="28"/>
<line class="ds-line" data-part="chairMama" data-a="railTopB" data-b="seatB" x1="-13" y1="28" x2="-13" y2="47"/>
<line class="ds-line" data-part="chairMama" data-a="railTopF" data-b="seatM" x1="-6" y1="28" x2="-6" y2="47"/>
<line class="ds-line" data-part="chairMama" data-a="seatB" data-b="seatM" x1="-13" y1="47" x2="-6" y2="47"/>
<line class="ds-line" data-part="chairMama" data-a="seatM" data-b="seatF" x1="-6" y1="47" x2="14" y2="47"/>
<line class="ds-line" data-part="chairMama" data-a="seatB" data-b="footB" x1="-13" y1="47" x2="-13" y2="64"/>
<line class="ds-line" data-part="chairMama" data-a="seatF" data-b="footF" x1="14" y1="47" x2="14" y2="64"/>
<circle class="ds-dot" data-part="chairMama" data-p="railTopB" cx="-13" cy="28" r="1.38"/>
<circle class="ds-dot" data-part="chairMama" data-p="railTopF" cx="-6" cy="28" r="1.38"/>
<circle class="ds-dot" data-part="chairMama" data-p="seatB" cx="-13" cy="47" r="1.38"/>
<circle class="ds-dot" data-part="chairMama" data-p="seatM" cx="-6" cy="47" r="1.38"/>
<circle class="ds-dot" data-part="chairMama" data-p="seatF" cx="14" cy="47" r="1.38"/>
<circle class="ds-dot" data-part="chairMama" data-p="footB" cx="-13" cy="64" r="1.38"/>
<circle class="ds-dot" data-part="chairMama" data-p="footF" cx="14" cy="64" r="1.38"/>
</g>
<g data-part="chairBaby">
<line class="ds-line" data-part="chairBaby" data-a="railTopB" data-b="railTopF" x1="40.3" y1="53.5" x2="45.2" y2="59.1"/>
<line class="ds-line" data-part="chairBaby" data-a="railTopB" data-b="seatB" x1="40.3" y1="53.5" x2="50.8" y2="62.6"/>
<line class="ds-line" data-part="chairBaby" data-a="railTopF" data-b="seatM" x1="45.2" y1="59.1" x2="57.1" y2="57.7"/>
<line class="ds-line" data-part="chairBaby" data-a="seatB" data-b="seatM" x1="50.8" y1="62.6" x2="57.1" y2="57.7"/>
<line class="ds-line" data-part="chairBaby" data-a="seatM" data-b="seatF" x1="57.1" y1="57.7" x2="71.1" y2="61.9"/>
<line class="ds-line" data-part="chairBaby" data-a="seatB" data-b="footB" x1="50.8" y1="62.6" x2="43.1" y2="64"/>
<line class="ds-line" data-part="chairBaby" data-a="seatF" data-b="footF" x1="71.1" y1="61.9" x2="75.3" y2="64"/>
<circle class="ds-dot" data-part="chairBaby" data-p="railTopB" cx="40.3" cy="53.5" r="1.38"/>
<circle class="ds-dot" data-part="chairBaby" data-p="railTopF" cx="45.2" cy="59.1" r="1.38"/>
<circle class="ds-dot" data-part="chairBaby" data-p="seatB" cx="50.8" cy="62.6" r="1.38"/>
<circle class="ds-dot" data-part="chairBaby" data-p="seatM" cx="57.1" cy="57.7" r="1.38"/>
<circle class="ds-dot" data-part="chairBaby" data-p="seatF" cx="71.1" cy="61.9" r="1.38"/>
<circle class="ds-dot" data-part="chairBaby" data-p="footB" cx="43.1" cy="64" r="1.38"/>
<circle class="ds-dot" data-part="chairBaby" data-p="footF" cx="75.3" cy="64" r="1.38"/>
</g>
<g data-part="goldilocks">
<line class="ds-line" data-part="goldilocks" data-a="head0" data-b="head1" x1="4" y1="13" x2="7.54" y2="14.46"/>
<line class="ds-line" data-part="goldilocks" data-a="head1" data-b="head2" x1="7.54" y1="14.46" x2="9" y2="18"/>
<line class="ds-line" data-part="goldilocks" data-a="head2" data-b="head3" x1="9" y1="18" x2="7.54" y2="21.54"/>
<line class="ds-line" data-part="goldilocks" data-a="head3" data-b="head4" x1="7.54" y1="21.54" x2="4" y2="23"/>
… 11 kB in total — copy chairs.html insteadcityNightanimated
A city block, nine tiles square — dark
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="cityNight" viewBox="-80 -30 160 110" role="img">
<title>A city block, nine tiles square — dark</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="cityNight"]){--ds-dot-r:1.3;--ds-line-w:0.6;--ds-face-fill:#16181a}:where(svg[data-dotscene="cityNight"]){.ds-face--roof{fill:#3b4042}.ds-face--east{fill:#262a2c}.ds-face--south{fill:#1d2021}.ds-face--foliage{fill:#262a2c}.ds-line{stroke:#edebe6}.ds-dot{fill:#edebe6}.ds-line--lot{stroke:#33383b}.ds-dot--lot{fill:#33383b;r:.55}.ds-line--ground{stroke:#3d9fbf}.ds-dot--ground{fill:#3d9fbf;r:.85}.ds-line--road{stroke:#a4dded;stroke-width:1.15}.ds-dot--road{fill:#a4dded;r:1}.ds-line--vehicle{stroke:#edebe6;stroke-width:.5}.ds-dot--vehicle{fill:#edebe6;r:.75}}</style>
<rect class="ds-bg" x="-80" y="-30" width="160" height="110" fill="#16181a"/>
<defs><clipPath id="ds-clip-cityNight"><rect class="ds-clip" x="-80" y="-30" width="160" height="110"/></clipPath></defs>
<g clip-path="url(#ds-clip-cityNight)">
<g data-part="cityGround">
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateNA" data-b="plateNB" x1="0" y1="0" x2="72" y2="36"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateNA" cx="0" cy="0" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateNB" cx="72" cy="36" r="1.3"/>
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateEA" data-b="plateEB" x1="72" y1="36" x2="0" y2="72"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateEA" cx="72" cy="36" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateEB" cx="0" cy="72" r="1.3"/>
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateSA" data-b="plateSB" x1="0" y1="72" x2="-72" y2="36"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateSA" cx="0" cy="72" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateSB" cx="-72" cy="36" r="1.3"/>
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateWA" data-b="plateWB" x1="-72" y1="36" x2="0" y2="0"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateWA" cx="-72" cy="36" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateWB" cx="0" cy="0" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN1A" data-b="lotN1B" x1="8" y1="4" x2="-64" y2="40"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN1A" cx="8" cy="4" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN1B" cx="-64" cy="40" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE1A" data-b="lotE1B" x1="-8" y1="4" x2="64" y2="40"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE1A" cx="-8" cy="4" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE1B" cx="64" cy="40" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN2A" data-b="lotN2B" x1="16" y1="8" x2="-56" y2="44"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN2A" cx="16" cy="8" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN2B" cx="-56" cy="44" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE2A" data-b="lotE2B" x1="-16" y1="8" x2="56" y2="44"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE2A" cx="-16" cy="8" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE2B" cx="56" cy="44" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN3A" data-b="lotN3B" x1="24" y1="12" x2="-48" y2="48"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN3A" cx="24" cy="12" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN3B" cx="-48" cy="48" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE3A" data-b="lotE3B" x1="-24" y1="12" x2="48" y2="48"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE3A" cx="-24" cy="12" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE3B" cx="48" cy="48" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN6A" data-b="lotN6B" x1="48" y1="24" x2="-24" y2="60"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN6A" cx="48" cy="24" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN6B" cx="-24" cy="60" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE6A" data-b="lotE6B" x1="-48" y1="24" x2="24" y2="60"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE6A" cx="-48" cy="24" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE6B" cx="24" cy="60" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN7A" data-b="lotN7B" x1="56" y1="28" x2="-16" y2="64"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN7A" cx="56" cy="28" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN7B" cx="-16" cy="64" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE7A" data-b="lotE7B" x1="-56" y1="28" x2="16" y2="64"/>
… 28 kB in total — copy cityNight.html insteadcityanimated
A city block, nine tiles square
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="city" viewBox="-80 -30 160 110" role="img">
<title>A city block, nine tiles square</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="city"]){--ds-dot-r:1.3;--ds-line-w:0.6;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="city"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--foliage{fill:#f2f1ec}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--lot{stroke:#a4dded}.ds-dot--lot{fill:#a4dded;r:.55}.ds-line--ground{stroke:#1b7f9f}.ds-dot--ground{fill:#1b7f9f;r:.85}.ds-line--road{stroke:#0b6580;stroke-width:1.15}.ds-dot--road{fill:#0b6580;r:1}.ds-line--vehicle{stroke:#1d2021;stroke-width:.5}.ds-dot--vehicle{fill:#1d2021;r:.75}}</style>
<rect class="ds-bg" x="-80" y="-30" width="160" height="110" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-city"><rect class="ds-clip" x="-80" y="-30" width="160" height="110"/></clipPath></defs>
<g clip-path="url(#ds-clip-city)">
<g data-part="cityGround">
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateNA" data-b="plateNB" x1="0" y1="0" x2="72" y2="36"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateNA" cx="0" cy="0" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateNB" cx="72" cy="36" r="1.3"/>
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateEA" data-b="plateEB" x1="72" y1="36" x2="0" y2="72"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateEA" cx="72" cy="36" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateEB" cx="0" cy="72" r="1.3"/>
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateSA" data-b="plateSB" x1="0" y1="72" x2="-72" y2="36"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateSA" cx="0" cy="72" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateSB" cx="-72" cy="36" r="1.3"/>
<line class="ds-line ds-line--ground" data-part="cityGround" data-a="plateWA" data-b="plateWB" x1="-72" y1="36" x2="0" y2="0"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateWA" cx="-72" cy="36" r="1.3"/>
<circle class="ds-dot ds-dot--ground" data-part="cityGround" data-p="plateWB" cx="0" cy="0" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN1A" data-b="lotN1B" x1="8" y1="4" x2="-64" y2="40"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN1A" cx="8" cy="4" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN1B" cx="-64" cy="40" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE1A" data-b="lotE1B" x1="-8" y1="4" x2="64" y2="40"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE1A" cx="-8" cy="4" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE1B" cx="64" cy="40" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN2A" data-b="lotN2B" x1="16" y1="8" x2="-56" y2="44"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN2A" cx="16" cy="8" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN2B" cx="-56" cy="44" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE2A" data-b="lotE2B" x1="-16" y1="8" x2="56" y2="44"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE2A" cx="-16" cy="8" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE2B" cx="56" cy="44" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN3A" data-b="lotN3B" x1="24" y1="12" x2="-48" y2="48"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN3A" cx="24" cy="12" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN3B" cx="-48" cy="48" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE3A" data-b="lotE3B" x1="-24" y1="12" x2="48" y2="48"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE3A" cx="-24" cy="12" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE3B" cx="48" cy="48" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN6A" data-b="lotN6B" x1="48" y1="24" x2="-24" y2="60"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN6A" cx="48" cy="24" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN6B" cx="-24" cy="60" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE6A" data-b="lotE6B" x1="-48" y1="24" x2="24" y2="60"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE6A" cx="-48" cy="24" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotE6B" cx="24" cy="60" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotN7A" data-b="lotN7B" x1="56" y1="28" x2="-16" y2="64"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN7A" cx="56" cy="28" r="1.3"/>
<circle class="ds-dot ds-dot--lot" data-part="cityGround" data-p="lotN7B" cx="-16" cy="64" r="1.3"/>
<line class="ds-line ds-line--lot" data-part="cityGround" data-a="lotE7A" data-b="lotE7B" x1="-56" y1="28" x2="16" y2="64"/>
… 28 kB in total — copy city.html insteaddiscovery
Someone has been sleeping in my bed
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="discovery" viewBox="-52 -15.02 235 85.02" role="img">
<title>Someone has been sleeping in my bed</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="discovery"]){--ds-dot-r:0.76;--ds-line-w:0.34}</style>
<defs><clipPath id="ds-clip-discovery"><rect class="ds-clip" x="-52" y="-15.02" width="235" height="85.02"/></clipPath></defs>
<g clip-path="url(#ds-clip-discovery)">
<g data-part="bed">
<line class="ds-line" data-part="bed" data-a="headTop" data-b="headBot" x1="-46" y1="26" x2="-46" y2="50"/>
<line class="ds-line" data-part="bed" data-a="headBot" data-b="footBot" x1="-46" y1="50" x2="42" y2="50"/>
<line class="ds-line" data-part="bed" data-a="footBot" data-b="footTop" x1="42" y1="50" x2="42" y2="36"/>
<line class="ds-line" data-part="bed" data-a="headBot" data-b="legB" x1="-46" y1="50" x2="-46" y2="64"/>
<line class="ds-line" data-part="bed" data-a="footBot" data-b="legF" x1="42" y1="50" x2="42" y2="64"/>
<line class="ds-line" data-part="bed" data-a="pillowL" data-b="pillowR" x1="-42" y1="46" x2="-28" y2="46"/>
<circle class="ds-dot" data-part="bed" data-p="headTop" cx="-46" cy="26" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="headBot" cx="-46" cy="50" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="footTop" cx="42" cy="36" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="footBot" cx="42" cy="50" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="legB" cx="-46" cy="64" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="legF" cx="42" cy="64" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="pillowL" cx="-42" cy="46" r="0.76"/>
<circle class="ds-dot" data-part="bed" data-p="pillowR" cx="-28" cy="46" r="0.76"/>
</g>
<g data-part="goldilocks">
<line class="ds-line" data-part="goldilocks" data-a="head0" data-b="head1" x1="-40" y1="40" x2="-38.54" y2="36.46"/>
<line class="ds-line" data-part="goldilocks" data-a="head1" data-b="head2" x1="-38.54" y1="36.46" x2="-35" y2="35"/>
<line class="ds-line" data-part="goldilocks" data-a="head2" data-b="head3" x1="-35" y1="35" x2="-31.46" y2="36.46"/>
<line class="ds-line" data-part="goldilocks" data-a="head3" data-b="head4" x1="-31.46" y1="36.46" x2="-30" y2="40"/>
<line class="ds-line" data-part="goldilocks" data-a="head4" data-b="head5" x1="-30" y1="40" x2="-31.46" y2="43.54"/>
<line class="ds-line" data-part="goldilocks" data-a="head5" data-b="head6" x1="-31.46" y1="43.54" x2="-35" y2="45"/>
<line class="ds-line" data-part="goldilocks" data-a="head6" data-b="head7" x1="-35" y1="45" x2="-38.54" y2="43.54"/>
<line class="ds-line" data-part="goldilocks" data-a="head7" data-b="head0" x1="-38.54" y1="43.54" x2="-40" y2="40"/>
<line class="ds-line" data-part="goldilocks" data-a="hair1L" data-b="hair2L" x1="-40" y1="47" x2="-32" y2="51"/>
<line class="ds-line" data-part="goldilocks" data-a="hair2L" data-b="hair3L" x1="-32" y1="51" x2="-25" y2="50"/>
<line class="ds-line" data-part="goldilocks" data-a="hair1L" data-b="head7" x1="-40" y1="47" x2="-38.54" y2="43.54"/>
<line class="ds-line" data-part="goldilocks" data-a="hair1R" data-b="hair2R" x1="-40" y1="33" x2="-31" y2="31"/>
<line class="ds-line" data-part="goldilocks" data-a="hair2R" data-b="hair3R" x1="-31" y1="31" x2="-24" y2="33"/>
<line class="ds-line" data-part="goldilocks" data-a="hair1R" data-b="head1" x1="-40" y1="33" x2="-38.54" y2="36.46"/>
<line class="ds-line" data-part="goldilocks" data-a="head4" data-b="neck" x1="-30" y1="40" x2="-28" y2="40"/>
<line class="ds-line" data-part="goldilocks" data-a="neck" data-b="chest" x1="-28" y1="40" x2="-20" y2="40"/>
<line class="ds-line" data-part="goldilocks" data-a="chest" data-b="hip" x1="-20" y1="40" x2="-8" y2="40"/>
<line class="ds-line" data-part="goldilocks" data-a="neck" data-b="shoulderL" x1="-28" y1="40" x2="-23" y2="47"/>
<line class="ds-line" data-part="goldilocks" data-a="neck" data-b="shoulderR" x1="-28" y1="40" x2="-23" y2="33"/>
<line class="ds-line" data-part="goldilocks" data-a="shoulderL" data-b="elbowL" x1="-23" y1="47" x2="-14" y2="47"/>
<line class="ds-line" data-part="goldilocks" data-a="elbowL" data-b="handL" x1="-14" y1="47" x2="-6" y2="45"/>
<line class="ds-line" data-part="goldilocks" data-a="shoulderR" data-b="elbowR" x1="-23" y1="33" x2="-14" y2="33"/>
<line class="ds-line" data-part="goldilocks" data-a="elbowR" data-b="handR" x1="-14" y1="33" x2="-6" y2="35"/>
<line class="ds-line" data-part="goldilocks" data-a="hip" data-b="hipL" x1="-8" y1="40" x2="-6" y2="45"/>
<line class="ds-line" data-part="goldilocks" data-a="hip" data-b="hipR" x1="-8" y1="40" x2="-6" y2="35"/>
<line class="ds-line" data-part="goldilocks" data-a="hipL" data-b="kneeL" x1="-6" y1="45" x2="8" y2="48"/>
<line class="ds-line" data-part="goldilocks" data-a="kneeL" data-b="footL" x1="8" y1="48" x2="21" y2="46"/>
<line class="ds-line" data-part="goldilocks" data-a="hipR" data-b="kneeR" x1="-6" y1="35" x2="8" y2="32"/>
<line class="ds-line" data-part="goldilocks" data-a="kneeR" data-b="footR" x1="8" y1="32" x2="21" y2="30"/>
<circle class="ds-dot" data-part="goldilocks" data-p="head0" cx="-40" cy="40" r="0.76"/>
<circle class="ds-dot" data-part="goldilocks" data-p="head1" cx="-38.54" cy="36.46" r="0.76"/>
<circle class="ds-dot" data-part="goldilocks" data-p="head2" cx="-35" cy="35" r="0.76"/>
… 35 kB in total — copy discovery.html insteadditch
A person digging a ditch
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ditch" viewBox="-40 -59 92 77" role="img">
<title>A person digging a ditch</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="ditch"]){--ds-dot-r:1.6;--ds-line-w:0.72}</style>
<defs><clipPath id="ds-clip-ditch"><rect class="ds-clip" x="-40" y="-59" width="92" height="77"/></clipPath></defs>
<g clip-path="url(#ds-clip-ditch)">
<g data-part="ground">
<line class="ds-line" data-part="ground" data-a="farL" data-b="lipL" x1="-34" y1="0" x2="2" y2="0"/>
<line class="ds-line" data-part="ground" data-a="lipL" data-b="floorL" x1="2" y1="0" x2="8" y2="11"/>
<line class="ds-line" data-part="ground" data-a="floorL" data-b="floorR" x1="8" y1="11" x2="22" y2="12"/>
<line class="ds-line" data-part="ground" data-a="floorR" data-b="lipR" x1="22" y1="12" x2="28" y2="0"/>
<line class="ds-line" data-part="ground" data-a="lipR" data-b="farR" x1="28" y1="0" x2="46" y2="0"/>
<line class="ds-line" data-part="ground" data-a="pileA" data-b="pileB" x1="32" y1="0" x2="36" y2="-6"/>
<line class="ds-line" data-part="ground" data-a="pileB" data-b="pileC" x1="36" y1="-6" x2="41" y2="0"/>
<circle class="ds-dot" data-part="ground" data-p="farL" cx="-34" cy="0" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="lipL" cx="2" cy="0" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="floorL" cx="8" cy="11" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="floorR" cx="22" cy="12" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="lipR" cx="28" cy="0" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="farR" cx="46" cy="0" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="pileA" cx="32" cy="0" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="pileB" cx="36" cy="-6" r="1.6"/>
<circle class="ds-dot" data-part="ground" data-p="pileC" cx="41" cy="0" r="1.6"/>
</g>
<g data-part="digger">
<line class="ds-line" data-part="digger" data-a="head" data-b="neck" x1="-4" y1="-53" x2="-7" y2="-45"/>
<line class="ds-line" data-part="digger" data-a="neck" data-b="chest" x1="-7" y1="-45" x2="-10" y2="-39"/>
<line class="ds-line" data-part="digger" data-a="chest" data-b="hip" x1="-10" y1="-39" x2="-14" y2="-30"/>
<line class="ds-line" data-part="digger" data-a="neck" data-b="shoulderL" x1="-7" y1="-45" x2="-10" y2="-43"/>
<line class="ds-line" data-part="digger" data-a="neck" data-b="shoulderR" x1="-7" y1="-45" x2="-5" y2="-44"/>
<line class="ds-line" data-part="digger" data-a="shoulderL" data-b="elbowL" x1="-10" y1="-43" x2="-3" y2="-34"/>
<line class="ds-line" data-part="digger" data-a="elbowL" data-b="handL" x1="-3" y1="-34" x2="3" y2="-24"/>
<line class="ds-line" data-part="digger" data-a="shoulderR" data-b="elbowR" x1="-5" y1="-44" x2="1" y2="-36"/>
<line class="ds-line" data-part="digger" data-a="elbowR" data-b="handR" x1="1" y1="-36" x2="6" y2="-29"/>
<line class="ds-line" data-part="digger" data-a="hip" data-b="hipL" x1="-14" y1="-30" x2="-16" y2="-29"/>
<line class="ds-line" data-part="digger" data-a="hip" data-b="hipR" x1="-14" y1="-30" x2="-11" y2="-29"/>
<line class="ds-line" data-part="digger" data-a="hipL" data-b="kneeL" x1="-16" y1="-29" x2="-22" y2="-15"/>
<line class="ds-line" data-part="digger" data-a="kneeL" data-b="footL" x1="-22" y1="-15" x2="-25" y2="0"/>
<line class="ds-line" data-part="digger" data-a="hipR" data-b="kneeR" x1="-11" y1="-29" x2="-6" y2="-14"/>
<line class="ds-line" data-part="digger" data-a="kneeR" data-b="footR" x1="-6" y1="-14" x2="-2" y2="-1"/>
<circle class="ds-dot" data-part="digger" data-p="head" cx="-4" cy="-53" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="neck" cx="-7" cy="-45" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="chest" cx="-10" cy="-39" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="hip" cx="-14" cy="-30" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="shoulderL" cx="-10" cy="-43" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="elbowL" cx="-3" cy="-34" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="handL" cx="3" cy="-24" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="hipL" cx="-16" cy="-29" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="kneeL" cx="-22" cy="-15" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="footL" cx="-25" cy="0" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="shoulderR" cx="-5" cy="-44" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="elbowR" cx="1" cy="-36" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="handR" cx="6" cy="-29" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="hipR" cx="-11" cy="-29" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="kneeR" cx="-6" cy="-14" r="1.6"/>
<circle class="ds-dot" data-part="digger" data-p="footR" cx="-2" cy="-1" r="1.6"/>
</g>
<g data-part="shovel">
<line class="ds-line" data-part="shovel" data-a="grip" data-b="shaft" x1="4" y1="-26" x2="4.25" y2="-14.6"/>
<line class="ds-line" data-part="shovel" data-a="shaft" data-b="collar" x1="4.25" y1="-14.6" x2="4.5" y2="-3.2"/>
<line class="ds-line" data-part="shovel" data-a="collar" data-b="bladeL" x1="4.5" y1="-3.2" x2="-0.11" y2="-1.26"/>
<line class="ds-line" data-part="shovel" data-a="bladeL" data-b="bladeTip" x1="-0.11" y1="-1.26" x2="3.05" y2="6.74"/>
… 7 kB in total — copy ditch.html insteaddriving
A person driving a car
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="driving" viewBox="2 6 166 64" role="img">
<title>A person driving a car</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="driving"]){--ds-dot-r:1.47;--ds-line-w:0.66}</style>
<defs><clipPath id="ds-clip-driving"><rect class="ds-clip" x="2" y="6" width="166" height="64"/></clipPath></defs>
<g clip-path="url(#ds-clip-driving)">
<g data-part="car">
<line class="ds-line" data-part="car" data-a="noseLow" data-b="noseHigh" x1="8" y1="58" x2="14" y2="38"/>
<line class="ds-line" data-part="car" data-a="noseHigh" data-b="hoodFront" x1="14" y1="38" x2="34" y2="34"/>
<line class="ds-line" data-part="car" data-a="hoodFront" data-b="screenFoot" x1="34" y1="34" x2="62" y2="31"/>
<line class="ds-line" data-part="car" data-a="screenFoot" data-b="roofFront" x1="62" y1="31" x2="80" y2="12"/>
<line class="ds-line" data-part="car" data-a="roofFront" data-b="roofBack" x1="80" y1="12" x2="124" y2="12"/>
<line class="ds-line" data-part="car" data-a="roofBack" data-b="tailHigh" x1="124" y1="12" x2="156" y2="34"/>
<line class="ds-line" data-part="car" data-a="tailHigh" data-b="tailLow" x1="156" y1="34" x2="162" y2="58"/>
<line class="ds-line" data-part="car" data-a="tailLow" data-b="noseLow" x1="162" y1="58" x2="8" y2="58"/>
<line class="ds-line" data-part="car" data-a="wheelF0" data-b="wheelF1" x1="40" y1="40" x2="48.49" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelF1" data-b="wheelF2" x1="48.49" y1="43.51" x2="52" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelF2" data-b="wheelF3" x1="52" y1="52" x2="48.49" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelF3" data-b="wheelF4" x1="48.49" y1="60.49" x2="40" y2="64"/>
<line class="ds-line" data-part="car" data-a="wheelF4" data-b="wheelF5" x1="40" y1="64" x2="31.51" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelF5" data-b="wheelF6" x1="31.51" y1="60.49" x2="28" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelF6" data-b="wheelF7" x1="28" y1="52" x2="31.51" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelF7" data-b="wheelF0" x1="31.51" y1="43.51" x2="40" y2="40"/>
<line class="ds-line" data-part="car" data-a="wheelR0" data-b="wheelR1" x1="128" y1="40" x2="136.49" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelR1" data-b="wheelR2" x1="136.49" y1="43.51" x2="140" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelR2" data-b="wheelR3" x1="140" y1="52" x2="136.49" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelR3" data-b="wheelR4" x1="136.49" y1="60.49" x2="128" y2="64"/>
<line class="ds-line" data-part="car" data-a="wheelR4" data-b="wheelR5" x1="128" y1="64" x2="119.51" y2="60.49"/>
<line class="ds-line" data-part="car" data-a="wheelR5" data-b="wheelR6" x1="119.51" y1="60.49" x2="116" y2="52"/>
<line class="ds-line" data-part="car" data-a="wheelR6" data-b="wheelR7" x1="116" y1="52" x2="119.51" y2="43.51"/>
<line class="ds-line" data-part="car" data-a="wheelR7" data-b="wheelR0" x1="119.51" y1="43.51" x2="128" y2="40"/>
<circle class="ds-dot" data-part="car" data-p="noseLow" cx="8" cy="58" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="noseHigh" cx="14" cy="38" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="hoodFront" cx="34" cy="34" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="screenFoot" cx="62" cy="31" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="roofFront" cx="80" cy="12" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="roofBack" cx="124" cy="12" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="tailHigh" cx="156" cy="34" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="tailLow" cx="162" cy="58" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF0" cx="40" cy="40" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF1" cx="48.49" cy="43.51" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF2" cx="52" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF3" cx="48.49" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF4" cx="40" cy="64" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF5" cx="31.51" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF6" cx="28" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelF7" cx="31.51" cy="43.51" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR0" cx="128" cy="40" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR1" cx="136.49" cy="43.51" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR2" cx="140" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR3" cx="136.49" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR4" cx="128" cy="64" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR5" cx="119.51" cy="60.49" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR6" cx="116" cy="52" r="1.47"/>
<circle class="ds-dot" data-part="car" data-p="wheelR7" cx="119.51" cy="43.51" r="1.47"/>
</g>
<g data-part="driver">
<line class="ds-line" data-part="driver" data-a="head" data-b="neck" x1="90" y1="17" x2="91" y2="26"/>
<line class="ds-line" data-part="driver" data-a="neck" data-b="chest" x1="91" y1="26" x2="92" y2="33"/>
… 9 kB in total — copy driving.html insteadexchangeanimated
Two people trade a bag of money for a briefcase
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="exchange" viewBox="-110 -6 220 76" role="img">
<title>Two people trade a bag of money for a briefcase</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="exchange"]){--ds-dot-r:1.51;--ds-line-w:0.68}</style>
<defs><clipPath id="ds-clip-exchange"><rect class="ds-clip" x="-110" y="-6" width="220" height="76"/></clipPath></defs>
<g clip-path="url(#ds-clip-exchange)">
<g data-part="floor">
<line class="ds-line" data-part="floor" data-a="floorL" data-b="floorR" x1="-108" y1="64" x2="108" y2="64"/>
<circle class="ds-dot" data-part="floor" data-p="floorL" cx="-108" cy="64" r="1.51"/>
<circle class="ds-dot" data-part="floor" data-p="floorR" cx="108" cy="64" r="1.51"/>
</g>
<g data-part="walker">
<line class="ds-line" data-part="walker" data-a="head" data-b="neck" x1="-124" y1="6" x2="-126" y2="16"/>
<line class="ds-line" data-part="walker" data-a="neck" data-b="chest" x1="-126" y1="16" x2="-127" y2="25"/>
<line class="ds-line" data-part="walker" data-a="chest" data-b="hip" x1="-127" y1="25" x2="-128" y2="37"/>
<line class="ds-line" data-part="walker" data-a="neck" data-b="shoulderL" x1="-126" y1="16" x2="-131" y2="19"/>
<line class="ds-line" data-part="walker" data-a="neck" data-b="shoulderR" x1="-126" y1="16" x2="-125" y2="18"/>
<line class="ds-line" data-part="walker" data-a="shoulderL" data-b="elbowL" x1="-131" y1="19" x2="-136" y2="27"/>
<line class="ds-line" data-part="walker" data-a="elbowL" data-b="handL" x1="-136" y1="27" x2="-139" y2="35"/>
<line class="ds-line" data-part="walker" data-a="shoulderR" data-b="elbowR" x1="-125" y1="18" x2="-121" y2="28"/>
<line class="ds-line" data-part="walker" data-a="elbowR" data-b="handR" x1="-121" y1="28" x2="-119" y2="38"/>
<line class="ds-line" data-part="walker" data-a="hip" data-b="hipL" x1="-128" y1="37" x2="-131" y2="39"/>
<line class="ds-line" data-part="walker" data-a="hip" data-b="hipR" x1="-128" y1="37" x2="-125" y2="39"/>
<line class="ds-line" data-part="walker" data-a="hipL" data-b="kneeL" x1="-131" y1="39" x2="-122" y2="51"/>
<line class="ds-line" data-part="walker" data-a="kneeL" data-b="footL" x1="-122" y1="51" x2="-118" y2="64"/>
<line class="ds-line" data-part="walker" data-a="hipR" data-b="kneeR" x1="-125" y1="39" x2="-132" y2="51"/>
<line class="ds-line" data-part="walker" data-a="kneeR" data-b="footR" x1="-132" y1="51" x2="-138" y2="63"/>
<circle class="ds-dot" data-part="walker" data-p="head" cx="-124" cy="6" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="neck" cx="-126" cy="16" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="chest" cx="-127" cy="25" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="hip" cx="-128" cy="37" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="shoulderL" cx="-131" cy="19" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="elbowL" cx="-136" cy="27" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="handL" cx="-139" cy="35" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="hipL" cx="-131" cy="39" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="kneeL" cx="-122" cy="51" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="footL" cx="-118" cy="64" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="shoulderR" cx="-125" cy="18" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="elbowR" cx="-121" cy="28" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="handR" cx="-119" cy="38" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="hipR" cx="-125" cy="39" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="kneeR" cx="-132" cy="51" r="1.51"/>
<circle class="ds-dot" data-part="walker" data-p="footR" cx="-138" cy="63" r="1.51"/>
</g>
<g data-part="trader">
<line class="ds-line" data-part="trader" data-a="head" data-b="neck" x1="132.12" y1="9.48" x2="134" y2="18.88"/>
<line class="ds-line" data-part="trader" data-a="neck" data-b="chest" x1="134" y1="18.88" x2="134.94" y2="27.34"/>
<line class="ds-line" data-part="trader" data-a="chest" data-b="hip" x1="134.94" y1="27.34" x2="135.88" y2="38.62"/>
<line class="ds-line" data-part="trader" data-a="neck" data-b="shoulderL" x1="134" y1="18.88" x2="138.7" y2="21.7"/>
<line class="ds-line" data-part="trader" data-a="neck" data-b="shoulderR" x1="134" y1="18.88" x2="133.06" y2="20.76"/>
<line class="ds-line" data-part="trader" data-a="shoulderL" data-b="elbowL" x1="138.7" y1="21.7" x2="143.4" y2="29.22"/>
<line class="ds-line" data-part="trader" data-a="elbowL" data-b="handL" x1="143.4" y1="29.22" x2="146.22" y2="36.74"/>
<line class="ds-line" data-part="trader" data-a="shoulderR" data-b="elbowR" x1="133.06" y1="20.76" x2="129.3" y2="30.16"/>
<line class="ds-line" data-part="trader" data-a="elbowR" data-b="handR" x1="129.3" y1="30.16" x2="127.42" y2="39.56"/>
<line class="ds-line" data-part="trader" data-a="hip" data-b="hipL" x1="135.88" y1="38.62" x2="138.7" y2="40.5"/>
<line class="ds-line" data-part="trader" data-a="hip" data-b="hipR" x1="135.88" y1="38.62" x2="133.06" y2="40.5"/>
<line class="ds-line" data-part="trader" data-a="hipL" data-b="kneeL" x1="138.7" y1="40.5" x2="130.24" y2="51.78"/>
<line class="ds-line" data-part="trader" data-a="kneeL" data-b="footL" x1="130.24" y1="51.78" x2="126.48" y2="64"/>
… 31 kB in total — copy exchange.html insteadgirl
Goldilocks
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="girl" viewBox="-19 -4 38 74" role="img">
<title>Goldilocks</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="girl"]){--ds-dot-r:1.16;--ds-line-w:0.52}</style>
<defs><clipPath id="ds-clip-girl"><rect class="ds-clip" x="-19" y="-4" width="38" height="74"/></clipPath></defs>
<g clip-path="url(#ds-clip-girl)">
<g data-part="girl">
<line class="ds-line" data-part="girl" data-a="head0" data-b="head1" x1="0" y1="2" x2="3.54" y2="3.46"/>
<line class="ds-line" data-part="girl" data-a="head1" data-b="head2" x1="3.54" y1="3.46" x2="5" y2="7"/>
<line class="ds-line" data-part="girl" data-a="head2" data-b="head3" x1="5" y1="7" x2="3.54" y2="10.54"/>
<line class="ds-line" data-part="girl" data-a="head3" data-b="head4" x1="3.54" y1="10.54" x2="0" y2="12"/>
<line class="ds-line" data-part="girl" data-a="head4" data-b="head5" x1="0" y1="12" x2="-3.54" y2="10.54"/>
<line class="ds-line" data-part="girl" data-a="head5" data-b="head6" x1="-3.54" y1="10.54" x2="-5" y2="7"/>
<line class="ds-line" data-part="girl" data-a="head6" data-b="head7" x1="-5" y1="7" x2="-3.54" y2="3.46"/>
<line class="ds-line" data-part="girl" data-a="head7" data-b="head0" x1="-3.54" y1="3.46" x2="0" y2="2"/>
<line class="ds-line" data-part="girl" data-a="hair1L" data-b="hair2L" x1="-7" y1="2" x2="-9" y2="11"/>
<line class="ds-line" data-part="girl" data-a="hair2L" data-b="hair3L" x1="-9" y1="11" x2="-7" y2="18"/>
<line class="ds-line" data-part="girl" data-a="hair1L" data-b="head7" x1="-7" y1="2" x2="-3.54" y2="3.46"/>
<line class="ds-line" data-part="girl" data-a="hair1R" data-b="hair2R" x1="7" y1="2" x2="9" y2="11"/>
<line class="ds-line" data-part="girl" data-a="hair2R" data-b="hair3R" x1="9" y1="11" x2="7" y2="18"/>
<line class="ds-line" data-part="girl" data-a="hair1R" data-b="head1" x1="7" y1="2" x2="3.54" y2="3.46"/>
<line class="ds-line" data-part="girl" data-a="head4" data-b="neck" x1="0" y1="12" x2="0" y2="14"/>
<line class="ds-line" data-part="girl" data-a="neck" data-b="chest" x1="0" y1="14" x2="0" y2="22"/>
<line class="ds-line" data-part="girl" data-a="chest" data-b="hip" x1="0" y1="22" x2="0" y2="34"/>
<line class="ds-line" data-part="girl" data-a="neck" data-b="shoulderL" x1="0" y1="14" x2="-7" y2="19"/>
<line class="ds-line" data-part="girl" data-a="neck" data-b="shoulderR" x1="0" y1="14" x2="7" y2="19"/>
<line class="ds-line" data-part="girl" data-a="shoulderL" data-b="elbowL" x1="-7" y1="19" x2="-11" y2="28"/>
<line class="ds-line" data-part="girl" data-a="elbowL" data-b="handL" x1="-11" y1="28" x2="-13" y2="37"/>
<line class="ds-line" data-part="girl" data-a="shoulderR" data-b="elbowR" x1="7" y1="19" x2="11" y2="28"/>
<line class="ds-line" data-part="girl" data-a="elbowR" data-b="handR" x1="11" y1="28" x2="13" y2="37"/>
<line class="ds-line" data-part="girl" data-a="hip" data-b="hipL" x1="0" y1="34" x2="-5" y2="36"/>
<line class="ds-line" data-part="girl" data-a="hip" data-b="hipR" x1="0" y1="34" x2="5" y2="36"/>
<line class="ds-line" data-part="girl" data-a="hipL" data-b="kneeL" x1="-5" y1="36" x2="-6" y2="50"/>
<line class="ds-line" data-part="girl" data-a="kneeL" data-b="footL" x1="-6" y1="50" x2="-8" y2="64"/>
<line class="ds-line" data-part="girl" data-a="hipR" data-b="kneeR" x1="5" y1="36" x2="6" y2="50"/>
<line class="ds-line" data-part="girl" data-a="kneeR" data-b="footR" x1="6" y1="50" x2="8" y2="64"/>
<circle class="ds-dot" data-part="girl" data-p="head0" cx="0" cy="2" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head1" cx="3.54" cy="3.46" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head2" cx="5" cy="7" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head3" cx="3.54" cy="10.54" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head4" cx="0" cy="12" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head5" cx="-3.54" cy="10.54" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head6" cx="-5" cy="7" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="head7" cx="-3.54" cy="3.46" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="neck" cx="0" cy="14" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="chest" cx="0" cy="22" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hip" cx="0" cy="34" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hair1L" cx="-7" cy="2" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hair2L" cx="-9" cy="11" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hair3L" cx="-7" cy="18" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="shoulderL" cx="-7" cy="19" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="elbowL" cx="-11" cy="28" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="handL" cx="-13" cy="37" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hipL" cx="-5" cy="36" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="kneeL" cx="-6" cy="50" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="footL" cx="-8" cy="64" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hair1R" cx="7" cy="2" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hair2R" cx="9" cy="11" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="hair3R" cx="7" cy="18" r="1.16"/>
<circle class="ds-dot" data-part="girl" data-p="shoulderR" cx="7" cy="19" r="1.16"/>
… 6 kB in total — copy girl.html insteadheaderanimated
A person cycling through poses
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="header" viewBox="-24 -3 48 73" role="img">
<title>A person cycling through poses</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="header"]){--ds-dot-r:1.6;--ds-line-w:0.72}</style>
<defs><clipPath id="ds-clip-header"><rect class="ds-clip" x="-24" y="-3" width="48" height="73"/></clipPath></defs>
<g clip-path="url(#ds-clip-header)">
<g data-part="person">
<line class="ds-line" data-part="person" data-a="head" data-b="neck" x1="0" y1="3" x2="0" y2="13"/>
<line class="ds-line" data-part="person" data-a="neck" data-b="chest" x1="0" y1="13" x2="0" y2="22"/>
<line class="ds-line" data-part="person" data-a="chest" data-b="hip" x1="0" y1="22" x2="0" y2="34"/>
<line class="ds-line" data-part="person" data-a="neck" data-b="shoulderL" x1="0" y1="13" x2="-7" y2="15"/>
<line class="ds-line" data-part="person" data-a="neck" data-b="shoulderR" x1="0" y1="13" x2="7" y2="15"/>
<line class="ds-line" data-part="person" data-a="shoulderL" data-b="elbowL" x1="-7" y1="15" x2="-13" y2="24"/>
<line class="ds-line" data-part="person" data-a="elbowL" data-b="handL" x1="-13" y1="24" x2="-16" y2="33"/>
<line class="ds-line" data-part="person" data-a="shoulderR" data-b="elbowR" x1="7" y1="15" x2="13" y2="24"/>
<line class="ds-line" data-part="person" data-a="elbowR" data-b="handR" x1="13" y1="24" x2="16" y2="33"/>
<line class="ds-line" data-part="person" data-a="hip" data-b="hipL" x1="0" y1="34" x2="-5" y2="36"/>
<line class="ds-line" data-part="person" data-a="hip" data-b="hipR" x1="0" y1="34" x2="5" y2="36"/>
<line class="ds-line" data-part="person" data-a="hipL" data-b="kneeL" x1="-5" y1="36" x2="-7" y2="50"/>
<line class="ds-line" data-part="person" data-a="kneeL" data-b="footL" x1="-7" y1="50" x2="-8" y2="64"/>
<line class="ds-line" data-part="person" data-a="hipR" data-b="kneeR" x1="5" y1="36" x2="7" y2="50"/>
<line class="ds-line" data-part="person" data-a="kneeR" data-b="footR" x1="7" y1="50" x2="8" y2="64"/>
<circle class="ds-dot" data-part="person" data-p="head" cx="0" cy="3" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="neck" cx="0" cy="13" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="chest" cx="0" cy="22" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="hip" cx="0" cy="34" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="shoulderL" cx="-7" cy="15" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="elbowL" cx="-13" cy="24" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="handL" cx="-16" cy="33" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="hipL" cx="-5" cy="36" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="kneeL" cx="-7" cy="50" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="footL" cx="-8" cy="64" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="shoulderR" cx="7" cy="15" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="elbowR" cx="13" cy="24" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="handR" cx="16" cy="33" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="hipR" cx="5" cy="36" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="kneeR" cx="7" cy="50" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="footR" cx="8" cy="64" r="1.6"/>
</g>
</g>
</svg>
<script type="application/json" data-dotscene-poses="header">{"cycle":["idle","wave","lean"],"points":{"person":["head","neck","chest","hip","shoulderL","elbowL","handL","hipL","kneeL","footL","shoulderR","elbowR","handR","hipR","kneeR","footR"]},"frames":{"idle":{"person":[0,3,0,13,0,22,0,34,-7,15,-13,24,-16,33,-5,36,-7,50,-8,64,7,15,13,24,16,33,5,36,7,50,8,64]},"wave":{"person":[1,3,0,13,0,22,0,34,-7,15,-13,24,-16,33,-5,36,-7,50,-8,64,7,15,14,16,18,5,5,36,7,50,8,64]},"lean":{"person":[-3,4,-2,13,-1,22,0,34,-7,15,-13,24,-18,30,-5,36,-7,50,-8,64,7,15,13,24,16,33,5,36,8,50,11,64]}},"timings":{"idle":{"duration":700,"hold":900},"wave":{"duration":700,"hold":900},"lean":{"duration":700,"hold":900}},"easing":"easeInOut","mode":"loop"}</script>
<script src="./dotscene.min.js" defer></script>lamp
A desk lamp
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="lamp" viewBox="-16 6 56 64" role="img">
<title>A desk lamp</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="lamp"]){--ds-dot-r:3.2;--ds-line-w:1.44}</style>
<defs><clipPath id="ds-clip-lamp"><rect class="ds-clip" x="-16" y="6" width="56" height="64"/></clipPath></defs>
<g clip-path="url(#ds-clip-lamp)">
<g data-part="lamp">
<line class="ds-line" data-part="lamp" data-a="baseL" data-b="baseR" x1="-10" y1="64" x2="10" y2="64"/>
<line class="ds-line" data-part="lamp" data-a="baseL" data-b="stem" x1="-10" y1="64" x2="0" y2="62"/>
<line class="ds-line" data-part="lamp" data-a="baseR" data-b="stem" x1="10" y1="64" x2="0" y2="62"/>
<line class="ds-line" data-part="lamp" data-a="stem" data-b="joint" x1="0" y1="62" x2="2" y2="34"/>
<line class="ds-line" data-part="lamp" data-a="joint" data-b="armEnd" x1="2" y1="34" x2="22" y2="20"/>
<line class="ds-line" data-part="lamp" data-a="armEnd" data-b="shadeTop" x1="22" y1="20" x2="16" y2="12"/>
<line class="ds-line" data-part="lamp" data-a="shadeTop" data-b="shadeLip" x1="16" y1="12" x2="34" y2="26"/>
<line class="ds-line" data-part="lamp" data-a="shadeLip" data-b="armEnd" x1="34" y1="26" x2="22" y2="20"/>
<circle class="ds-dot" data-part="lamp" data-p="baseL" cx="-10" cy="64" r="3.2"/>
<circle class="ds-dot" data-part="lamp" data-p="baseR" cx="10" cy="64" r="3.2"/>
<circle class="ds-dot" data-part="lamp" data-p="stem" cx="0" cy="62" r="3.2"/>
<circle class="ds-dot" data-part="lamp" data-p="joint" cx="2" cy="34" r="3.2"/>
<circle class="ds-dot" data-part="lamp" data-p="armEnd" cx="22" cy="20" r="3.2"/>
<circle class="ds-dot" data-part="lamp" data-p="shadeTop" cx="16" cy="12" r="3.2"/>
<circle class="ds-dot" data-part="lamp" data-p="shadeLip" cx="34" cy="26" r="3.2"/>
</g>
</g>
</svg>person
A person
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="person" viewBox="-22 -3 44 73" role="img">
<title>A person</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="person"]){--ds-dot-r:1.6;--ds-line-w:0.72}</style>
<defs><clipPath id="ds-clip-person"><rect class="ds-clip" x="-22" y="-3" width="44" height="73"/></clipPath></defs>
<g clip-path="url(#ds-clip-person)">
<g data-part="person">
<line class="ds-line" data-part="person" data-a="head" data-b="neck" x1="0" y1="3" x2="0" y2="13"/>
<line class="ds-line" data-part="person" data-a="neck" data-b="chest" x1="0" y1="13" x2="0" y2="22"/>
<line class="ds-line" data-part="person" data-a="chest" data-b="hip" x1="0" y1="22" x2="0" y2="34"/>
<line class="ds-line" data-part="person" data-a="neck" data-b="shoulderL" x1="0" y1="13" x2="-7" y2="15"/>
<line class="ds-line" data-part="person" data-a="neck" data-b="shoulderR" x1="0" y1="13" x2="7" y2="15"/>
<line class="ds-line" data-part="person" data-a="shoulderL" data-b="elbowL" x1="-7" y1="15" x2="-13" y2="24"/>
<line class="ds-line" data-part="person" data-a="elbowL" data-b="handL" x1="-13" y1="24" x2="-16" y2="33"/>
<line class="ds-line" data-part="person" data-a="shoulderR" data-b="elbowR" x1="7" y1="15" x2="13" y2="24"/>
<line class="ds-line" data-part="person" data-a="elbowR" data-b="handR" x1="13" y1="24" x2="16" y2="33"/>
<line class="ds-line" data-part="person" data-a="hip" data-b="hipL" x1="0" y1="34" x2="-5" y2="36"/>
<line class="ds-line" data-part="person" data-a="hip" data-b="hipR" x1="0" y1="34" x2="5" y2="36"/>
<line class="ds-line" data-part="person" data-a="hipL" data-b="kneeL" x1="-5" y1="36" x2="-7" y2="50"/>
<line class="ds-line" data-part="person" data-a="kneeL" data-b="footL" x1="-7" y1="50" x2="-8" y2="64"/>
<line class="ds-line" data-part="person" data-a="hipR" data-b="kneeR" x1="5" y1="36" x2="7" y2="50"/>
<line class="ds-line" data-part="person" data-a="kneeR" data-b="footR" x1="7" y1="50" x2="8" y2="64"/>
<circle class="ds-dot" data-part="person" data-p="head" cx="0" cy="3" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="neck" cx="0" cy="13" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="chest" cx="0" cy="22" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="hip" cx="0" cy="34" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="shoulderL" cx="-7" cy="15" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="elbowL" cx="-13" cy="24" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="handL" cx="-16" cy="33" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="hipL" cx="-5" cy="36" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="kneeL" cx="-7" cy="50" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="footL" cx="-8" cy="64" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="shoulderR" cx="7" cy="15" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="elbowR" cx="13" cy="24" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="handR" cx="16" cy="33" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="hipR" cx="5" cy="36" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="kneeR" cx="7" cy="50" r="1.6"/>
<circle class="ds-dot" data-part="person" data-p="footR" cx="8" cy="64" r="1.6"/>
</g>
</g>
</svg>porridge
Someone has been eating my porridge
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="porridge" viewBox="-50 -4 104 74" role="img">
<title>Someone has been eating my porridge</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="porridge"]){--ds-dot-r:0.99;--ds-line-w:0.45}</style>
<defs><clipPath id="ds-clip-porridge"><rect class="ds-clip" x="-50" y="-4" width="104" height="74"/></clipPath></defs>
<g clip-path="url(#ds-clip-porridge)">
<g data-part="table">
<line class="ds-line" data-part="table" data-a="topL" data-b="topR" x1="-20" y1="36" x2="48" y2="36"/>
<line class="ds-line" data-part="table" data-a="legLTop" data-b="legLFoot" x1="-13" y1="36" x2="-13" y2="64"/>
<line class="ds-line" data-part="table" data-a="legRTop" data-b="legRFoot" x1="41" y1="36" x2="41" y2="64"/>
<circle class="ds-dot" data-part="table" data-p="topL" cx="-20" cy="36" r="0.99"/>
<circle class="ds-dot" data-part="table" data-p="topR" cx="48" cy="36" r="0.99"/>
<circle class="ds-dot" data-part="table" data-p="legLTop" cx="-13" cy="36" r="0.99"/>
<circle class="ds-dot" data-part="table" data-p="legLFoot" cx="-13" cy="64" r="0.99"/>
<circle class="ds-dot" data-part="table" data-p="legRTop" cx="41" cy="36" r="0.99"/>
<circle class="ds-dot" data-part="table" data-p="legRFoot" cx="41" cy="64" r="0.99"/>
</g>
<g data-part="bowlPapa">
<line class="ds-line" data-part="bowlPapa" data-a="rimL" data-b="rimR" x1="-14.05" y1="27.95" x2="2.05" y2="27.95"/>
<line class="ds-line" data-part="bowlPapa" data-a="rimL" data-b="sideL" x1="-14.05" y1="27.95" x2="-11.75" y2="33.7"/>
<line class="ds-line" data-part="bowlPapa" data-a="sideL" data-b="base" x1="-11.75" y1="33.7" x2="-6" y2="36"/>
<line class="ds-line" data-part="bowlPapa" data-a="base" data-b="sideR" x1="-6" y1="36" x2="-0.25" y2="33.7"/>
<line class="ds-line" data-part="bowlPapa" data-a="sideR" data-b="rimR" x1="-0.25" y1="33.7" x2="2.05" y2="27.95"/>
<circle class="ds-dot" data-part="bowlPapa" data-p="rimL" cx="-14.05" cy="27.95" r="0.99"/>
<circle class="ds-dot" data-part="bowlPapa" data-p="rimR" cx="2.05" cy="27.95" r="0.99"/>
<circle class="ds-dot" data-part="bowlPapa" data-p="sideL" cx="-11.75" cy="33.7" r="0.99"/>
<circle class="ds-dot" data-part="bowlPapa" data-p="sideR" cx="-0.25" cy="33.7" r="0.99"/>
<circle class="ds-dot" data-part="bowlPapa" data-p="base" cx="-6" cy="36" r="0.99"/>
</g>
<g data-part="bowlMama">
<line class="ds-line" data-part="bowlMama" data-a="rimL" data-b="rimR" x1="7" y1="29" x2="21" y2="29"/>
<line class="ds-line" data-part="bowlMama" data-a="rimL" data-b="sideL" x1="7" y1="29" x2="9" y2="34"/>
<line class="ds-line" data-part="bowlMama" data-a="sideL" data-b="base" x1="9" y1="34" x2="14" y2="36"/>
<line class="ds-line" data-part="bowlMama" data-a="base" data-b="sideR" x1="14" y1="36" x2="19" y2="34"/>
<line class="ds-line" data-part="bowlMama" data-a="sideR" data-b="rimR" x1="19" y1="34" x2="21" y2="29"/>
<circle class="ds-dot" data-part="bowlMama" data-p="rimL" cx="7" cy="29" r="0.99"/>
<circle class="ds-dot" data-part="bowlMama" data-p="rimR" cx="21" cy="29" r="0.99"/>
<circle class="ds-dot" data-part="bowlMama" data-p="sideL" cx="9" cy="34" r="0.99"/>
<circle class="ds-dot" data-part="bowlMama" data-p="sideR" cx="19" cy="34" r="0.99"/>
<circle class="ds-dot" data-part="bowlMama" data-p="base" cx="14" cy="36" r="0.99"/>
</g>
<g data-part="bowlBaby">
<line class="ds-line" data-part="bowlBaby" data-a="rimL" data-b="rimR" x1="26.75" y1="30.75" x2="37.25" y2="30.75"/>
<line class="ds-line" data-part="bowlBaby" data-a="rimL" data-b="sideL" x1="26.75" y1="30.75" x2="28.25" y2="34.5"/>
<line class="ds-line" data-part="bowlBaby" data-a="sideL" data-b="base" x1="28.25" y1="34.5" x2="32" y2="36"/>
<line class="ds-line" data-part="bowlBaby" data-a="base" data-b="sideR" x1="32" y1="36" x2="35.75" y2="34.5"/>
<line class="ds-line" data-part="bowlBaby" data-a="sideR" data-b="rimR" x1="35.75" y1="34.5" x2="37.25" y2="30.75"/>
<circle class="ds-dot" data-part="bowlBaby" data-p="rimL" cx="26.75" cy="30.75" r="0.99"/>
<circle class="ds-dot" data-part="bowlBaby" data-p="rimR" cx="37.25" cy="30.75" r="0.99"/>
<circle class="ds-dot" data-part="bowlBaby" data-p="sideL" cx="28.25" cy="34.5" r="0.99"/>
<circle class="ds-dot" data-part="bowlBaby" data-p="sideR" cx="35.75" cy="34.5" r="0.99"/>
<circle class="ds-dot" data-part="bowlBaby" data-p="base" cx="32" cy="36" r="0.99"/>
</g>
<g data-part="goldilocks">
<line class="ds-line" data-part="goldilocks" data-a="head0" data-b="head1" x1="-34" y1="2" x2="-30.46" y2="3.46"/>
<line class="ds-line" data-part="goldilocks" data-a="head1" data-b="head2" x1="-30.46" y1="3.46" x2="-29" y2="7"/>
<line class="ds-line" data-part="goldilocks" data-a="head2" data-b="head3" x1="-29" y1="7" x2="-30.46" y2="10.54"/>
<line class="ds-line" data-part="goldilocks" data-a="head3" data-b="head4" x1="-30.46" y1="10.54" x2="-34" y2="12"/>
<line class="ds-line" data-part="goldilocks" data-a="head4" data-b="head5" x1="-34" y1="12" x2="-37.54" y2="10.54"/>
<line class="ds-line" data-part="goldilocks" data-a="head5" data-b="head6" x1="-37.54" y1="10.54" x2="-39" y2="7"/>
<line class="ds-line" data-part="goldilocks" data-a="head6" data-b="head7" x1="-39" y1="7" x2="-37.54" y2="3.46"/>
<line class="ds-line" data-part="goldilocks" data-a="head7" data-b="head0" x1="-37.54" y1="3.46" x2="-34" y2="2"/>
… 11 kB in total — copy porridge.html insteadediHeroMeadowanimatedv2open to play
An EDI lifecycle, end to end — on a meadow
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediHeroMeadow" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>An EDI lifecycle, end to end — on a meadow</title>
… 932 kB in total — copy ediHeroMeadow.html insteadediHeroMeadowNightanimatedv2open to play
An EDI lifecycle, end to end — on a meadow, dark
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediHeroMeadowNight" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>An EDI lifecycle, end to end — on a meadow, dark</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="ediHeroMeadowNight"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#1a2320}:where(svg[data-dotscene="ediHeroMeadowNight"]){.ds-face--roof{fill:#3b4042}.ds-face--east{fill:#262a2c}.ds-face--south{fill:#1d2021}.ds-face--roof-warm{fill:#33383b}.ds-face--east-warm{fill:#262a2c}.ds-face--south-warm{fill:#16181a}.ds-face--roof-blue{fill:#3d9fbf}.ds-face--east-blue{fill:#1b7f9f}.ds-face--south-blue{fill:#0b6580}.ds-face--roof-kraft{fill:#33383b}.ds-face--east-kraft{fill:#262a2c}.ds-face--south-kraft{fill:#1d2021}.ds-face--roof-shed{fill:#3b4042}.ds-face--east-shed{fill:#262a2c}.ds-face--south-shed{fill:#16181a}.ds-face--apron{fill:#1d2021}.ds-face--road{fill:#262a2c}.ds-face--water{fill:#173540}.ds-face--bridge{fill:#262a2c}.ds-face--foliage{fill:#1f3a44}.ds-face--canopy{fill:#1b7f9f}.ds-face--door{fill:#33383b}.ds-face--doorway{fill:#16181a}.ds-face--flag{fill:#70bfd6}.ds-face--smoke{fill:#262a2c;fill-opacity:.7}.ds-face--cloud{fill:#262a2c;fill-opacity:.85}.ds-face--paper{fill:#3b4042}.ds-face--coin{fill:#1b7f9f}.ds-line{stroke:#edebe6}.ds-dot{fill:#edebe6}.ds-line--soft{stroke:#9a9a93;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#9a9a93;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#edebe6;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#edebe6;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#edebe6;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#edebe6;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#33383b;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#33383b;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#6b6b66;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#6b6b66;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#70bfd6;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#70bfd6;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#70bfd6;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#70bfd6;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#9a9a93;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#9a9a93;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#70bfd6;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#70bfd6;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#70bfd6;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#70bfd6;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#a4dded;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#a4dded;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#70bfd6;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#70bfd6;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#edebe6;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#edebe6;r:calc(0.45 * var(--ds-zoom))}.ds-face--patch{fill:#212c25}.ds-face--dirt{fill:#2a2521}.ds-line--grass{stroke:#3c4d3c;stroke-width:calc(0.32 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--grass{fill:#3c4d3c;r:calc(0.3 * var(--ds-zoom));fill-opacity:.7}.ds-line--dirt{stroke:#4a4034;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.55}.ds-dot--dirt{fill:#4a4034;r:calc(0.32 * var(--ds-zoom));fill-opacity:.55}}</style>
<rect class="ds-bg" x="-210" y="-166" width="480" height="200" fill="#1a2320"/>
<defs><clipPath id="ds-clip-ediHeroMeadowNight"><rect class="ds-clip" x="-210" y="-166" width="480" height="200"/></clipPath></defs>
<g clip-path="url(#ds-clip-ediHeroMeadowNight)">
<g data-part="patches">
<polygon class="ds-face ds-face--patch" data-part="patches" data-face="patch00 patch01 patch02 patch03 patch04 patch05" points="-109.34,-125.55 -120.84,-116.41 -143.06,-116.07 -146.56,-127.95 -132.72,-138.43 -112.45,-134.95"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch00" data-b="patch01" x1="-109.34" y1="-125.55" x2="-120.84" y2="-116.41"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch01" data-b="patch02" x1="-120.84" y1="-116.41" x2="-143.06" y2="-116.07"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch02" data-b="patch03" x1="-143.06" y1="-116.07" x2="-146.56" y2="-127.95"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch03" data-b="patch04" x1="-146.56" y1="-127.95" x2="-132.72" y2="-138.43"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch04" data-b="patch05" x1="-132.72" y1="-138.43" x2="-112.45" y2="-134.95"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch05" data-b="patch00" x1="-112.45" y1="-134.95" x2="-109.34" y2="-125.55"/>
<circle class="ds-dot ds-dot--grass" data-part="patches" data-p="patch00" cx="-109.34" cy="-125.55" r="0.62"/>
… 925 kB in total — copy ediHeroMeadowNight.html insteadediHeroNightanimatedv2open to play
An EDI lifecycle, end to end — dark
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediHeroNight" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>An EDI lifecycle, end to end — dark</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="ediHeroNight"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#16181a}:where(svg[data-dotscene="ediHeroNight"]){.ds-face--roof{fill:#3b4042}.ds-face--east{fill:#262a2c}.ds-face--south{fill:#1d2021}.ds-face--roof-warm{fill:#33383b}.ds-face--east-warm{fill:#262a2c}.ds-face--south-warm{fill:#16181a}.ds-face--roof-blue{fill:#3d9fbf}.ds-face--east-blue{fill:#1b7f9f}.ds-face--south-blue{fill:#0b6580}.ds-face--roof-kraft{fill:#33383b}.ds-face--east-kraft{fill:#262a2c}.ds-face--south-kraft{fill:#1d2021}.ds-face--roof-shed{fill:#3b4042}.ds-face--east-shed{fill:#262a2c}.ds-face--south-shed{fill:#16181a}.ds-face--apron{fill:#1d2021}.ds-face--road{fill:#262a2c}.ds-face--water{fill:#173540}.ds-face--bridge{fill:#262a2c}.ds-face--foliage{fill:#1f3a44}.ds-face--canopy{fill:#1b7f9f}.ds-face--door{fill:#33383b}.ds-face--doorway{fill:#16181a}.ds-face--flag{fill:#70bfd6}.ds-face--smoke{fill:#262a2c;fill-opacity:.7}.ds-face--cloud{fill:#262a2c;fill-opacity:.85}.ds-face--paper{fill:#3b4042}.ds-face--coin{fill:#1b7f9f}.ds-line{stroke:#edebe6}.ds-dot{fill:#edebe6}.ds-line--soft{stroke:#9a9a93;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#9a9a93;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#edebe6;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#edebe6;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#edebe6;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#edebe6;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#33383b;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#33383b;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#6b6b66;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#6b6b66;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#70bfd6;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#70bfd6;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#70bfd6;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#70bfd6;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#9a9a93;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#9a9a93;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#70bfd6;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#70bfd6;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#70bfd6;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#70bfd6;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#a4dded;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#a4dded;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#70bfd6;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#70bfd6;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#edebe6;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#edebe6;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-210" y="-166" width="480" height="200" fill="#16181a"/>
<defs><clipPath id="ds-clip-ediHeroNight"><rect class="ds-clip" x="-210" y="-166" width="480" height="200"/></clipPath></defs>
<g clip-path="url(#ds-clip-ediHeroNight)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 812 kB in total — copy ediHeroNight.html insteadediHeroanimatedv2open to play
An EDI lifecycle, end to end
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediHero" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>An EDI lifecycle, end to end</title>
… 818 kB in total — copy ediHero.html insteadediStagev2open to play
A carrier network, before anything moves
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediStage" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>A carrier network, before anything moves</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="ediStage"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="ediStage"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-210" y="-166" width="480" height="200" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-ediStage"><rect class="ds-clip" x="-210" y="-166" width="480" height="200"/></clipPath></defs>
<g clip-path="url(#ds-clip-ediStage)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 221 kB in total — copy ediStage.html insteadediStageMeadowv2open to play
A carrier network, before anything moves — on a meadow
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediStageMeadow" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>A carrier network, before anything moves — on a meadow</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="ediStageMeadow"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#e3ecd6}:where(svg[data-dotscene="ediStageMeadow"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}.ds-face--patch{fill:#d3e0c1}.ds-face--dirt{fill:#eadfc9}.ds-line--grass{stroke:#a9c091;stroke-width:calc(0.32 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--grass{fill:#a9c091;r:calc(0.3 * var(--ds-zoom));fill-opacity:.7}.ds-line--dirt{stroke:#c9b797;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.55}.ds-dot--dirt{fill:#c9b797;r:calc(0.32 * var(--ds-zoom));fill-opacity:.55}}</style>
<rect class="ds-bg" x="-210" y="-166" width="480" height="200" fill="#e3ecd6"/>
<defs><clipPath id="ds-clip-ediStageMeadow"><rect class="ds-clip" x="-210" y="-166" width="480" height="200"/></clipPath></defs>
<g clip-path="url(#ds-clip-ediStageMeadow)">
<g data-part="patches">
<polygon class="ds-face ds-face--patch" data-part="patches" data-face="patch00 patch01 patch02 patch03 patch04 patch05" points="-109.34,-125.55 -120.84,-116.41 -143.06,-116.07 -146.56,-127.95 -132.72,-138.43 -112.45,-134.95"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch00" data-b="patch01" x1="-109.34" y1="-125.55" x2="-120.84" y2="-116.41"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch01" data-b="patch02" x1="-120.84" y1="-116.41" x2="-143.06" y2="-116.07"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch02" data-b="patch03" x1="-143.06" y1="-116.07" x2="-146.56" y2="-127.95"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch03" data-b="patch04" x1="-146.56" y1="-127.95" x2="-132.72" y2="-138.43"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch04" data-b="patch05" x1="-132.72" y1="-138.43" x2="-112.45" y2="-134.95"/>
<line class="ds-line ds-line--grass" data-part="patches" data-a="patch05" data-b="patch00" x1="-112.45" y1="-134.95" x2="-109.34" y2="-125.55"/>
<circle class="ds-dot ds-dot--grass" data-part="patches" data-p="patch00" cx="-109.34" cy="-125.55" r="0.62"/>
… 334 kB in total — copy ediStageMeadow.html insteadediStageNightv2open to play
A carrier network, before anything moves — dark
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="ediStageNight" data-version="2" viewBox="-210 -166 480 200" role="img">
<title>A carrier network, before anything moves — dark</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="ediStageNight"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#16181a}:where(svg[data-dotscene="ediStageNight"]){.ds-face--roof{fill:#3b4042}.ds-face--east{fill:#262a2c}.ds-face--south{fill:#1d2021}.ds-face--roof-warm{fill:#33383b}.ds-face--east-warm{fill:#262a2c}.ds-face--south-warm{fill:#16181a}.ds-face--roof-blue{fill:#3d9fbf}.ds-face--east-blue{fill:#1b7f9f}.ds-face--south-blue{fill:#0b6580}.ds-face--roof-kraft{fill:#33383b}.ds-face--east-kraft{fill:#262a2c}.ds-face--south-kraft{fill:#1d2021}.ds-face--roof-shed{fill:#3b4042}.ds-face--east-shed{fill:#262a2c}.ds-face--south-shed{fill:#16181a}.ds-face--apron{fill:#1d2021}.ds-face--road{fill:#262a2c}.ds-face--water{fill:#173540}.ds-face--bridge{fill:#262a2c}.ds-face--foliage{fill:#1f3a44}.ds-face--canopy{fill:#1b7f9f}.ds-face--door{fill:#33383b}.ds-face--doorway{fill:#16181a}.ds-face--flag{fill:#70bfd6}.ds-face--smoke{fill:#262a2c;fill-opacity:.7}.ds-face--cloud{fill:#262a2c;fill-opacity:.85}.ds-face--paper{fill:#3b4042}.ds-face--coin{fill:#1b7f9f}.ds-line{stroke:#edebe6}.ds-dot{fill:#edebe6}.ds-line--soft{stroke:#9a9a93;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#9a9a93;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#edebe6;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#edebe6;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#edebe6;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#edebe6;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#33383b;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#33383b;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#6b6b66;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#6b6b66;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#70bfd6;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#70bfd6;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#70bfd6;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#70bfd6;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#9a9a93;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#9a9a93;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#70bfd6;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#70bfd6;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#70bfd6;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#70bfd6;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#a4dded;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#a4dded;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#70bfd6;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#70bfd6;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#edebe6;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#edebe6;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-210" y="-166" width="480" height="200" fill="#16181a"/>
<defs><clipPath id="ds-clip-ediStageNight"><rect class="ds-clip" x="-210" y="-166" width="480" height="200"/></clipPath></defs>
<g clip-path="url(#ds-clip-ediStageNight)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 221 kB in total — copy ediStageNight.html insteadedi00Prologueanimatedv2open to play
The goods are ready
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi00Prologue" data-version="2" viewBox="-246 -109.83 220 91.67" role="img">
<title>The goods are ready</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi00Prologue"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi00Prologue"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-246" y="-109.83" width="220" height="91.67" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi00Prologue"><rect class="ds-clip" x="-246" y="-109.83" width="220" height="91.67"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi00Prologue)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 238 kB in total — copy edi00Prologue.html insteadedi01Tenderanimatedv2open to play
204 — load tender
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi01Tender" data-version="2" viewBox="-220.8 -189.7 300 125" role="img">
<title>204 — load tender</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi01Tender"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi01Tender"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-220.8" y="-189.7" width="300" height="125" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi01Tender"><rect class="ds-clip" x="-220.8" y="-189.7" width="300" height="125"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi01Tender)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 251 kB in total — copy edi01Tender.html insteadedi02Ackanimatedv2open to play
997 — functional acknowledgment
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi02Ack" data-version="2" viewBox="-220.8 -189.7 300 125" role="img">
<title>997 — functional acknowledgment</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi02Ack"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi02Ack"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-220.8" y="-189.7" width="300" height="125" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi02Ack"><rect class="ds-clip" x="-220.8" y="-189.7" width="300" height="125"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi02Ack)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 243 kB in total — copy edi02Ack.html insteadedi03Acceptanimatedv2open to play
990 — response to tender
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi03Accept" data-version="2" viewBox="-83.6 -121.37 260 108.33" role="img">
<title>990 — response to tender</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi03Accept"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi03Accept"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-83.6" y="-121.37" width="260" height="108.33" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi03Accept"><rect class="ds-clip" x="-83.6" y="-121.37" width="260" height="108.33"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi03Accept)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 265 kB in total — copy edi03Accept.html insteadedi04Bolanimatedv2open to play
211 — bill of lading
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi04Bol" data-version="2" viewBox="-220.8 -189.7 300 125" role="img">
<title>211 — bill of lading</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi04Bol"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi04Bol"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-220.8" y="-189.7" width="300" height="125" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi04Bol"><rect class="ds-clip" x="-220.8" y="-189.7" width="300" height="125"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi04Bol)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 259 kB in total — copy edi04Bol.html insteadedi05Dispatchanimatedv2open to play
214 — dispatched
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi05Dispatch" data-version="2" viewBox="-266 -118.17 260 108.33" role="img">
<title>214 — dispatched</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi05Dispatch"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi05Dispatch"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-266" y="-118.17" width="260" height="108.33" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi05Dispatch"><rect class="ds-clip" x="-266" y="-118.17" width="260" height="108.33"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi05Dispatch)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 259 kB in total — copy edi05Dispatch.html insteadedi06Pickupanimatedv2open to play
214 — picked up
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi06Pickup" data-version="2" viewBox="-237.4 -77.65 150 62.5" role="img">
<title>214 — picked up</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi06Pickup"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi06Pickup"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-237.4" y="-77.65" width="150" height="62.5" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi06Pickup"><rect class="ds-clip" x="-237.4" y="-77.65" width="150" height="62.5"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi06Pickup)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 276 kB in total — copy edi06Pickup.html insteadedi07Asnanimatedv2open to play
856 — advance ship notice
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi07Asn" data-version="2" viewBox="-195.6 -186.27 440 183.33" role="img">
<title>856 — advance ship notice</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi07Asn"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi07Asn"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-195.6" y="-186.27" width="440" height="183.33" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi07Asn"><rect class="ds-clip" x="-195.6" y="-186.27" width="440" height="183.33"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi07Asn)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 257 kB in total — copy edi07Asn.html insteadedi08Terminalanimatedv2open to play
214 — arrived at terminal
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi08Terminal" data-version="2" viewBox="-103.6 -133.7 300 125" role="img">
<title>214 — arrived at terminal</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi08Terminal"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi08Terminal"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-103.6" y="-133.7" width="300" height="125" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi08Terminal"><rect class="ds-clip" x="-103.6" y="-133.7" width="300" height="125"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi08Terminal)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 280 kB in total — copy edi08Terminal.html insteadedi09Deliveryanimatedv2open to play
214 — out for delivery
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi09Delivery" data-version="2" viewBox="52 -124.67 320 133.33" role="img">
<title>214 — out for delivery</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi09Delivery"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi09Delivery"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="52" y="-124.67" width="320" height="133.33" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi09Delivery"><rect class="ds-clip" x="52" y="-124.67" width="320" height="133.33"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi09Delivery)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 254 kB in total — copy edi09Delivery.html insteadedi10Deliveredanimatedv2open to play
214 — delivered, with proof
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi10Delivered" data-version="2" viewBox="85.6 -79.73 160 66.67" role="img">
<title>214 — delivered, with proof</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi10Delivered"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi10Delivered"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="85.6" y="-79.73" width="160" height="66.67" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi10Delivered"><rect class="ds-clip" x="85.6" y="-79.73" width="160" height="66.67"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi10Delivered)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 336 kB in total — copy edi10Delivered.html insteadedi11Invoiceanimatedv2open to play
210 — freight invoice
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi11Invoice" data-version="2" viewBox="-29.2 -201.47 320 133.33" role="img">
<title>210 — freight invoice</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi11Invoice"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi11Invoice"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-29.2" y="-201.47" width="320" height="133.33" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi11Invoice"><rect class="ds-clip" x="-29.2" y="-201.47" width="320" height="133.33"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi11Invoice)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 252 kB in total — copy edi11Invoice.html insteadedi12Paymentanimatedv2open to play
820 — payment and remittance
earlier: v1
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="edi12Payment" data-version="2" viewBox="-29.2 -201.47 320 133.33" role="img">
<title>820 — payment and remittance</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="edi12Payment"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#fbfaf7}:where(svg[data-dotscene="edi12Payment"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#d5d2c8}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#70bfd6}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#e6e4dd}.ds-face--east-kraft{fill:#d5d2c8}.ds-face--south-kraft{fill:#b9b5a9}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#d5d2c8}.ds-face--apron{fill:#f2f1ec}.ds-face--road{fill:#e6e4dd}.ds-face--water{fill:#cfeaf4}.ds-face--bridge{fill:#f2f1ec}.ds-face--foliage{fill:#e4f4f9}.ds-face--canopy{fill:#a4dded}.ds-face--door{fill:#d5d2c8}.ds-face--doorway{fill:#3b4042}.ds-face--flag{fill:#3d9fbf}.ds-face--smoke{fill:#f2f1ec;fill-opacity:.7}.ds-face--cloud{fill:#ffffff;fill-opacity:.85}.ds-face--paper{fill:#ffffff}.ds-face--coin{fill:#a4dded}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#3b4042;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.8}.ds-dot--soft{fill:#3b4042;r:calc(0.42 * var(--ds-zoom));fill-opacity:.8}.ds-line--wheel{stroke:#1d2021;stroke-width:calc(0.7 * var(--ds-zoom))}.ds-dot--wheel{fill:#1d2021;r:calc(0.5 * var(--ds-zoom))}.ds-line--vehicle{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--vehicle{fill:#1d2021;r:calc(0.55 * var(--ds-zoom))}.ds-line--lot{stroke:#a4dded;stroke-width:calc(0.3 * var(--ds-zoom))}.ds-dot--lot{fill:#a4dded;r:calc(0.4 * var(--ds-zoom))}.ds-line--ground{stroke:#3d9fbf;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--ground{fill:#3d9fbf;r:calc(0.5 * var(--ds-zoom));fill-opacity:.8}.ds-line--kerb{stroke:#3b4042;stroke-width:calc(0.45 * var(--ds-zoom));stroke-opacity:.75}.ds-dot--kerb{fill:#3b4042;r:calc(0.5 * var(--ds-zoom));fill-opacity:.75}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.7}.ds-line--bank{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:.6}.ds-dot--bank{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:.6}.ds-line--foliage{stroke:#3b4042;stroke-width:calc(0.35 * var(--ds-zoom))}.ds-dot--foliage{fill:#3b4042;r:calc(0.45 * var(--ds-zoom))}.ds-line--net{stroke:#1b7f9f;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--net{fill:#1b7f9f;r:calc(0.65 * var(--ds-zoom))}.ds-line--link{stroke:#1b7f9f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:.28;stroke-dasharray:1.4 2.2}.ds-dot--link{fill:#1b7f9f;r:calc(0.5 * var(--ds-zoom));fill-opacity:.4}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#1b7f9f;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:.9}.ds-dot--pulse{fill:#1b7f9f;r:calc(0.55 * var(--ds-zoom))}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}}</style>
<rect class="ds-bg" x="-29.2" y="-201.47" width="320" height="133.33" fill="#fbfaf7"/>
<defs><clipPath id="ds-clip-edi12Payment"><rect class="ds-clip" x="-29.2" y="-201.47" width="320" height="133.33"/></clipPath></defs>
<g clip-path="url(#ds-clip-edi12Payment)">
<g data-part="river">
<polygon class="ds-face ds-face--water" data-part="river" data-face="bankL0 bankL1 bankL2 bankL3 bankL4 bankL5 bankL6 bankL7 bankL8 bankL9 bankL10 bankR10 bankR9 bankR8 bankR7 bankR6 bankR5 bankR4 bankR3 bankR2 bankR1 bankR0" points="-89.56,-152.53 -97.61,-116.15 -93.59,-86.34 -105.54,-60.62 -105.62,-40 -105.57,-20.48 -113.57,-0.48 -113.61,19.77 -117.61,41.79 -117.61,66.19 -113.59,92.37 -94.41,91.63 -98.39,65.81 -98.39,42.21 -94.39,20.23 -94.43,0.48 -86.43,-19.52 -86.38,-40 -86.46,-59.38 -74.41,-85.66 -78.39,-115.85 -70.44,-151.47"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL0" data-b="bankL1" x1="-89.56" y1="-152.53" x2="-97.61" y2="-116.15"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL1" data-b="bankL2" x1="-97.61" y1="-116.15" x2="-93.59" y2="-86.34"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL2" data-b="bankL3" x1="-93.59" y1="-86.34" x2="-105.54" y2="-60.62"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL3" data-b="bankL4" x1="-105.54" y1="-60.62" x2="-105.62" y2="-40"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL4" data-b="bankL5" x1="-105.62" y1="-40" x2="-105.57" y2="-20.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL5" data-b="bankL6" x1="-105.57" y1="-20.48" x2="-113.57" y2="-0.48"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL6" data-b="bankL7" x1="-113.57" y1="-0.48" x2="-113.61" y2="19.77"/>
<line class="ds-line ds-line--bank" data-part="river" data-a="bankL7" data-b="bankL8" x1="-113.61" y1="19.77" x2="-117.61" y2="41.79"/>
… 287 kB in total — copy edi12Payment.html insteadislandHeroNightanimatedv6open to play
The Island of Misfit Applications — dark
earlier: v1 · v2 · v3 · v4 · v5
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="islandHeroNight" data-version="6" viewBox="-210 -155 600 250" role="img">
<title>The Island of Misfit Applications — dark</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="islandHeroNight"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#0f1d24}:where(svg[data-dotscene="islandHeroNight"]){.ds-face--roof{fill:#3b4042}.ds-face--east{fill:#262a2c}.ds-face--south{fill:#1d2021}.ds-face--roof-warm{fill:#574f41}.ds-face--east-warm{fill:#3c362c}.ds-face--south-warm{fill:#16181a}.ds-face--roof-blue{fill:#3d9fbf}.ds-face--east-blue{fill:#1b7f9f}.ds-face--south-blue{fill:#0b6580}.ds-face--roof-kraft{fill:#746c5c}.ds-face--east-kraft{fill:#574f41}.ds-face--south-kraft{fill:#3c362c}.ds-face--roof-shed{fill:#3b4042}.ds-face--east-shed{fill:#262a2c}.ds-face--south-shed{fill:#16181a}.ds-face--sea{fill:#103240}.ds-face--shallows{fill:#173f4f}.ds-face--sand{fill:#3c362c}.ds-face--grass{fill:#1a2320}.ds-face--patch{fill:#212c25}.ds-face--rock{fill:#262a2c}.ds-face--foliage{fill:#212c25}.ds-face--trunk{fill:#3c362c}.ds-face--wood{fill:#574f41}.ds-face--canvas{fill:#574f41}.ds-face--lamp{fill:#6fc2dc}.ds-face--beam{fill:#6fc2dc}.ds-face--glass{fill:#075166}.ds-face--screen{fill:#075166}.ds-face--paper{fill:#3b4042}.ds-face--bubble{fill:#3b4042}.ds-face--metal{fill:#3b4042}.ds-face--sail{fill:#3b4042}.ds-face--hull{fill:#3c362c}.ds-face--sun{fill:#3d9fbf}.ds-face--moon{fill:#c2e8f3}.ds-face--wing{fill:#3b4042}.ds-face--banner{fill:#3b4042}.ds-face--shell{fill:#574f41}.ds-face--flag{fill:#6fc2dc}.ds-face--door{fill:#574f41}.ds-face--night{fill:#000000}.ds-face--coin{fill:#1b7f9f}.ds-face--smoke{fill:#262a2c}.ds-face--cloud{fill:#262a2c}.ds-face--beam{fill-opacity:.55}.ds-face--shallows{fill-opacity:.7}.ds-face--bubble{fill-opacity:.92}.ds-face--smoke{fill-opacity:.7}.ds-face--cloud{fill-opacity:.85}.ds-line{stroke:#edebe6}.ds-dot{fill:#edebe6}.ds-line--soft{stroke:#8e9598;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:0.8}.ds-dot--soft{fill:#8e9598;r:calc(0.42 * var(--ds-zoom));fill-opacity:0.8}.ds-line--blue{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--blue{fill:#a4dded;r:calc(0.6 * var(--ds-zoom))}.ds-line--lamp{stroke:#a4dded;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--lamp{fill:#a4dded;r:calc(0.65 * var(--ds-zoom))}.ds-line--sun{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom));stroke-opacity:0.85}.ds-dot--sun{fill:#a4dded;r:calc(0.55 * var(--ds-zoom));fill-opacity:0.85}.ds-line--star{stroke:#c2e8f3;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.9}.ds-dot--star{fill:#c2e8f3;r:calc(0.6 * var(--ds-zoom));fill-opacity:0.9}.ds-line--sea{stroke:#6fc2dc;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.7}.ds-dot--sea{fill:#6fc2dc;r:calc(0.45 * var(--ds-zoom));fill-opacity:0.7}.ds-line--water{stroke:#6fc2dc;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.7}.ds-dot--water{fill:#6fc2dc;r:calc(0.45 * var(--ds-zoom));fill-opacity:0.7}.ds-line--sand{stroke:#948c7d;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:0.6}.ds-dot--sand{fill:#948c7d;r:calc(0.45 * var(--ds-zoom));fill-opacity:0.6}.ds-line--wood{stroke:#948c7d;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.85}.ds-dot--wood{fill:#948c7d;r:calc(0.5 * var(--ds-zoom));fill-opacity:0.85}.ds-line--metal{stroke:#878e91;stroke-width:calc(0.4 * var(--ds-zoom))}.ds-dot--metal{fill:#878e91;r:calc(0.5 * var(--ds-zoom))}.ds-line--foliage{stroke:#55704f;stroke-width:calc(0.4 * var(--ds-zoom))}.ds-dot--foliage{fill:#55704f;r:calc(0.45 * var(--ds-zoom))}.ds-line--frond{stroke:#55704f;stroke-width:calc(0.32 * var(--ds-zoom));stroke-opacity:0.9}.ds-dot--frond{fill:#55704f;r:calc(0.22 * var(--ds-zoom));fill-opacity:0.9}.ds-face--mug{fill:#3b4042}.ds-face--beard{fill:#8e9598;fill-opacity:.32}.ds-line--mug{stroke:#edebe6;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--mug{fill:#edebe6;r:calc(0.36 * var(--ds-zoom))}.ds-line--steam{stroke:#8e9598;stroke-width:calc(0.32 * var(--ds-zoom));stroke-opacity:0.75}.ds-dot--steam{fill:#8e9598;r:calc(0.26 * var(--ds-zoom));fill-opacity:0.75}.ds-line--canvas{stroke:#8e9598;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:0.7}.ds-dot--canvas{fill:#8e9598;r:calc(0.4 * var(--ds-zoom));fill-opacity:0.7}.ds-line--token{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#a4dded;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#a4dded;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#a4dded;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#a4dded;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#a4dded;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:0.9}.ds-dot--pulse{fill:#a4dded;r:calc(0.55 * var(--ds-zoom));fill-opacity:0.9}.ds-line--bird{stroke:#edebe6;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#edebe6;r:calc(0.45 * var(--ds-zoom))}.ds-line--night,.ds-dot--night{display:none}}</style>
<rect class="ds-bg" x="-210" y="-155" width="600" height="250" fill="#0f1d24"/>
<defs><clipPath id="ds-clip-islandHeroNight"><rect class="ds-clip" x="-210" y="-155" width="600" height="250"/></clipPath></defs>
<g clip-path="url(#ds-clip-islandHeroNight)">
<g data-part="sun" opacity="0">
<polygon class="ds-face ds-face--sun" data-part="sun" data-face="s0 s1 s2 s3 s4 s5 s6 s7 s8 s9" points="360,1 365.29,2.72 368.56,7.22 368.56,12.78 365.29,17.28 360,19 354.71,17.28 351.44,12.78 351.44,7.22 354.71,2.72"/>
… 1002 kB in total — copy islandHeroNight.html insteadislandHeroanimatedv6open to play
The Island of Misfit Applications
earlier: v1 · v2 · v3 · v4 · v5
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="islandHero" data-version="6" viewBox="-210 -155 600 250" role="img">
<title>The Island of Misfit Applications</title>
… 1011 kB in total — copy islandHero.html insteadislandStagev6open to play
The island, before the day begins
earlier: v1 · v2 · v3 · v4 · v5
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="islandStage" data-version="6" viewBox="-210 -155 600 250" role="img">
<title>The island, before the day begins</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="islandStage"]){--ds-dot-r:0.62;--ds-line-w:0.34;--ds-face-fill:#dcf2f9}:where(svg[data-dotscene="islandStage"]){.ds-face--roof{fill:#ffffff}.ds-face--east{fill:#f2f1ec}.ds-face--south{fill:#e6e4dd}.ds-face--roof-warm{fill:#f2f1ec}.ds-face--east-warm{fill:#e6e4dd}.ds-face--south-warm{fill:#dbd9d2}.ds-face--roof-blue{fill:#a4dded}.ds-face--east-blue{fill:#6fc2dc}.ds-face--south-blue{fill:#3d9fbf}.ds-face--roof-kraft{fill:#dbd9d2}.ds-face--east-kraft{fill:#b4b2ab}.ds-face--south-kraft{fill:#948c7d}.ds-face--roof-shed{fill:#ffffff}.ds-face--east-shed{fill:#e6e4dd}.ds-face--south-shed{fill:#dbd9d2}.ds-face--sea{fill:#c2e8f3}.ds-face--shallows{fill:#dcf2f9}.ds-face--sand{fill:#f2f1ec}.ds-face--grass{fill:#e3ecd6}.ds-face--patch{fill:#d3e0c1}.ds-face--rock{fill:#dbd9d2}.ds-face--foliage{fill:#d3e0c1}.ds-face--trunk{fill:#dbd9d2}.ds-face--wood{fill:#e6e4dd}.ds-face--canvas{fill:#f2f1ec}.ds-face--lamp{fill:#a4dded}.ds-face--beam{fill:#a4dded}.ds-face--glass{fill:#dcf2f9}.ds-face--screen{fill:#dcf2f9}.ds-face--paper{fill:#ffffff}.ds-face--bubble{fill:#ffffff}.ds-face--metal{fill:#dbd9d2}.ds-face--sail{fill:#ffffff}.ds-face--hull{fill:#e6e4dd}.ds-face--sun{fill:#dcf2f9}.ds-face--moon{fill:#dcf2f9}.ds-face--wing{fill:#f2f1ec}.ds-face--banner{fill:#ffffff}.ds-face--shell{fill:#dbd9d2}.ds-face--flag{fill:#3d9fbf}.ds-face--door{fill:#dbd9d2}.ds-face--night{fill:#16181a}.ds-face--coin{fill:#a4dded}.ds-face--smoke{fill:#f2f1ec}.ds-face--cloud{fill:#ffffff}.ds-face--beam{fill-opacity:.55}.ds-face--shallows{fill-opacity:.7}.ds-face--bubble{fill-opacity:.92}.ds-face--smoke{fill-opacity:.7}.ds-face--cloud{fill-opacity:.85}.ds-line{stroke:#1d2021}.ds-dot{fill:#1d2021}.ds-line--soft{stroke:#656c6f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:0.8}.ds-dot--soft{fill:#656c6f;r:calc(0.42 * var(--ds-zoom));fill-opacity:0.8}.ds-line--blue{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--blue{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--lamp{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--lamp{fill:#0b6580;r:calc(0.65 * var(--ds-zoom))}.ds-line--sun{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom));stroke-opacity:0.85}.ds-dot--sun{fill:#0b6580;r:calc(0.55 * var(--ds-zoom));fill-opacity:0.85}.ds-line--star{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.9}.ds-dot--star{fill:#3d9fbf;r:calc(0.6 * var(--ds-zoom));fill-opacity:0.9}.ds-line--sea{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.7}.ds-dot--sea{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:0.7}.ds-line--water{stroke:#3d9fbf;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.7}.ds-dot--water{fill:#3d9fbf;r:calc(0.45 * var(--ds-zoom));fill-opacity:0.7}.ds-line--sand{stroke:#948c7d;stroke-width:calc(0.35 * var(--ds-zoom));stroke-opacity:0.6}.ds-dot--sand{fill:#948c7d;r:calc(0.45 * var(--ds-zoom));fill-opacity:0.6}.ds-line--wood{stroke:#574f41;stroke-width:calc(0.4 * var(--ds-zoom));stroke-opacity:0.85}.ds-dot--wood{fill:#574f41;r:calc(0.5 * var(--ds-zoom));fill-opacity:0.85}.ds-line--metal{stroke:#656c6f;stroke-width:calc(0.4 * var(--ds-zoom))}.ds-dot--metal{fill:#656c6f;r:calc(0.5 * var(--ds-zoom))}.ds-line--foliage{stroke:#7fa06a;stroke-width:calc(0.4 * var(--ds-zoom))}.ds-dot--foliage{fill:#7fa06a;r:calc(0.45 * var(--ds-zoom))}.ds-line--frond{stroke:#7fa06a;stroke-width:calc(0.32 * var(--ds-zoom));stroke-opacity:0.9}.ds-dot--frond{fill:#7fa06a;r:calc(0.22 * var(--ds-zoom));fill-opacity:0.9}.ds-face--mug{fill:#ffffff}.ds-face--beard{fill:#656c6f;fill-opacity:.32}.ds-line--mug{stroke:#1d2021;stroke-width:calc(0.42 * var(--ds-zoom))}.ds-dot--mug{fill:#1d2021;r:calc(0.36 * var(--ds-zoom))}.ds-line--steam{stroke:#656c6f;stroke-width:calc(0.32 * var(--ds-zoom));stroke-opacity:0.75}.ds-dot--steam{fill:#656c6f;r:calc(0.26 * var(--ds-zoom));fill-opacity:0.75}.ds-line--canvas{stroke:#656c6f;stroke-width:calc(0.3 * var(--ds-zoom));stroke-opacity:0.7}.ds-dot--canvas{fill:#656c6f;r:calc(0.4 * var(--ds-zoom));fill-opacity:0.7}.ds-line--token{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--token{fill:#0b6580;r:calc(0.6 * var(--ds-zoom))}.ds-line--glyph{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom))}.ds-dot--glyph{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--coin{stroke:#0b6580;stroke-width:calc(0.5 * var(--ds-zoom))}.ds-dot--coin{fill:#0b6580;r:calc(0.5 * var(--ds-zoom))}.ds-line--pulse{stroke:#0b6580;stroke-width:calc(0.55 * var(--ds-zoom));stroke-opacity:0.9}.ds-dot--pulse{fill:#0b6580;r:calc(0.55 * var(--ds-zoom));fill-opacity:0.9}.ds-line--bird{stroke:#1d2021;stroke-width:calc(0.45 * var(--ds-zoom))}.ds-dot--bird{fill:#1d2021;r:calc(0.45 * var(--ds-zoom))}.ds-line--night,.ds-dot--night{display:none}}</style>
<rect class="ds-bg" x="-210" y="-155" width="600" height="250" fill="#dcf2f9"/>
<defs><clipPath id="ds-clip-islandStage"><rect class="ds-clip" x="-210" y="-155" width="600" height="250"/></clipPath></defs>
<g clip-path="url(#ds-clip-islandStage)">
<g data-part="sun" opacity="0">
<polygon class="ds-face ds-face--sun" data-part="sun" data-face="s0 s1 s2 s3 s4 s5 s6 s7 s8 s9" points="360,1 365.29,2.72 368.56,7.22 368.56,12.78 365.29,17.28 360,19 354.71,17.28 351.44,12.78 351.44,7.22 354.71,2.72"/>
<line class="ds-line ds-line--sun" data-part="sun" data-a="s0" data-b="s1" x1="360" y1="1" x2="365.29" y2="2.72"/>
… 244 kB in total — copy islandStage.html insteadartBussetechanimated
One person, a workforce of agents, and a receipt for every run
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="artBussetech" viewBox="0 0 290 100" role="img">
<title>One person, a workforce of agents, and a receipt for every run</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="artBussetech"]){--ds-dot-r:2.1;--ds-line-w:0.9}:where(svg[data-dotscene="artBussetech"]){.ds-face{fill:#f2f1ec}.ds-face--blue{fill:#c2e8f3}.ds-face--soft{fill:#a4dded}.ds-face--warm{fill:#e6e4dd}.ds-line--blue{stroke:#0b6580}.ds-dot--blue{fill:#0b6580}.ds-line--soft{stroke:#0b6580;stroke-opacity:.45}.ds-dot--soft{fill:#0b6580;fill-opacity:.55}.ds-line--muted{stroke:#656c6f}.ds-dot--muted{fill:#656c6f}.ds-line--hair{stroke:#656c6f;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#656c6f;fill-opacity:.5;r:1.1}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) &{.ds-face{fill:#1e2124}.ds-face--blue{fill:#075166}.ds-face--soft{fill:#1b7f9f}.ds-face--warm{fill:#2a2d30}.ds-line--blue{stroke:#a4dded}.ds-dot--blue{fill:#a4dded}.ds-line--soft{stroke:#a4dded;stroke-opacity:.45}.ds-dot--soft{fill:#a4dded;fill-opacity:.55}.ds-line--muted{stroke:#8e9598}.ds-dot--muted{fill:#8e9598}.ds-line--hair{stroke:#8e9598;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#8e9598;fill-opacity:.5;r:1.1}}}:root[data-theme="dark"] &{.ds-face{fill:#1e2124}.ds-face--blue{fill:#075166}.ds-face--soft{fill:#1b7f9f}.ds-face--warm{fill:#2a2d30}.ds-line--blue{stroke:#a4dded}.ds-dot--blue{fill:#a4dded}.ds-line--soft{stroke:#a4dded;stroke-opacity:.45}.ds-dot--soft{fill:#a4dded;fill-opacity:.55}.ds-line--muted{stroke:#8e9598}.ds-dot--muted{fill:#8e9598}.ds-line--hair{stroke:#8e9598;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#8e9598;fill-opacity:.5;r:1.1}}}</style>
<defs><clipPath id="ds-clip-artBussetech"><rect class="ds-clip" x="0" y="0" width="290" height="100"/></clipPath></defs>
<g clip-path="url(#ds-clip-artBussetech)">
<g data-part="ledger">
<polygon class="ds-face" data-part="ledger" data-face="tl tr br bl" points="234,16 266,16 266,84 234,84"/>
<line class="ds-line" data-part="ledger" data-a="tl" data-b="tr" x1="234" y1="16" x2="266" y2="16"/>
<line class="ds-line" data-part="ledger" data-a="tr" data-b="br" x1="266" y1="16" x2="266" y2="84"/>
<line class="ds-line" data-part="ledger" data-a="br" data-b="bl" x1="266" y1="84" x2="234" y2="84"/>
<line class="ds-line" data-part="ledger" data-a="bl" data-b="tl" x1="234" y1="84" x2="234" y2="16"/>
<line class="ds-line ds-line--hair" data-part="ledger" data-a="e0L" data-b="e0R" x1="240" y1="28" x2="260" y2="28"/>
<line class="ds-line ds-line--hair" data-part="ledger" data-a="e1L" data-b="e1R" x1="240" y1="37" x2="260" y2="37"/>
<line class="ds-line ds-line--hair" data-part="ledger" data-a="e2L" data-b="e2R" x1="240" y1="46" x2="260" y2="46"/>
<line class="ds-line ds-line--hair" data-part="ledger" data-a="e3L" data-b="e3R" x1="240" y1="55" x2="240" y2="55"/>
<line class="ds-line ds-line--hair" data-part="ledger" data-a="e4L" data-b="e4R" x1="240" y1="64" x2="240" y2="64"/>
<line class="ds-line ds-line--blue" data-part="ledger" data-a="tickA" data-b="tickB" x1="249" y1="79" x2="249" y2="79"/>
<line class="ds-line ds-line--blue" data-part="ledger" data-a="tickB" data-b="tickC" x1="249" y1="79" x2="249" y2="79"/>
<circle class="ds-dot" data-part="ledger" data-p="tl" cx="234" cy="16" r="2.1"/>
<circle class="ds-dot" data-part="ledger" data-p="tr" cx="266" cy="16" r="2.1"/>
<circle class="ds-dot" data-part="ledger" data-p="br" cx="266" cy="84" r="2.1"/>
<circle class="ds-dot" data-part="ledger" data-p="bl" cx="234" cy="84" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e0L" cx="240" cy="28" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e0R" cx="260" cy="28" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e1L" cx="240" cy="37" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e1R" cx="260" cy="37" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e2L" cx="240" cy="46" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e2R" cx="260" cy="46" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e3L" cx="240" cy="55" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e3R" cx="240" cy="55" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e4L" cx="240" cy="64" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="ledger" data-p="e4R" cx="240" cy="64" r="2.1"/>
<circle class="ds-dot ds-dot--blue" data-part="ledger" data-p="tickA" cx="249" cy="79" r="2.1"/>
<circle class="ds-dot ds-dot--blue" data-part="ledger" data-p="tickB" cx="249" cy="79" r="2.1"/>
<circle class="ds-dot ds-dot--blue" data-part="ledger" data-p="tickC" cx="249" cy="79" r="2.1"/>
</g>
<g data-part="agent0">
<polygon class="ds-face ds-face--blue" data-part="agent0" data-face="r0 r1 r2 r3 r4 r5" points="122,17 128.06,20.5 128.06,27.5 122,31 115.94,27.5 115.94,20.5"/>
<line class="ds-line ds-line--blue" data-part="agent0" data-a="r0" data-b="r1" x1="122" y1="17" x2="128.06" y2="20.5"/>
<line class="ds-line ds-line--blue" data-part="agent0" data-a="r1" data-b="r2" x1="128.06" y1="20.5" x2="128.06" y2="27.5"/>
<line class="ds-line ds-line--blue" data-part="agent0" data-a="r2" data-b="r3" x1="128.06" y1="27.5" x2="122" y2="31"/>
… 27 kB in total — copy artBussetech.html insteadartEszettanimated
A pencil drawing an eszett by hand
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="artEszett" viewBox="0 0 290 100" role="img">
<title>A pencil drawing an eszett by hand</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="artEszett"]){--ds-dot-r:2.1;--ds-line-w:0.9}:where(svg[data-dotscene="artEszett"]){.ds-face{fill:#f2f1ec}.ds-face--blue{fill:#c2e8f3}.ds-face--soft{fill:#a4dded}.ds-face--warm{fill:#e6e4dd}.ds-line--blue{stroke:#0b6580}.ds-dot--blue{fill:#0b6580}.ds-line--soft{stroke:#0b6580;stroke-opacity:.45}.ds-dot--soft{fill:#0b6580;fill-opacity:.55}.ds-line--muted{stroke:#656c6f}.ds-dot--muted{fill:#656c6f}.ds-line--hair{stroke:#656c6f;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#656c6f;fill-opacity:.5;r:1.1}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) &{.ds-face{fill:#1e2124}.ds-face--blue{fill:#075166}.ds-face--soft{fill:#1b7f9f}.ds-face--warm{fill:#2a2d30}.ds-line--blue{stroke:#a4dded}.ds-dot--blue{fill:#a4dded}.ds-line--soft{stroke:#a4dded;stroke-opacity:.45}.ds-dot--soft{fill:#a4dded;fill-opacity:.55}.ds-line--muted{stroke:#8e9598}.ds-dot--muted{fill:#8e9598}.ds-line--hair{stroke:#8e9598;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#8e9598;fill-opacity:.5;r:1.1}}}:root[data-theme="dark"] &{.ds-face{fill:#1e2124}.ds-face--blue{fill:#075166}.ds-face--soft{fill:#1b7f9f}.ds-face--warm{fill:#2a2d30}.ds-line--blue{stroke:#a4dded}.ds-dot--blue{fill:#a4dded}.ds-line--soft{stroke:#a4dded;stroke-opacity:.45}.ds-dot--soft{fill:#a4dded;fill-opacity:.55}.ds-line--muted{stroke:#8e9598}.ds-dot--muted{fill:#8e9598}.ds-line--hair{stroke:#8e9598;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#8e9598;fill-opacity:.5;r:1.1}}}</style>
<defs><clipPath id="ds-clip-artEszett"><rect class="ds-clip" x="0" y="0" width="290" height="100"/></clipPath></defs>
<g clip-path="url(#ds-clip-artEszett)">
<g data-part="letter">
<line class="ds-line" data-part="letter" data-a="p0" data-b="p1" x1="112" y1="88" x2="112" y2="66"/>
<line class="ds-line" data-part="letter" data-a="p1" data-b="p2" x1="112" y1="66" x2="112" y2="44"/>
<line class="ds-line" data-part="letter" data-a="p2" data-b="p3" x1="112" y1="44" x2="113" y2="26"/>
<line class="ds-line" data-part="letter" data-a="p3" data-b="p4" x1="113" y1="26" x2="119" y2="15"/>
<line class="ds-line" data-part="letter" data-a="p4" data-b="p5" x1="119" y1="15" x2="130" y2="11"/>
<line class="ds-line" data-part="letter" data-a="p5" data-b="p6" x1="130" y1="11" x2="141" y2="15"/>
<line class="ds-line" data-part="letter" data-a="p6" data-b="p7" x1="141" y1="15" x2="146" y2="25"/>
<line class="ds-line" data-part="letter" data-a="p7" data-b="p8" x1="146" y1="25" x2="143" y2="36"/>
<line class="ds-line" data-part="letter" data-a="p8" data-b="p9" x1="143" y1="36" x2="136" y2="42"/>
<line class="ds-line" data-part="letter" data-a="p9" data-b="p10" x1="136" y1="42" x2="146" y2="49"/>
<line class="ds-line" data-part="letter" data-a="p10" data-b="p11" x1="146" y1="49" x2="153" y2="60"/>
<line class="ds-line" data-part="letter" data-a="p11" data-b="p12" x1="153" y1="60" x2="153" y2="73"/>
<line class="ds-line" data-part="letter" data-a="p12" data-b="p13" x1="153" y1="73" x2="146" y2="84"/>
<line class="ds-line" data-part="letter" data-a="p13" data-b="p14" x1="146" y1="84" x2="134" y2="88"/>
<line class="ds-line" data-part="letter" data-a="p14" data-b="p15" x1="134" y1="88" x2="124" y2="84"/>
<circle class="ds-dot" data-part="letter" data-p="p0" cx="112" cy="88" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p1" cx="112" cy="66" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p2" cx="112" cy="44" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p3" cx="113" cy="26" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p4" cx="119" cy="15" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p5" cx="130" cy="11" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p6" cx="141" cy="15" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p7" cx="146" cy="25" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p8" cx="143" cy="36" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p9" cx="136" cy="42" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p10" cx="146" cy="49" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p11" cx="153" cy="60" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p12" cx="153" cy="73" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p13" cx="146" cy="84" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p14" cx="134" cy="88" r="2.1"/>
<circle class="ds-dot" data-part="letter" data-p="p15" cx="124" cy="84" r="2.1"/>
</g>
<g data-part="pencil">
<polygon class="ds-face ds-face--warm" data-part="pencil" data-face="coneL coneR bandR bandL" points="118.97,77.95 123.42,76.15 114.99,55.29 110.54,57.08"/>
<polygon class="ds-face ds-face--soft" data-part="pencil" data-face="bandL bandR endR endL" points="110.54,57.08 114.99,55.29 112.74,49.72 108.29,51.52"/>
<line class="ds-line" data-part="pencil" data-a="tip" data-b="coneL" x1="124" y1="84" x2="118.97" y2="77.95"/>
<line class="ds-line" data-part="pencil" data-a="tip" data-b="coneR" x1="124" y1="84" x2="123.42" y2="76.15"/>
<line class="ds-line" data-part="pencil" data-a="coneL" data-b="coneR" x1="118.97" y1="77.95" x2="123.42" y2="76.15"/>
… 13 kB in total — copy artEszett.html insteadartHeroanimatedopen to play
Freight moves. Data moves first.
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="artHero" viewBox="-210 -166 480 200" preserveAspectRatio="xMidYMid slice" role="img">
<title>Freight moves. Data moves first.</title>
… 932 kB in total — copy artHero.html insteadartIslandanimatedopen to play
The Island of Misfit Applications
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="artIsland" viewBox="-210 -155 600 250" preserveAspectRatio="xMidYMid slice" role="img">
<title>The Island of Misfit Applications</title>
… 1011 kB in total — copy artIsland.html insteadartSinglestoneanimated
Systems, from tangle to tiers, with a request traced through
<svg xmlns="http://www.w3.org/2000/svg" class="dotscene" data-dotscene="artSinglestone" viewBox="0 0 290 100" role="img">
<title>Systems, from tangle to tiers, with a request traced through</title>
<style>:where(.dotscene){--ds-zoom:1}:where(.dotscene .ds-line){stroke:var(--ds-line-stroke,currentColor);stroke-width:calc(var(--ds-line-w,0.55) * var(--ds-zoom,1));stroke-linecap:round;fill:none}:where(.dotscene .ds-dot){fill:var(--ds-dot-fill,currentColor);r:calc(var(--ds-dot-r,1.2) * var(--ds-zoom,1))}:where(.dotscene .ds-face){fill:var(--ds-face-fill,#ffffff);stroke:none}:where(svg[data-dotscene="artSinglestone"]){--ds-dot-r:2.1;--ds-line-w:0.9}:where(svg[data-dotscene="artSinglestone"]){.ds-face{fill:#f2f1ec}.ds-face--blue{fill:#c2e8f3}.ds-face--soft{fill:#a4dded}.ds-face--warm{fill:#e6e4dd}.ds-line--blue{stroke:#0b6580}.ds-dot--blue{fill:#0b6580}.ds-line--soft{stroke:#0b6580;stroke-opacity:.45}.ds-dot--soft{fill:#0b6580;fill-opacity:.55}.ds-line--muted{stroke:#656c6f}.ds-dot--muted{fill:#656c6f}.ds-line--hair{stroke:#656c6f;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#656c6f;fill-opacity:.5;r:1.1}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) &{.ds-face{fill:#1e2124}.ds-face--blue{fill:#075166}.ds-face--soft{fill:#1b7f9f}.ds-face--warm{fill:#2a2d30}.ds-line--blue{stroke:#a4dded}.ds-dot--blue{fill:#a4dded}.ds-line--soft{stroke:#a4dded;stroke-opacity:.45}.ds-dot--soft{fill:#a4dded;fill-opacity:.55}.ds-line--muted{stroke:#8e9598}.ds-dot--muted{fill:#8e9598}.ds-line--hair{stroke:#8e9598;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#8e9598;fill-opacity:.5;r:1.1}}}:root[data-theme="dark"] &{.ds-face{fill:#1e2124}.ds-face--blue{fill:#075166}.ds-face--soft{fill:#1b7f9f}.ds-face--warm{fill:#2a2d30}.ds-line--blue{stroke:#a4dded}.ds-dot--blue{fill:#a4dded}.ds-line--soft{stroke:#a4dded;stroke-opacity:.45}.ds-dot--soft{fill:#a4dded;fill-opacity:.55}.ds-line--muted{stroke:#8e9598}.ds-dot--muted{fill:#8e9598}.ds-line--hair{stroke:#8e9598;stroke-opacity:.5;stroke-width:.6}.ds-dot--hair{fill:#8e9598;fill-opacity:.5;r:1.1}}}</style>
<defs><clipPath id="ds-clip-artSinglestone"><rect class="ds-clip" x="0" y="0" width="290" height="100"/></clipPath></defs>
<g clip-path="url(#ds-clip-artSinglestone)">
<g data-part="bandTop">
<polygon class="ds-face ds-face--blue" data-part="bandTop" data-face="a b c d" points="22,7 268,7 268,25 22,25"/>
<line class="ds-line ds-line--hair" data-part="bandTop" data-a="a" data-b="b" x1="22" y1="7" x2="268" y2="7"/>
<line class="ds-line ds-line--hair" data-part="bandTop" data-a="c" data-b="d" x1="268" y1="25" x2="22" y2="25"/>
<circle class="ds-dot ds-dot--hair" data-part="bandTop" data-p="a" cx="22" cy="7" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandTop" data-p="b" cx="268" cy="7" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandTop" data-p="c" cx="268" cy="25" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandTop" data-p="d" cx="22" cy="25" r="2.1"/>
</g>
<g data-part="bandMid">
<polygon class="ds-face ds-face--blue" data-part="bandMid" data-face="a b c d" points="22,41 268,41 268,59 22,59"/>
<line class="ds-line ds-line--hair" data-part="bandMid" data-a="a" data-b="b" x1="22" y1="41" x2="268" y2="41"/>
<line class="ds-line ds-line--hair" data-part="bandMid" data-a="c" data-b="d" x1="268" y1="59" x2="22" y2="59"/>
<circle class="ds-dot ds-dot--hair" data-part="bandMid" data-p="a" cx="22" cy="41" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandMid" data-p="b" cx="268" cy="41" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandMid" data-p="c" cx="268" cy="59" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandMid" data-p="d" cx="22" cy="59" r="2.1"/>
</g>
<g data-part="bandLow">
<polygon class="ds-face ds-face--blue" data-part="bandLow" data-face="a b c d" points="22,75 268,75 268,93 22,93"/>
<line class="ds-line ds-line--hair" data-part="bandLow" data-a="a" data-b="b" x1="22" y1="75" x2="268" y2="75"/>
<line class="ds-line ds-line--hair" data-part="bandLow" data-a="c" data-b="d" x1="268" y1="93" x2="22" y2="93"/>
<circle class="ds-dot ds-dot--hair" data-part="bandLow" data-p="a" cx="22" cy="75" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandLow" data-p="b" cx="268" cy="75" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandLow" data-p="c" cx="268" cy="93" r="2.1"/>
<circle class="ds-dot ds-dot--hair" data-part="bandLow" data-p="d" cx="22" cy="93" r="2.1"/>
</g>
<g data-part="systems">
<line class="ds-line" data-part="systems" data-a="c0" data-b="s0" x1="50" y1="16" x2="50" y2="50"/>
<line class="ds-line" data-part="systems" data-a="c0" data-b="s1" x1="50" y1="16" x2="145" y2="50"/>
<line class="ds-line" data-part="systems" data-a="c1" data-b="s1" x1="145" y1="16" x2="145" y2="50"/>
<line class="ds-line" data-part="systems" data-a="c1" data-b="s2" x1="145" y1="16" x2="240" y2="50"/>
<line class="ds-line" data-part="systems" data-a="c2" data-b="s1" x1="240" y1="16" x2="145" y2="50"/>
<line class="ds-line" data-part="systems" data-a="c2" data-b="s2" x1="240" y1="16" x2="240" y2="50"/>
<line class="ds-line" data-part="systems" data-a="s0" data-b="d0" x1="50" y1="50" x2="50" y2="84"/>
<line class="ds-line" data-part="systems" data-a="s1" data-b="d0" x1="145" y1="50" x2="50" y2="84"/>
<line class="ds-line" data-part="systems" data-a="s1" data-b="d1" x1="145" y1="50" x2="145" y2="84"/>
<line class="ds-line" data-part="systems" data-a="s2" data-b="d1" x1="240" y1="50" x2="145" y2="84"/>
<line class="ds-line" data-part="systems" data-a="s2" data-b="d2" x1="240" y1="50" x2="240" y2="84"/>
<line class="ds-line" data-part="systems" data-a="s0" data-b="d1" x1="50" y1="50" x2="145" y2="84"/>
<circle class="ds-dot" data-part="systems" data-p="c0" cx="50" cy="16" r="2.1"/>
… 11 kB in total — copy artSinglestone.html instead