<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs>
<symbol id="fire">
<g>
<circle id="svg_1" r="1" cy="200" cx="200">
<animate attributename="cy" from="200" to="100" begin="touch.mousedown" id="up" dur="2s" fill="freeze"/>
<animate attributename="r" values="8;1" begin="up.end" dur="2s" id="blow"/>
<animate attributename="opacity" values="1;0" begin="blow.end" dur="2s" id="end" fill="freeze"/>
</circle>
</g>
</symbol>
</defs>
<rect x="0" y="0" width="400" height="200" opacity="1" fill="#111111" id="sky"/>
<use xlink:href="#fire" fill="#FF0000">
<animateTransform attributeName="transform" type="translate" values="0 0;50 50" begin="blow.begin" dur="1s" fill="freeze"/>
</use>
<use xlink:href="#fire" fill="#00FF00">
<animateTransform attributeName="transform" type="translate" values="0 0;-50 -50" begin="blow.begin" dur="1s" fill="freeze"/>
</use>
<use xlink:href="#fire" fill="#0000FF">
<animateTransform attributeName="transform" type="translate" values="0 0;50 -50" begin="blow.begin" dur="1s" fill="freeze"/>
</use>
<rect x="0" y="0" width="400" height="200" opacity="0" id="touch"/>
</svg>
