An SVG animation of the classic 64/65 Fibonacci paradox

64-65_paradox.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="280" height="180" viewBox="-1 -1 14 9">
<defs>
    <pattern patternUnits="userSpaceOnUse"
        id="checker" width="2" height="2">
        <rect x="0" y="0" width="1" height="1" fill="#aaa"/>
        <rect x="1" y="1" width="1" height="1" fill="#aaa"/>
    </pattern>
    <pattern patternUnits="userSpaceOnUse"
        id="ch_red" width="2" height="2">
        <rect width="2" height="2" style="fill:url(#checker)"/>
        <rect width="2" height="2" style="fill-opacity:0.6;fill:red"/>
    </pattern>
    <pattern patternUnits="userSpaceOnUse"
        id="ch_yellow" width="2" height="2">
        <rect width="2" height="2" style="fill:url(#checker)"/>
        <rect width="2" height="2" style="fill-opacity:0.6;fill:yellow"/>
    </pattern>
    <pattern patternUnits="userSpaceOnUse"
        id="ch_green" width="2" height="2">
        <rect width="2" height="2" style="fill:url(#checker)"/>
        <rect width="2" height="2" style="fill-opacity:0.6;fill:green"/>
    </pattern>
    <pattern patternUnits="userSpaceOnUse"
        id="ch_blue" width="2" height="2">
        <rect width="2" height="2" style="fill:url(#checker)"/>
        <rect width="2" height="2" style="fill-opacity:0.6;fill:blue"/>
    </pattern>
    <pattern patternUnits="userSpaceOnUse"
        id="ch_magenta" width="2" height="2">
        <rect width="2" height="2" style="fill:url(#checker)"/>
        <rect width="2" height="2" style="fill-opacity:0.6;fill:magenta"/>
    </pattern>
</defs>
<polygon points="0,0 8,0 8,5  5,3" style="fill:url(#ch_magenta)">
    <animate id="t85a1" attributeName="points"
        to="0,0 8,0 8,5  3,2" 
        begin="2s;t85a2.end+2s" dur="5s" fill="freeze"/>
    <animate id="t85a2" attributeName="points"
        to="0,0 8,0 8,5  5,3" 
        begin="t85a1.end+2s" dur="5s" fill="freeze"/>
</polygon>
<rect x="0" y="3" width="5" height="5" style="fill:url(#ch_yellow)">
    <animateMotion 
        path="m0,0 l8,-3"
        begin="2s;t85a2.end+2s" dur="5s" fill="freeze"/>
    <animateMotion 
        path="m8,-3 l-8,3"
        begin="t85a1.end+2s" dur="5s" fill="freeze"/>
</rect>
<polygon points="0,0 0,3 5,3" style="fill:url(#ch_blue)">
    <animateMotion 
        path="m0,0 l3,2"
        begin="2s;t85a2.end+2s" dur="5s" fill="freeze"/>
    <animateMotion 
        path="m3,2 l-3,-2"
        begin="t85a1.end+2s" dur="5s" fill="freeze"/>
</polygon>
<g>
    <polygon points="5,3 5,5 8,5"  style="fill:url(#ch_red)"/>
    <rect x="5" y="5" width="3" height="3" style="fill:url(#ch_green)"/>
    <animateMotion 
        path="m0,0 l-5,-3"
        begin="2s;t85a2.end+2s" dur="5s" fill="freeze"/>
    <animateMotion 
        path="m-5,-3 l5,3"
        begin="t85a1.end+2s" dur="5s" fill="freeze"/>
</g>
</svg>