Support theme-aware diagrams:

- SVG diagrams can adapt to the visual theme of the site through CSS.
- Use the include_svg filter to include a diagram that adapts to the
  theme.
- The styles/_diagrams.scss file controls the color mappings for
  theme-aware digrams.
- Theme-aware diagrams are limited to specific colors and diagram
  styles. Use UMLet or Google Draw and confirm that the diagram is still
  legible when you build it.
- This commit updates existing diagrams in most places to be
  theme-aware.
This commit is contained in:
mDuo13
2020-08-05 20:49:10 -07:00
parent 7bbf5b309c
commit 72002fd773
113 changed files with 8861 additions and 3068 deletions

488
img/default-paths.svg Normal file
View File

@@ -0,0 +1,488 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" width="1120" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" viewBox="20 20 1120 840" height="840" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12px" stroke-dashoffset="0" image-rendering="auto"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
/><g
><defs id="defs1"
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1"
><path d="M0 0 L2147483647 0 L2147483647 2147483647 L0 2147483647 L0 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath2"
><path d="M0 0 L0 90 L150 90 L150 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath3"
><path d="M0 0 L0 30 L200 30 L200 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath4"
><path d="M0 0 L0 30 L180 30 L180 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath5"
><path d="M0 0 L0 30 L30 30 L30 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6"
><path d="M0 0 L0 30 L210 30 L210 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath7"
><path d="M0 0 L0 30 L230 30 L230 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath8"
><path d="M0 0 L0 210 L310 210 L310 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath9"
><path d="M0 0 L0 100 L100 100 L100 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath10"
><path d="M0 0 L0 80 L140 80 L140 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath11"
><path d="M0 0 L0 90 L140 90 L140 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath12"
><path d="M0 0 L0 40 L30 40 L30 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath13"
><path d="M0 0 L0 20 L20 20 L20 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath14"
><path d="M0 0 L0 160 L50 160 L50 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath15"
><path d="M0 0 L0 30 L60 30 L60 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath16"
><path d="M0 0 L0 30 L80 30 L80 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath17"
><path d="M0 0 L0 240 L50 240 L50 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath18"
><path d="M0 0 L0 30 L160 30 L160 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath19"
><path d="M0 0 L0 30 L140 30 L140 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath20"
><path d="M0 0 L0 30 L120 30 L120 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath21"
><path d="M0 0 L0 30 L190 30 L190 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath22"
><path d="M0 0 L0 30 L170 30 L170 0 Z"
/></clipPath
><clipPath clipPathUnits="userSpaceOnUse" id="clipPath23"
><path d="M0 0 L0 30 L100 30 L100 0 Z"
/></clipPath
></defs
><g fill="rgb(120,120,120)" transform="translate(810,710)" stroke="rgb(120,120,120)"
><path d="M0.5 0.5 L138.5 0.5 L149 12.5 L149 89 L0.5 89 Z" stroke="none" clip-path="url(#clipPath2)"
/><path fill="none" d="M0.5 0.5 L138.5 0.5 L149 12.5 L149 89 L0.5 89 Z" clip-path="url(#clipPath2)" stroke="white"
/><path fill="none" d="M138.5 0.5 L138.5 12.5 L149 12.5" clip-path="url(#clipPath2)" stroke="white"
/></g
><g fill="white" font-size="14px" font-family="sans-serif" transform="translate(810,710)" stroke="white"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath2)" stroke="none"
>Cross-currency:</text
><text x="5" xml:space="preserve" y="34.2188" clip-path="url(#clipPath2)" stroke="none"
>Default path</text
><text x="5" xml:space="preserve" y="50.3281" clip-path="url(#clipPath2)" stroke="none"
>automatically uses</text
><text x="5" xml:space="preserve" y="66.4375" clip-path="url(#clipPath2)" stroke="none"
>an order book</text
></g
><g font-family="sans-serif" font-size="14px" transform="translate(860,210)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath3)" stroke="none"
>path step - order book</text
></g
><g font-family="sans-serif" font-size="14px" transform="translate(860,160)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath4)" stroke="none"
>path step - account</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(820,210)" stroke-opacity="0" stroke="rgb(255,255,255)"
><rect x="0.5" width="28.5" height="28.5" y="0.5" clip-path="url(#clipPath5)" stroke="none"
/></g
><g transform="translate(820,210)"
><rect fill="none" x="0.5" width="28.5" height="28.5" y="0.5" clip-path="url(#clipPath5)"
/></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(820,160)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="14.25" clip-path="url(#clipPath5)" cx="14.75" cy="14.75" stroke="none"
/></g
><g transform="translate(820,160)"
><circle fill="none" r="14.25" clip-path="url(#clipPath5)" cx="14.75" cy="14.75"
/></g
><g font-family="sans-serif" font-size="14px" transform="translate(860,90)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath6)" stroke="none"
>completes the default path</text
></g
><g font-family="sans-serif" font-size="14px" transform="translate(860,130)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath7)" stroke="none"
>implied by transaction fields</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(810,50)" stroke-opacity="0" stroke="rgb(255,255,255)"
><rect x="0.5" width="308.5" height="208.5" y="0.5" clip-path="url(#clipPath8)" stroke="none"
/></g
><g transform="translate(810,50)"
><rect fill="none" x="0.5" width="308.5" height="208.5" y="0.5" clip-path="url(#clipPath8)"
/><text x="129" font-size="14px" y="18.1094" clip-path="url(#clipPath8)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Legend</text
><path fill="none" d="M1 24.1094 L309 24.1094" clip-path="url(#clipPath8)"
/></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(350,700)" stroke-opacity="0" stroke="rgb(255,255,255)"
><rect x="0.5" width="98.5" height="98.5" y="0.5" clip-path="url(#clipPath9)" stroke="none"
/></g
><g stroke-width="2.5" transform="translate(350,700)"
><rect fill="none" x="0.5" width="98.5" height="98.5" y="0.5" clip-path="url(#clipPath9)"
/><text x="10" font-size="14px" y="18.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Order Book</text
><path fill="none" d="M1 24.1094 L99 24.1094" clip-path="url(#clipPath9)"
/><text x="5" font-size="14px" y="39.2188" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>FOO</text
><text x="5" font-size="14px" y="55.3281" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(issuer)</text
><path fill="none" d="M1 61.3281 L99 61.3281" clip-path="url(#clipPath9)"
/><text x="5" font-size="14px" y="76.4375" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>BAR</text
><text x="5" font-size="14px" y="92.5469" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(issuer)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(50,700)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(50,700)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="21" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Account</text
><text x="19" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Sender)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(200,700)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(200,700)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="15" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>SendMax.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(500,700)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(500,700)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="20" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Amount.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(650,700)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(650,700)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="9" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Destination</text
><text x="13" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Receiver)</text
></g
><g fill="rgb(120,120,120)" transform="translate(750,370)" stroke="rgb(120,120,120)"
><path d="M0.5 0.5 L128.5 0.5 L139 12.5 L139 79 L0.5 79 Z" stroke="none" clip-path="url(#clipPath10)"
/><path fill="none" d="M0.5 0.5 L128.5 0.5 L139 12.5 L139 79 L0.5 79 Z" clip-path="url(#clipPath10)" stroke="white"
/><path fill="none" d="M128.5 0.5 L128.5 12.5 L139 12.5" clip-path="url(#clipPath10)" stroke="white"
/></g
><g fill="white" font-size="14px" font-family="sans-serif" transform="translate(750,370)" stroke="white"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath10)" stroke="none"
>Same currency:</text
><text x="5" xml:space="preserve" y="34.2188" clip-path="url(#clipPath10)" stroke="none"
>Rippling through</text
><text x="5" xml:space="preserve" y="50.3281" clip-path="url(#clipPath10)" stroke="none"
>one issuer</text
></g
><g fill="yellow" transform="translate(800,560)" stroke="yellow"
><path d="M0.5 0.5 L138.5 0.5 L149 12.5 L149 89 L0.5 89 Z" stroke="none" clip-path="url(#clipPath2)"
/><path fill="none" d="M0.5 0.5 L138.5 0.5 L149 12.5 L149 89 L0.5 89 Z" clip-path="url(#clipPath2)" stroke="black"
/><path fill="none" d="M138.5 0.5 L138.5 12.5 L149 12.5" clip-path="url(#clipPath2)" stroke="black"
/></g
><g font-family="sans-serif" font-size="14px" transform="translate(800,560)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath2)" stroke="none"
>Same currency:</text
><text x="5" xml:space="preserve" y="34.2188" clip-path="url(#clipPath2)" stroke="none"
>Rippling through</text
><text x="5" xml:space="preserve" y="50.3281" clip-path="url(#clipPath2)" stroke="none"
>two issuers -</text
><text x="5" xml:space="preserve" y="66.4375" clip-path="url(#clipPath2)" stroke="none"
>unlikely to work</text
></g
><g fill="rgb(120,120,120)" transform="translate(610,120)" stroke="rgb(120,120,120)"
><path d="M0.5 0.5 L128.5 0.5 L139 12.5 L139 89 L0.5 89 Z" stroke="none" clip-path="url(#clipPath11)"
/><path fill="none" d="M0.5 0.5 L128.5 0.5 L139 12.5 L139 89 L0.5 89 Z" clip-path="url(#clipPath11)" stroke="white"
/><path fill="none" d="M128.5 0.5 L128.5 12.5 L139 12.5" clip-path="url(#clipPath11)" stroke="white"
/></g
><g fill="white" font-size="14px" font-family="sans-serif" transform="translate(610,120)" stroke="white"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath11)" stroke="none"
>Same currency:</text
><text x="5" xml:space="preserve" y="34.2188" clip-path="url(#clipPath11)" stroke="none"
>Direct trust line</text
><text x="5" xml:space="preserve" y="50.3281" clip-path="url(#clipPath11)" stroke="none"
>from sender to</text
><text x="5" xml:space="preserve" y="66.4375" clip-path="url(#clipPath11)" stroke="none"
>receiver</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(570,430)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(570,430)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="9" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Destination</text
><text x="13" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Receiver)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(360,430)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(360,430)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="20" font-size="14px" y="38.9453" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Amount.</text
><text x="29" font-size="14px" y="55.0547" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
><text x="19" font-size="14px" y="71.1641" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>currency</text
></g
><g font-size="14px" font-weight="bold" font-family="sans-serif" transform="translate(340,470)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath12)" stroke="none"
>=</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(240,430)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(240,430)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="15" font-size="14px" y="38.9453" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>SendMax.</text
><text x="29" font-size="14px" y="55.0547" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
><text x="19" font-size="14px" y="71.1641" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>currency</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(50,430)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(50,430)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="21" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Account</text
><text x="19" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Sender)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(160,40)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(160,40)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="20" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Amount.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g font-family="sans-serif" font-size="14px" transform="translate(140,80)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath12)" stroke="none"
>=</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(410,40)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(410,40)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="9" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Destination</text
><text x="13" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Receiver)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(40,40)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(40,40)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="21" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Account</text
><text x="19" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Sender)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(310,300)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(310,300)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="20" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Amount.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(570,300)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(570,300)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="9" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Destination</text
><text x="13" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Receiver)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(50,300)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(50,300)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="21" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Account</text
><text x="19" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Sender)</text
></g
><g font-family="sans-serif" font-size="14px" transform="translate(390,210)"
><text x="5" xml:space="preserve" y="18.1094" clip-path="url(#clipPath12)" stroke="none"
>=</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(290,170)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(290,170)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="20" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Amount.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(410,170)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(410,170)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="9" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Destination</text
><text x="13" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Receiver)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(50,170)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(50,170)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="21" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Account</text
><text x="19" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Sender)</text
></g
><g transform="translate(400,600)"
><path fill="none" d="M0.5 0.5 L19 19" clip-path="url(#clipPath13)"
/><path fill="none" d="M19 0.5 L0.5 19" clip-path="url(#clipPath13)"
/></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(640,560)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(640,560)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="9" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Destination</text
><text x="13" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Receiver)</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(470,560)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(470,560)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="20" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Amount.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(240,560)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(240,560)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="15" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>SendMax.</text
><text x="29" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>issuer</text
></g
><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(50,560)" stroke-opacity="0" stroke="rgb(255,255,255)"
><circle r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75" stroke="none"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(50,560)" stroke-linecap="butt"
><circle fill="none" r="49.25" clip-path="url(#clipPath9)" cx="49.75" cy="49.75"
/><text x="21" font-size="14px" y="47" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>Account</text
><text x="19" font-size="14px" y="63.1094" clip-path="url(#clipPath9)" font-family="sans-serif" stroke="none" xml:space="preserve"
>(Sender)</text
></g
><g transform="translate(750,680)"
><path fill="none" d="M10.5 140.5 L30.5 140.5" clip-path="url(#clipPath14)"
/><path fill="none" d="M30.5 140.5 L30.5 10.5" clip-path="url(#clipPath14)"
/><path fill="none" d="M30.5 10.5 L10.5 10.5" clip-path="url(#clipPath14)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(810,130)" stroke-linecap="butt"
><path fill="none" d="M40.5 10.5 L10.5 10.5" clip-path="url(#clipPath15)"
/></g
><g stroke-width="2.5" transform="translate(810,90)"
><path fill="none" d="M40.5 10.5 L10.5 10.5" clip-path="url(#clipPath15)"
/></g
><g stroke-width="2.5" transform="translate(440,740)"
><path fill="none" d="M60.5 10.5 L10.5 10.5" clip-path="url(#clipPath16)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(140,740)" stroke-linecap="butt"
><path fill="none" d="M60.5 10.5 L10.5 10.5" clip-path="url(#clipPath16)"
/></g
><g stroke-width="2.5" transform="translate(290,740)"
><path fill="none" d="M60.5 10.5 L10.5 10.5" clip-path="url(#clipPath16)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(590,740)" stroke-linecap="butt"
><path fill="none" d="M10.5 10.5 L60.5 10.5" clip-path="url(#clipPath16)"
/></g
><g transform="translate(730,530)"
><path fill="none" d="M10.5 140.5 L30.5 140.5" clip-path="url(#clipPath14)"
/><path fill="none" d="M30.5 140.5 L30.5 10.5" clip-path="url(#clipPath14)"
/><path fill="none" d="M30.5 10.5 L10.5 10.5" clip-path="url(#clipPath14)"
/></g
><g transform="translate(680,300)"
><path fill="none" d="M10.5 220.5 L30.5 220.5" clip-path="url(#clipPath17)"
/><path fill="none" d="M30.5 220.5 L30.5 10.5" clip-path="url(#clipPath17)"
/><path fill="none" d="M30.5 10.5 L10.5 10.5" clip-path="url(#clipPath17)"
/></g
><g transform="translate(530,40)"
><path fill="none" d="M10.5 220.5 L30.5 220.5" clip-path="url(#clipPath17)"
/><path fill="none" d="M30.5 220.5 L30.5 10.5" clip-path="url(#clipPath17)"
/><path fill="none" d="M30.5 10.5 L10.5 10.5" clip-path="url(#clipPath17)"
/></g
><g stroke-width="2.5" transform="translate(330,600)"
><path fill="none" d="M140.5 10.5 L10.5 10.5" clip-path="url(#clipPath18)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(450,470)" stroke-linecap="butt"
><path fill="none" d="M120.5 10.5 L10.5 10.5" clip-path="url(#clipPath19)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(140,470)" stroke-linecap="butt"
><path fill="none" d="M100.5 10.5 L10.5 10.5" clip-path="url(#clipPath20)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(400,340)" stroke-linecap="butt"
><path fill="none" d="M170.5 10.5 L10.5 10.5" clip-path="url(#clipPath21)"
/></g
><g stroke-width="2.5" transform="translate(250,80)"
><path fill="none" d="M160.5 10.5 L10.5 10.5" clip-path="url(#clipPath4)"
/></g
><g stroke-width="2.5" transform="translate(140,340)"
><path fill="none" d="M170.5 10.5 L10.5 10.5" clip-path="url(#clipPath21)"
/></g
><g stroke-width="2.5" transform="translate(140,210)"
><path fill="none" d="M150.5 10.5 L10.5 10.5" clip-path="url(#clipPath22)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(560,600)" stroke-linecap="butt"
><path fill="none" d="M10.5 10.5 L80.5 10.5" clip-path="url(#clipPath23)"
/></g
><g stroke-dasharray="8,5" stroke-miterlimit="5" transform="translate(140,600)" stroke-linecap="butt"
><path fill="none" d="M100.5 10.5 L10.5 10.5" clip-path="url(#clipPath20)"
/></g
></g
></svg
>

After

Width:  |  Height:  |  Size: 31 KiB