Untitled

dabblet.html

<svg xmlns="http://www.w3.org/2000/svg" id="slides" width="100%" height="100%" viewBox="0 0 600 400">
<def>
<g id="slide2">
<g id="slide2-c1">
<circle cx="12" cy="50" r="10" stroke="#000" stroke-width="2" fill="none" />
<text x="7" y="54" font-size="10">小</text>
</g>
<g id="slide2-c2">
<circle cx="50" cy="52" r="50" stroke="#000" stroke-width="2" fill="none" />
<text x="30" y="67" font-size="40">大</text>
</g>
<g id="slide2-c3">
<circle cx="20" cy="52" r="20" stroke="#000" stroke-width="2" fill="none" />
<text x="15" y="57" font-size="10">M1</text>
</g>
<g id="slide2-c4">
<circle cx="30" cy="52" r="30" stroke="#000" stroke-width="2" fill="none" />
<text x="20" y="58" font-size="14">M2</text>
</g>
</g>
</def>

<svg x="100" y="100">
<use id="slide2-fig2" xlink:href="#slide2-c3" opacity="0">
<animate xlink:href="#slide2-fig2" attributeName="opacity" from="0" to="1"  begin="slide2_fig0.click" dur=".5s" fill="freeze"/>
<animate xlink:href="#slide2-fig2" attributeName="x" from="0" to="60"  begin="slide2_fig0.click" dur=".5s" fill="freeze"/>
</use>

<use id="slide2-fig3" xlink:href="#slide2-c4" opacity="0">
<animate xlink:href="#slide2-fig3" attributeName="opacity" from="0" to="1"  begin="slide2_fig0.click" dur=".5s" fill="freeze"/>
<animate xlink:href="#slide2-fig3" attributeName="x" from="0" to="140"  begin="slide2_fig0.click" dur=".5s" fill="freeze"/>
</use>

<use id="slide2-fig4" xlink:href="#slide2-c2" opacity="0">
<animate xlink:href="#slide2-fig4" attributeName="opacity" from="0" to="1"  begin="slide2_fig0.click" dur=".5s" fill="freeze"/>
<animate xlink:href="#slide2-fig4" attributeName="x" from="0" to="240"  begin="slide2_fig0.click" dur=".5s" fill="freeze"/>
</use>

<use id="slide2_fig0" xlink:href="#slide2-c1" x="0" y="0" />
</svg>

</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}