Créer de l’art ASCII animé pour le terminal et un README GitHub

GitHub

L’art ASCII — ces dessins composés uniquement de caractères — connaît un regain d’intérêt avec le retour des interfaces en ligne de commande et des README soignés sur GitHub. Dans ce tutoriel, nous voyons comment générer de l’art ASCII, l’animer dans un terminal, puis l’intégrer proprement dans un README.

Générer de l’art ASCII

La façon la plus rapide de transformer du texte en grandes lettres ASCII est l’outil figlet, disponible sous Linux, macOS et Windows (via WSL). On peut choisir une police et ajouter de la couleur avec lolcat.

# Texte en grandes lettres ASCII
figlet "Itamde"

# Avec une police et des couleurs
figlet -f slant "Itamde" | lolcat

Pour partir d’une image plutôt que d’un texte, ascii-image-converter transforme un logo ou une photo en caractères, en couleur si besoin.

ascii-image-converter logo.png -C

L’animer dans le terminal

Une animation, c’est une suite d’images affichées rapidement. Dans un terminal, on efface l’écran entre chaque image et on enchaîne les rendus. Voici une petite boucle qui fait défiler quelques cadres d’art ASCII.

#!/bin/bash
frames=("(o_o)" "(o_-)" "(-_o)")
while true; do
  for f in "${frames[@]}"; do
    clear
    echo "$f"
    sleep 0.3
  done
done

Pour des rendus plus riches, des outils comme chafa affichent images et GIF directement dans le terminal, et asciinema enregistre une session entière que l’on pourra rejouer ou publier.

L’intégrer dans un README GitHub

Un README ne peut pas exécuter de terminal : on y intègre donc une version « rejouable » de l’animation. La méthode la plus propre consiste à enregistrer la session avec asciinema, puis à la convertir en SVG animé avec svg-term. Le SVG reste léger, net à toutes les tailles et lisible sur GitHub.

asciinema rec demo.cast
svg-term --in demo.cast --out demo.svg --window

Il ne reste plus qu’à committer le fichier et à l’afficher dans le README en Markdown :

![Démo en art ASCII](demo.svg)

Pour un simple bandeau animé (votre nom, le titre du projet), des services comme readme-typing-svg génèrent une image SVG d’un texte qui s’écrit tout seul, sans rien installer.

Quelques bonnes pratiques

Pensez à renseigner un texte alternatif pour l’accessibilité, gardez les fichiers légers pour ne pas alourdir la page et évitez les animations qui clignotent trop vite. Un bon art ASCII attire l’œil sans gêner la lecture du reste du README.

Si les caractères spéciaux vous intéressent, notre table des codes ASCII, ISO et HTML complète bien ce sujet. Et pour aller plus loin, explorez nos cours en ligne.

Côté lecture, de bons livres sur la ligne de commande et le terminal Linux aident à maîtriser ces outils.

"

Itamde est également une école de programmation en ligne.

Itamde

Apprenez ce que vous voulez, à votre rythme

0 commentaire

Envoyer un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pourriez être intéressé par...

Restez informé des dernières actualités et mises à jour

Accédez au contenu réservé

Découvrez les coulisses de nos projets, des ressources exclusives et l'avancée de nos créations en temps réel.

Inscrivez-vous à la newsletter

Recevez nos actualités, nos réflexions créatives et les nouveautés de l'atelier directement dans votre boîte mail.

Suivez-nous

Rejoignez notre communauté sur les réseaux pour suivre nos projets au quotidien et échanger avec nous.