SVG smoothly morphing shape into other predefined shapes with Javascript
<ul>
<li>I want a smooth transition between the shapes (the example below shows a sudden transition just so you get an idea where I need a smooth transition).</li>
<li>The order of the shapes is determined by Javascript (for the example I fixed an arbitrary sequence, but in the actual problem user input determines which shape is choosen, so it isn't known beforehand).</li>
</ul>

<p><code>example.svg</code>:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="yes" ?&gt;

&lt;svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100%" height="100%" viewBox="0 0 400 400"&gt;
&lt;script&gt;
window.animate = function( fromId, toId, next )
{
    return function()
    {
        var elem = document.getElementById( 'elem' );
        /* Here a smooth animation is supposed to happen. */
        elem.setAttribute( 'xlink:href', '#' + toId );

        if( next )
        {
            window.setTimeout( next, 1000 );
        }
    };
};

window.onload = function()
{
    /* The animation order is determined by javascript. */
    var step3 = window.animate( 'path-2', 'path-1', null );
    var step2 = window.animate( 'path-1', 'path-2', step3 );
    var step1 = window.animate( 'path-0', 'path-1', step2 );
    var step0 = window.animate( 'path-0', 'path-0', step1 );

    step0();
};
&lt;/script&gt;

&lt;style&gt;path{stroke:#000;}&lt;/style&gt;

&lt;defs&gt;
&lt;path id="path-0" style="fill:#fcc" d="M0,0 h100 v100 h-100 v-100" /&gt;
&lt;path id="path-1" style="fill:#ccf" d="M0,0 h50 l50 50 l-100 50 v-100" /&gt;
&lt;path id="path-2" style="fill:#cfc" d="M0,0 h150 l-50 50 l-100 50 v-100" /&gt;
&lt;/defs&gt;

&lt;use id="elem" xlink:href="#path-0" x="150" y="150" /&gt;
&lt;/svg&gt;
</code></pre>

<p>Supposedly it's somehow doable with <code>&lt;animate&gt;</code>, but I can't get it to work.</p>

<p><code>animate.svg</code>:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="yes" ?&gt;

&lt;svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100%" height="100%" viewBox="0 0 400 400"&gt;
&lt;script&gt;
window.set_animation = function( animId, fromId, toId )
{
    var anim = document.getElementById( animId );
    var from = document.getElementById( fromId );
    var to = document.getElementById( toId );
    anim.setAttribute( 'from', from.getAttribute( 'd' ) );
    anim.setAttribute( 'to', to.getAttribute( 'd' ) );
};

window.onload = function()
{
    /* The animation order is determined by javascript. */
    window.set_animation( 'anim-0', 'path-0', 'path-1' );
    window.set_animation( 'anim-1', 'path-1', 'path-2' );
    window.set_animation( 'anim-2', 'path-2', 'path-1' );

    /* Can start animation only once animation steps are defined. */
    var anim = document.getElementById( 'anim-0' );
    anim.beginElement();
};
&lt;/script&gt;

&lt;style&gt;path{stroke:#000;}&lt;/style&gt;

&lt;defs&gt;
    &lt;path id="path-0" style="fill:#fcc" d="M0,0 l100,0 l0,100 l-100,0 l0,-100" /&gt;
    &lt;path id="path-1" style="fill:#ccf" d="M0,0 l50,0 l50,50 l-100,50 l0,-100" /&gt;
    &lt;path id="path-2" style="fill:#cfc" d="M0,0 l150,0 l-50,50 l-100,50 l0,-100" /&gt;
&lt;/defs&gt;

&lt;path id="elem" x="150" y="150" d=""&gt;
    &lt;animate id="anim-0" begin="indefinite" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" /&gt;
    &lt;animate id="anim-1" begin="anim-1.end" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" /&gt;
    &lt;animate id="anim-2" begin="anim-2.end" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" /&gt;
&lt;/path&gt;
&lt;/svg&gt;
</code></pre>