Fini de rire, on passe dans les pures visions du cauchemar et on essaye d'ajouter une tête d'humain (je précise) au dessous de désormais classiques t-shirt, slip et pantalon.

Bon c'est pas comme si les dits articles avaient un franc succès mais c'est pas grave on est là pour s'amuser et en apprendre davantage sur l'art, la vérité, et l'univers. Commencez déjà à réfléchir.

Modèle de base

On commence tout de suite avec le modèle papier, comme d'habitude hein.

OK parfait, on voit bien la perspective DE FACE, un truc que, je le rappelle, les égyptiens avaient du mal à faire. Alors qu'ils ont des mages et tout (c'est dans l'ancien testament donc c'est surement vrai).

Contrairement aux autres DESIGNs qui étaient constitués d'un seul chemin, il va nous en falloir plusieurs complètement séparés ici, alors allons-y étape par étape.

Ceci va nous permettre d'introduire un élément SVG dont je n'avais pas encore parlé: g. Oui c'est tout, juste g.

C'est un élément créé pour contenir d'autres éléments et regrouper leur style entre autres choses (autres choses étant "LES GROUPER ENSEMBLES" quoi, c'est plutôt pas mal) — Ne vous étonnez donc pas si vous voyez quelques "g" autour des différentes parties anatomiques représentées.

La tête

Les vrais dessinateurs ils s'entrainent avec des genres de guides de proportions comme sur cette image que je mets pas parce qu'elle est pas à moi. Les oreilles sur ce sketch sont d'ailleurs notablement un petit peu mieux que les celles qui finiront sur mon dessin. Je suis pas encore un professionnel (puis j'en avais marre aussi).

Pour les proportions j'ai donc décidé que... 1 tiers au dessus et 2 tiers en dessous ce serait bien. C'est plus facile que racine de 2 sur 2 et euh... 1 moins ça. Ouais. En plus 1/3 et 2/3 c'est proche de la proportion du nombre d'or. On s'en fout. Non vraiment on s'en fout.

Pour bien faire il faudrait mesurer les proportions sur une photo de la tête de Grichka Bogdanoff mais on a pas jusque demain OK?

Cette fois-ci je vais pas partir sur une taille de canevas carrée comme je fais toujours par défaut parce que je sais, par expérience acquise, que ce sera pas un carré cette tête. Zavez-vu comment j'ai évolué sur le chemin de la vie?

Pour le viewBox, autant utiliser un nombre qui est divisible de manière entière par 3 en base 10 (cette phrase était inutilement compliquée), par ex. 60 et 90, facile pour faire des tiers:

<svg viewBox="0 0 60 90" height="450" width="300"></svg>

Puis ben en pratique, on va utiliser un pâté de courbes quadratiques (je n'utilise jamais les bezier au cas probable où vous avez oublié ou pas lu mes autres articles) pour créer tout le contour.

Je vais plus trop montrer le code, faits un clic droit puis inspecter si vous êtes intéressés.

Les yeux

Tout le monde sait que les yeux c'est des ellipses, et puis dedans y a le blanc de l'oeil qui contient la pupille, et les deux sont ronds.

Ellipse + rond + rond + un genre de sourcil/paupière parce qu'on aime bien les détails sur dkvz.eu.

On commence par placer l'oeil gauche puis suffit de copier coller et modifier les valeurs de X (Y change pas, c'est fort ça).

Une ellipse en SVG c'est juste un genre de cercle qui du coup à un centre unique, mais deux rayons: un sur l'axe X et un sur l'axe Y. S'ils sont identiques ça fait un cercle. J'explique au cas où, hein.

OK ça a l'air un peu bizarre, j'imagine que c'est bon signe pour pouvoir à terme le graver sur une plaque de marbre et l'accrocher dans une chambre d'enfants.

Le nez

On peut dessiner une patate ouverte avec deux courbes quadratiques symétriques.

Je le montre plus loin avec la bouche ci-dessous. Je fais qu'est-ce que je veux c'est mon blog.

La bouche

J'ai décidé de lui donner un sourire extrêmement rassurant, avec des dents et tout.

Je peux m'en sortir avec un chemin qui a une courbe quadra en dessous et une ligne droite au dessus pour le contour, mais pour les dents... Il y a plusieurs possibilités.

Le plus simple selon-moi est d'introduire les pattern qui est un tag SVG à part entière dont j'ai pris connaissance sur Stackoverflow, comme 80% du reste de ma vie quoi.

L'idée est de définir un morceau de SVG répétable, n'importe où dans le SVG:

<pattern id="teeth" patternUnits="userSpaceOnUse" width="3" height="1">
    <path d="M1 0 L1 1" style="stroke: #000; fill: transparent" />
</pattern>

Où il est important de donner un "id" pour pouvoir l'utiliser par après. C'est juste un élément de 3 de long et 1 de haut qui contient une ligne verticale au milieu.

Pour l'utiliser, on dessine la bouche puis on stipule le pattern en tant que fill (peut-être fait dans les CSS aussi) pour le groupe ou l'élément à remplir... Avec des dents:

<g id="mouth" stroke="#000">
    <path d="M15 58 Q30 75 45 58 Z"
          fill="url(#teeth)" />
</g>

Où le chiffre 58 est quelque part juste sous les 2/3 de la hauteur. Je le sentais bien comme ça.

Maintenant on peut vraiment déjà l'encadrer:

Oui tant que j'y suis j'ai aussi ajouté un menton, je me suis un peu emballé, désolé.

Les oreilles

Bon alors non seulement j'ai oublié les oreilles, qui sont quand même un élement essentiel de l'anatomie faciale (ben ouais) mais en plus, comme d'habitude, j'ai basé toutes mes coordonnées pour que le contour du visage commence aux origines des axes mais c'est une mauvaise idée quand on crée un SVG individuel.

J'ai déjà tripoté le viewBox comme pour les derniers "dessins" en ajoutant de l'espace pour y insérer la géométrie complexe qu'est le pavillon d'oreille, destiné à concentrer spécifiquement certaines fréquences d'ondes de pression dans l'air, en euh... Une ellipse. Wallah.

J'ai ajouté un petit bonus CHANGEUR-DE-BOUCHE. Parfait pour mettre en bas à droite de votre site un peu comme si c'était Clippy dans les vieux Microsoft Office. Les plus jeunes vont pas comprendre mais spa grave.

Cheveux

Non.