J'ai programmé le déplacement des sommets du carré sur les bords du canvas (rouge).
De ce fait le carré change d'orientation et de dimensions.
Le carré est le plus grand quand les sommets sont dans les coins du canvas
et le plus petit quand les sommets sont au milieu des côtés du canvas.
Dans le canvas de gauche, on garde les traces de l'évolution du carré.
Le gif animé qui m'a servi de modèle fait 400 Ko.
Grâce au javascript, j'obtiens un meilleur résultat avec 4 Ko.
Concepteurs de sites web, testez vos pages avec PageSpeed Insights