Code
document.addEventListener('DOMContentLoaded',function(){var a=document.body.appendChild(document.createElement('div'));var b=a.appendChild(document.createElement('canvas'));var d={'i':10,'min':5,'max':70,'step':5};b.width=d.max*2+40;b.height=d.max*4+40;b.setAttribute('width',b.width);b.setAttribute('height',b.height);a.style.width='100%';b.style.border='2px solid';b.style.margin='10px auto';b.style.display='block';b.style.background='no-repeat center/cover url("https://s3.amazonaws.com/gs-geo-images/493e07bc-c5c0-4a5d-aa96-807a78b46c30_l.jpg")';var e=b.getContext('2d');var f=[[[1,1],[1,5],[3,5]],[[3,1],[1,1],[1,3],[2,3],[1,3],[1,5],[3,5]],[[1,5],[1,2],[2,1],[3,2],[3,3],[1,3],[3,3],[3,5]],[[1,1],[2,5],[3,1]],[[2,1],[2,5]],[[1,5],[1,2],[2,1],[3,2],[3,3],[1,3],[3,3],[3,5]],[[1,1],[3,1],[3,3],[1,3],[3,3],[3,5],[1,5]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[3,1],[3,4],[2,5],[1,4]],[[1,2],[2,1],[3,2],[3,4],[2,5],[1,4],[1,2]],[[1,1],[1,4],[2,5],[3,4],[3,1]],[[1,5],[1,1],[2,1],[3,2],[2,3],[1,3],[2,3],[3,5]],[[3,2],[2,1],[1,2],[3,4],[2,5],[1,4]],[[1,5],[1,1],[3,5],[3,1]],[[1,1],[1,3],[3,3],[3,1],[3,5]],[[1,2],[1,1],[3,1],[3,5]],[[1,1],[1,2],[2,2],[2,1],[1,1]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[1,4],[2,4],[2,5],[1,5],[1,4]],[[3,1],[1,1],[1,3],[3,3],[3,5],[1,5]],[[1,5],[3,5],[3,1],[1,1],[1,3],[3,3]],[[1,5],[3,5],[3,1],[1,1],[1,3],[3,3]],[[2,1],[1,2]],[[1,1],[2,1],[3,2],[3,4],[2,5],[1,5],[1,1]],[[3,1],[1,1],[1,3],[2,3],[1,3],[1,5],[3,5]],[[3,2],[2,1],[1,1],[1,5],[2,5],[3,4],[2,3]],[[3,1],[1,1],[1,3],[2,3],[1,3],[1,5],[3,5]],[[1,2],[2,1],[3,2],[3,4],[2,5],[1,4],[1,2]],[[3,2],[2,1],[1,2],[1,4],[2,5],[3,4]],[[1,5],[1,2],[2,1],[3,2],[3,3],[1,3],[3,3],[3,5]],[[3,2],[2,1],[1,2],[1,4],[2,5],[3,4]],[[1,1],[1,5],[1,3],[3,3],[3,1],[3,5]],[[2,1],[2,5]],[[1,5],[1,1],[3,5],[3,1]],[[3,2],[2,1],[1,1],[1,5],[2,5],[3,4],[2,3]],[[3,1],[1,1],[1,3],[2,3],[1,3],[1,5],[3,5]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[1,1],[3,1],[3,5],[1,5],[1,1]],[[3,1],[1,1],[1,5],[3,5],[3,3],[1,3]],[[1,1],[1,2],[2,2],[2,1],[1,1]],[[3,1],[1,1],[1,3],[3,3],[3,5],[1,5]],[[1,2],[1,1],[3,1],[3,5]],[[1,4],[2,4],[2,5],[1,5],[1,4]],[[3,1],[1,1],[1,3],[3,3],[3,5],[1,5]],[[1,5],[3,5],[3,1],[1,1],[1,3],[3,3]],[[1,1],[3,1],[3,3],[1,3],[1,5],[3,5]],[[2,1],[1,2]],[[1,3],[2,3],[3,2],[2,1],[1,1],[1,5],[2,5],[3,4],[2,3]],[[1,5],[1,1],[2,1],[3,2],[2,3],[1,3],[2,3],[3,5]],[[1,5],[1,2],[2,1],[3,2],[3,3],[1,3],[3,3],[3,5]],[[1,1],[2,5],[3,1]],[[1,2],[2,1],[3,2],[3,4],[2,5],[1,4],[1,2]]];var g=360;e.lineWidth=3;e.lineJoin='round';e.strokeStyle='#F00';var h=f.length-1;var i=[];var j=0;setInterval(function(){e.beginPath();i[0]=(b.width-(d.i*2))/2;i[1]=(b.height-(d.i*4))/2;e.moveTo((d.i*(f[j][0][0]-1))+i[0],(d.i*(f[j][0][1]-1))+i[1]);for(var x=1,c=f[j].length;x<c;x++){e.lineTo((d.i*(f[j][x][0]-1))+i[0],(d.i*(f[j][x][1]-1))+i[1])}e.stroke();e.closePath();if(j==h){j=0}else{j++}if(d.i>=d.max||d.i<=d.min){d.step=d.step*-1}d.i=d.i+d.step;setTimeout(function(){e.clearRect(0,0,b.width,b.height)},g/2)},g)})
Merci beaucoup à UncleBen's et rca85 pour l'aide à l'élaboration de cette cache.