img/demo.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" text-rendering="geometricPrecision" font-weight="normal" font-family="Helvetica" width="180" height="180" viewBox="-30.0 -70.67 366.81 366.81">
<line x1="159.03" y1="63.48" x2="149.94" y2="68.73" stroke="rgb(0,0,0)" />
<line x1="149.94" y1="68.73" x2="140.85" y2="73.98" stroke="rgb(0,0,255)" />
<line x1="159.03" y1="63.48" x2="162.17" y2="33.64" stroke="rgb(0,0,0)" />
<line x1="163.82" y1="60.97" x2="166.33" y2="37.1" stroke="rgb(0,0,0)" />
<line x1="159.03" y1="63.48" x2="186.44" y2="75.68" stroke="rgb(0,0,0)" />
<line x1="162.17" y1="33.64" x2="191.52" y2="27.41" stroke="rgb(0,0,0)" />
<line x1="162.17" y1="33.64" x2="154.37" y2="26.62" stroke="rgb(0,0,0)" />
<line x1="154.37" y1="26.62" x2="146.57" y2="19.59" stroke="rgb(0,192,0)" />
<line x1="191.52" y1="27.41" x2="206.52" y2="53.39" stroke="rgb(0,0,0)" />
<polygon points="191.52,27.41 202.8,9.44 197.32,7.0" fill="rgb(0,0,0)" />
<line x1="227.09" y1="58.56" x2="227.71" y2="52.6" stroke="rgb(0,0,0)" />
<line x1="224.15" y1="57.82" x2="224.69" y2="52.71" stroke="rgb(0,0,0)" />
<line x1="221.21" y1="57.09" x2="221.66" y2="52.82" stroke="rgb(0,0,0)" />
<line x1="218.27" y1="56.35" x2="218.63" y2="52.94" stroke="rgb(0,0,0)" />
<line x1="215.33" y1="55.61" x2="215.6" y2="53.05" stroke="rgb(0,0,0)" />
<line x1="212.4" y1="54.87" x2="212.58" y2="53.16" stroke="rgb(0,0,0)" />
<line x1="209.46" y1="54.13" x2="209.55" y2="53.28" stroke="rgb(0,0,0)" />
<line x1="206.52" y1="53.39" x2="186.44" y2="75.68" stroke="rgb(0,0,0)" />
<polyline points="186.44,75.68 190.27,79.25 185.29,84.69 192.05,87.63 187.07,93.07 193.83,96.01 188.85,101.45 192.68,105.02" stroke="rgb(0,0,0)" fill="none" />
<line x1="125.26" y1="73.98" x2="118.9" y2="70.31" stroke="rgb(0,0,255)" />
<line x1="118.9" y1="70.31" x2="112.53" y2="66.63" stroke="rgb(192,0,192)" />
<line x1="99.65" y1="67.38" x2="93.59" y2="70.56" stroke="rgb(192,0,192)" />
<line x1="93.59" y1="70.56" x2="87.53" y2="73.75" stroke="rgb(192,192,0)" />
<line x1="109.44" y1="54.99" x2="109.53" y2="48.03" stroke="rgb(192,0,192)" />
<line x1="109.53" y1="48.03" x2="109.63" y2="41.06" stroke="rgb(255,0,0)" />
<line x1="104.94" y1="54.92" x2="105.03" y2="47.96" stroke="rgb(192,0,192)" />
<line x1="105.03" y1="47.96" x2="105.13" y2="41.0" stroke="rgb(255,0,0)" />
<line x1="104.64" y1="68.96" x2="102.65" y2="73.44" stroke="rgb(192,0,192)" />
<line x1="102.65" y1="73.44" x2="100.66" y2="77.92" stroke="rgb(255,0,0)" />
<line x1="192.68" y1="105.02" x2="221.21" y2="114.29" stroke="rgb(0,0,0)" />
<line x1="75.28" y1="72.33" x2="67.06" y2="67.5" stroke="rgb(192,192,0)" />
<line x1="67.06" y1="67.5" x2="58.83" y2="62.67" stroke="rgb(0,0,0)" />
<line x1="98.95" y1="89.18" x2="98.94" y2="97.84" stroke="rgb(255,0,0)" />
<line x1="98.94" y1="97.84" x2="98.94" y2="106.5" stroke="rgb(0,0,0)" />
<line x1="221.21" y1="114.29" x2="227.45" y2="143.64" stroke="rgb(0,0,0)" />
<line x1="226.24" y1="116.29" x2="231.23" y2="139.77" stroke="rgb(0,0,0)" />
<line x1="236.82" y1="100.24" x2="229.01" y2="107.27" stroke="rgb(0,0,255)" />
<line x1="229.01" y1="107.27" x2="221.21" y2="114.29" stroke="rgb(0,0,0)" />
<line x1="227.45" y1="143.64" x2="255.98" y2="152.91" stroke="rgb(0,0,0)" />
<line x1="227.45" y1="143.64" x2="205.15" y2="163.71" stroke="rgb(0,0,0)" />
<line x1="255.98" y1="152.91" x2="262.22" y2="182.25" stroke="rgb(0,0,0)" />
<line x1="255.98" y1="152.91" x2="278.28" y2="132.84" stroke="rgb(0,0,0)" />
<line x1="255.2" y1="147.56" x2="273.04" y2="131.5" stroke="rgb(0,0,0)" />
<line x1="278.28" y1="132.84" x2="272.04" y2="103.49" stroke="rgb(0,0,0)" />
<line x1="278.28" y1="132.84" x2="288.26" y2="136.09" stroke="rgb(0,0,0)" />
<line x1="288.26" y1="136.09" x2="298.25" y2="139.33" stroke="rgb(0,0,255)" />
<line x1="272.04" y1="103.49" x2="279.85" y2="96.47" stroke="rgb(0,0,0)" />
<line x1="279.85" y1="96.47" x2="287.65" y2="89.44" stroke="rgb(64,192,64)" />
<line x1="272.04" y1="103.49" x2="262.06" y2="100.25" stroke="rgb(0,0,0)" />
<line x1="262.06" y1="100.25" x2="252.07" y2="97.0" stroke="rgb(0,0,255)" />
<line x1="268.65" y1="107.12" x2="260.66" y2="104.53" stroke="rgb(0,0,0)" />
<line x1="260.66" y1="104.53" x2="252.67" y2="101.93" stroke="rgb(0,0,255)" />
<line x1="205.85" y1="161.57" x2="175.93" y2="156.58" stroke="rgb(0,0,0)" />
<line x1="204.46" y1="165.85" x2="177.32" y2="152.3" stroke="rgb(0,0,0)" />
<line x1="176.62" y1="154.44" x2="154.33" y2="174.51" stroke="rgb(0,0,0)" />
<line x1="176.62" y1="154.44" x2="174.44" y2="144.17" stroke="rgb(0,0,0)" />
<line x1="174.44" y1="144.17" x2="172.26" y2="133.9" stroke="rgb(255,0,0)" />
<line x1="262.22" y1="182.25" x2="266.71" y2="211.26" stroke="rgb(0,0,0)" />
<line x1="257.77" y1="182.94" x2="262.26" y2="211.94" stroke="rgb(0,0,0)" />
<line x1="266.67" y1="181.57" x2="271.16" y2="210.57" stroke="rgb(0,0,0)" />
<line x1="154.33" y1="174.51" x2="125.8" y2="165.24" stroke="rgb(0,0,0)" />
<line x1="152.86" y1="169.31" x2="130.04" y2="161.89" stroke="rgb(0,0,0)" />
<line x1="125.8" y1="165.24" x2="103.5" y2="185.32" stroke="rgb(0,0,0)" />
<line x1="103.5" y1="185.32" x2="74.97" y2="176.05" stroke="rgb(0,0,0)" />
<line x1="102.04" y1="180.11" x2="79.21" y2="172.69" stroke="rgb(0,0,0)" />
<line x1="74.97" y1="176.05" x2="52.67" y2="196.12" stroke="rgb(0,0,0)" />
<line x1="52.67" y1="196.12" x2="42.69" y2="192.88" stroke="rgb(0,0,0)" />
<line x1="42.69" y1="192.88" x2="32.7" y2="189.63" stroke="rgb(255,0,0)" />
<line x1="50.47" y1="196.59" x2="52.66" y2="206.86" stroke="rgb(0,0,0)" />
<line x1="52.66" y1="206.86" x2="54.84" y2="217.13" stroke="rgb(255,0,0)" />
<line x1="54.87" y1="195.65" x2="57.05" y2="205.92" stroke="rgb(0,0,0)" />
<line x1="57.05" y1="205.92" x2="59.24" y2="216.19" stroke="rgb(255,0,0)" />
<text x="139.88" y="20.57" font-size="14" fill="rgb(0,192,0)" text-anchor="middle">Br</text>
<text x="203.72" y="7.0" font-size="14" fill="rgb(0,128,0)" text-anchor="middle">I</text>
<text x="236.35" y="63.52" font-size="14" fill="rgb(0,255,0)" text-anchor="middle">F</text>
<text x="133.06" y="85.48" font-size="14" fill="rgb(0,0,255)" text-anchor="middle">NH</text>
<text x="107.08" y="70.48" font-size="14" fill="rgb(192,0,192)" text-anchor="middle">P</text>
<text x="82.33" y="83.47" font-size="14" fill="rgb(192,192,0)" text-anchor="middle">S</text>
<text x="107.46" y="42.06" font-size="14" fill="rgb(255,0,0)" text-anchor="middle">O</text>
<text x="98.95" y="88.76" font-size="14" fill="rgb(255,0,0)" text-anchor="middle">O</text>
<text x="243.51" y="101.22" font-size="14" fill="rgb(0,0,255)" text-anchor="middle">N</text>
<text x="0.0" y="147.87" font-size="14" fill="rgb(0,192,192)" text-anchor="middle">Na<tspan baseline-shift="50%" font-size="9.799999999999999">+</tspan></text>
<text x="294.34" y="90.42" font-size="14" fill="rgb(64,192,64)" text-anchor="middle">Cl</text>
<text x="299.81" y="149.11" font-size="14" fill="rgb(0,0,255)">NH<tspan baseline-shift="-25%" font-size="9.799999999999999">2</tspan></text>
<text x="24.14" y="193.85" font-size="14" fill="rgb(255,0,0)" text-anchor="middle">O<tspan baseline-shift="50%" font-size="9.799999999999999">–</tspan></text>
<text x="58.91" y="232.47" font-size="14" fill="rgb(255,0,0)" text-anchor="middle">O</text>
<text x="177.39" y="132.09" font-size="14" fill="rgb(255,0,0)" text-anchor="end">HO</text>
</svg>