To make more accessible the SVG code
 Edge color     Relative coordinates of 'lineTo'
                  Small edge    Large edge
 stroke="#200"     -58,-24       -58,140
 stroke="#739"      41, 17       -41, 99
Δy = 99 – 17 = 2 × 41 = Δx   and   2 × 41 √2  ≈  116.

Français :
Deux dessins de pavages semblables sont superposés.  Un article en anglais appelle "pavage de Pythagore" un tel pavage périodique par des carrés de deux tailles différentes, où n’importe quel carreau, de n’importe quel côté, jouxte exactement un carré d’une autre taille.  De petits carreaux sombres aux côtés violets (    couleur de remplissage  en SVG :  fill="#013",  couleur des traits :  stroke="#739"    ) appartiennent à un pavage de Pythagore, qui est agrandi à l’échelle √2 :  racine carrée de deux.  Ses couleurs sont modifiées, ainsi que son orientation, de façon que n’importe quel nouveau carreau, aux côtés bruns (    couleur spécifiée :  stroke="#200"),  ait le même centre qu’un petit carré sombre.  Et l’on voit l’ensemble des carreaux avec la même pente, égale au rapport des dimensions d’un petit carreau à un grand carreau dans un même pavage :  √2 – 1 =  tan 22.5 ^o.

Étant donnés une figure et l’ensemble de toutes les translations qui la laissent inchangée, toute composition de deux translations de cet ensemble appartient aussi à l’ensemble, et la fonction inverse de tout élément de l’ensemble est encore un élément de l’ensemble — toute translation est bijective —.  Par conséquent, en associant la composition des fonctions à cet ensemble de transformations, nous créons un groupe en relation avec cette figure.  Un pavage de Pythagore demeure inchangé par toute translation d’un tel groupe, qui est engendré par deux translations sur des distances égales dans des directions perpendiculaires (voir une image où des flèches représentent de telles paires de translations, associées à l’un ou l’autre pavage de Pythagore).  N’importe quel point et ses images par ces deux translations, associées à un pavage de Pythagore, sont trois sommets d’un motif répétitif minimal du pavage, comme le montre une autre image où quatre pavages sont superposés.  Ces motifs minimaux sont des carrés de même taille et même orientation.  Le présent pavage en traits bruns a des motifs minimaux de dimension 164, dans le repère orthonormé défini en SVG par  viewBox="0 0 600 600".

En supprimant la spécification SVG  suivante :   patternTransform="matrix(-.707 .707 .707 .707 45 9)",  on rendrait horizontaux et verticaux les quatre côtés d’un motif minimal du pavage aux trais bruns.  Par cette valeur de l’attribut patternTransform, le motif subit une rotation de 45 degrés autour de l’origine du repère, suivie d’une symétrie axiale par rapport à l’axe des ordonnées, et d’une translation dont le vecteur a pour coordonnées (45 ; 9) :  les nombres entiers en fin de valeur de patternTransform.  En fait, cette valeur a le même effet que la suivante :  "translate(45,9) scale(-1,1) rotate(45)".  Alors le pavage en traits bruns a des motif minimaux inclinés à 45 degrés, tandis que les autres motifs minimaux sont horizontaux, pour le pavage aux traits violets.  Leur dimension est  164 / √2  ≈  116.

Afin de rendre plus accessible le code SVG
  Couleur       Coordonnées relatives de 'lineTo'
  d’un côté       Petit côté    Grand côté
 stroke="#200"     -58,-24       -58,140
 stroke="#739"      41, 17       -41, 99
Δy = 99 – 17 = 2 × 41 = Δx    et   2 × 41 √2  ≈  116.

Voir d’autres images et leurs descriptions pour plus d’informations.
• "Academ Translations depicted on a wallpaper"
• "A pattern Two explanatory grids"
• "A wallpaper pattern Overlaid patterns"