En faisant défiler Instagram, je suis tombé par hasard sur le travail de John Battalgazi, un compatriote canadien dont le style puise autant dans l’univers du sport que dans les formes géométriques. Sa démarche repose sur l’assemblage méticuleux d’une multitude de formes afin de créer des compositions à la fois riches et dynamiques. Cette approche singulière m’a immédiatement interpellé et a fait naître une question toute simple:
Serait-ce possible de recréer l’une de ses œuvres uniquement à l’aide de HTML et de CSS?
Ces langages de base sont habituellement utilisés pour structurer et mettre en page des sites web, afin de mettre en valeur différents types de contenus: texte, images, vidéos, etc.
Pourtant, lorsqu’on y pense, en HTML et CSS tout se résume essentiellement à des boîtes auxquelles on attribue des propriétés: position, couleur, coins arrondis, et ainsi de suite. Rien n’empêche de détourner ces outils afin d’obtenir non pas seulement une mise en page, mais une oeuvre artistique complète en soi… Le reste n’est qu’une question de patience et d’ingéniosité.
Ainsi est né mon projet Battalgazi - Yeli!
Parmi son catalogue élaboré, une toile en particulier a retenu mon attention: Yeli, réalisée en hommage à Christian Yelich, le voltigeur vedette des Brewers de Milwaukee. J’ai donc entrepris de superposer des formes géométriques créées en HTML et CSS par-dessus celle-ci afin de mettre mon hypothèse à l’épreuve.
Aspect technique
Initialement créé sur CodePen, le projet a rapidement attiré l’attention de l’équipe de modération, qui a choisi de le mettre en vedette sur sa page d’accueil afin de souligner son originalité et sa qualité technique.
Ce projet illustre bien le principe du less is more. Il repose exclusivement sur du HTML et du CSS, deux langages fondamentaux, utilisés ici dans leur plus simple expression pour produire un résultat visuel à la fois complexe et expressif.