ÀÀ
ÈKÒ
ÒYÒ
ÌBÀ
ÙGÙ
ÀFÀ
ÈPÈ
ÒDÒ
ÀJÀ
ÙBÀ
ÌWÒ
ÈRÈ

Project — 003  /  Motion Design

Motion
Poster
Series

CSS SVG Motion Typography
12 Posters
2024 Year
★ Awwwards

01 — Overview

African Type
Culture in Motion

12 animated typographic posters exploring the rich visual language of African type culture. Each poster is designed and coded entirely in the browser — no After Effects, no video exports.

The series draws on Yoruba tonal orthography, Igbo scripts, and pan-African graphic traditions, reinterpreted through CSS keyframe animations and hand-drawn SVG paths. Featured on Awwwards as a Site of the Day.

Role

Designer & Developer — solo project

Timeline

6 weeks — Jan to Feb 2024

Stack

HTML · CSS · SVG · Vanilla JS

Recognition

Awwwards SOTD · CSS Design Awards · Featured on Hoverstat.es

02 — The Series

All 12 Posters

Hover each poster to reveal its title. Each piece explores a different letter form, tonal mark, or diacritic from West African writing systems.

01 / 12 FALLING TONE À ÀGBÀDO YORUBA · FALLING TONE MARK
Àgbàdo — Falling Tone
02 / 12 ÈKÓ · THE CITY È LAGOS ÈKÒ NÍ BÀBÁ YORUBA · CITY NAME MARK 02
Èkó — The City Mark
03 / 12 Ò ÒRUN · SKY · HEAVEN ÒRUN SKY LETTER · YORUBA
Òrun — Sky Letter
04 / 12 RISING FORM Ú ÙBÀWÓ YORUBA · RISING TONE FORM
Ùbà — Rising Form
Ì Ì 05 / 12 ROOT MARK ÌDÍ YORUBA · ROOT ÌDÍ FALLING TONE
Ìdí — Root Mark
06 / 12 OPEN VOWEL Ẹ SUB-POINT ẸWÀ YORUBA · OPEN MID-FRONT VOWEL
Ẹwà — Open Vowel
07 / 12 DOT BELOW Ọ DOT BELOW ỌDẸ HUNTER · DOT BELOW · YORUBA
Ọdẹ — Dot Below
08 / 12 THE S GLYPH Ṣ RETROFLEX ṢE YORUBA · RETROFLEX FRICATIVE ṢE
Ṣe — The S Glyph
G b 09 / 12 G · VELAR b · BILABIAL DIGRAPH + Gb LABIAL-VELAR STOP · DIGRAPH
Gb — Digraph Study
K 10 / 12 LABIOVELAR Kp → p Kp IGBO · LABIOVELAR CONSONANT
Kp — Labiovelar
11 / 12 ENG NASAL Ŋ GLYPH WIDTH DESCENDER ŊMA ENG · VELAR NASAL · IPA ŋ
Ŋ — Eng Nasal
12 / 12 INFINITY · FINAL ÀÁRỌ̀ ∞ SERIES COMPLETE ÀÁRỌ̀ DAWN · INFINITY · CYCLE
Àárọ̀ — Infinity

03 — Process

How It Was Built

01

Research

Deep study of Yoruba, Igbo, and Hausa orthographic systems. Cataloguing diacritics, tonal marks, and letterform structures.

02

Sketch

Each poster sketched on paper first. Composition, rhythm, and typographic hierarchy planned before any code was written.

03

SVG Paths

Custom SVG paths hand-drawn for each glyph. stroke-dashoffset animation used for the drawing-in effect on every poster.

04

Animate

Pure CSS keyframes. No JavaScript animation libraries. Each poster runs at 60fps with transform and opacity only.

04 — Technology

Built With

CSS Animations
95%
SVG Paths
88%
Vanilla JS
40%
Variable Fonts
70%
CSS Custom Props
82%

Next Step

See More Work

View All Projects → Live Demo ↗