_examples/basictext/demo/animation.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="840" height="581.04"><rect width="840" height="581.04" rx="5" ry="5" class="a"></rect><svg y="0%" x="0%"><circle cx="20" cy="20" r="6" class="b"></circle><circle cx="40" cy="20" r="6" class="c"></circle><circle cx="60" cy="20" r="6" class="d"></circle></svg><svg height="521.04" viewBox="0 0 80 52.104" width="800" x="15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="50"><style>.e, .g, .f {
	font-family:
			'Courier New'
			Roboto,
			Helvetica,
			Arial,
			sans-serif,
			'Apple Color Emoji',
			'Segoe UI Emoji' !important;
}.a{fill:rgb(35,35,35)}.b{fill:#ff5f58}.c{fill:#ffbd2e}.d{fill:#18c132}.e{font-family:'Courier New',Monaco,Consolas,Menlo,'Bitstream Vera Sans Mono','Powerline Symbols',monospace}.f{fill:rgb(160,160,160);white-space:pre}.g{fill:rgb(234,89,246);white-space:pre}.h{fill:transparent}.j{animation-duration:5.005635s;animation-iteration-count:infinite;animation-name:i;animation-timing-function:steps(1,end)}@keyframes i{0%{transform:translateX(-0px)}0.1%{transform:translateX(-80px)}0.1%{transform:translateX(-160px)}100%{transform:translateX(-240px)}}</style><g font-family="'Courier New',Monaco, Consolas, Menlo, &#x27;Bitstream Vera Sans Mono&#x27;, &#x27;Powerline Symbols&#x27;, monospace" font-size="1.67" class="e"><defs><symbol id="1"><text x="0" y="1.67" class="f">Default</text><text x="8.016" y="1.67" class="f">basic</text><text x="14.027999999999999" y="1.67" class="f">text</text><text x="19.037999999999997" y="1.67" class="f">printer.</text></symbol><symbol id="2"><text x="0" y="1.67" class="f">Can</text><text x="4.008" y="1.67" class="f">be</text><text x="7.013999999999999" y="1.67" class="f">used</text><text x="12.024" y="1.67" class="f">in</text><text x="15.029999999999998" y="1.67" class="f">any</text><text x="19.037999999999997" y="1.67" class="g">TextPrinter</text><text x="31.061999999999998" y="1.67" class="f">context.</text></symbol><symbol id="3"><text x="0" y="1.67" class="f">For</text><text x="4.008" y="1.67" class="f">example</text><text x="12.024" y="1.67" class="f">to</text><text x="15.029999999999998" y="1.67" class="f">resolve</text><text x="23.045999999999996" y="1.67" class="f">progressbars</text><text x="36.071999999999996" y="1.67" class="f">and</text><text x="40.08" y="1.67" class="f">spinners.</text></symbol><symbol id="a"><rect height="24" width="80" x="0" y="0" class="h"></rect></symbol></defs><rect height="52.104" width="80" class="a"></rect><g class="j"><svg x="0" y="0" width="320"><svg x="0"><use xlink:href="#a"></use></svg><svg x="80"><use xlink:href="#a"></use><use xlink:href="#1" y="0"></use><use xlink:href="#2" y="4.342"></use></svg><svg x="160"><use xlink:href="#a"></use><use xlink:href="#1" y="0"></use><use xlink:href="#2" y="4.342"></use><use xlink:href="#3" y="8.684"></use></svg><svg x="240"><use xlink:href="#a"></use><use xlink:href="#1" y="0"></use><use xlink:href="#2" y="4.342"></use><use xlink:href="#3" y="8.684"></use><text x="0" y="16.866999999999997" class="f">Restarting</text><text x="11.021999999999998" y="16.866999999999997" class="f">animation...</text></svg></svg></g></g></svg></svg>