mb — monogram pisany jednym pociągnięciem

Osobisty znak dla Mikity Byshniou (mbyshniou.com). Monolinia „mb” napisana jednym, nieprzerwanym ruchem — pióro nie odrywa się od kartki. Ten jeden gest jest całą duszą znaku: to podpis, nie ikona.

Kategoria
Logo & identyfikacja
Rok
2026
Rola
Znak, animacja, przygotowanie do druku
Status
Wdrożono

Znak pisze się sam

Najedź na znak albo kliknij, aby napisać go od nowa

Koncepcja

Znak to małe „mb” złożone w jedną linię: dwa łuki „m” i „b”, które dzielą wspólny, wysoki trzon. Całość daje się napisać jednym pociągnięciem — pióro rusza od dołu lewej nóżki i nie odrywa się aż do ostatniego ruchu w górę.

To nie ozdoba. Właściciel znaku robi strony pod klucz — znak, który „podpisuje się” sam, jednym gestem, mówi to samo: cała robota od początku do końca, jedną ręką.

Konstrukcja

Monolinia o stałej grubości na siatce 136 jednostek, wszystkie zakończenia i połączenia zaokrąglone. Żadnych wypełnień — sam kontur.

Litery „m” nie da się napisać bez oderwania pióra, więc środkowa nóżka jest przeciągnięta dwa razy — w dół i z powrotem, dokładnie po tej samej linii, więc powrót jest niewidoczny. To jedyne cofnięcie; reszta to jeden ciągły ruch.

Decyzje projektowe

Jeden gest

Pióro nie odrywa się ani razu: „m”, w dół ostatniej nóżki i od razu w „b”. Kolejność ruchu jest sensem znaku, dlatego animacja pokazuje dokładnie tę drogę.

Czysta linia w spoczynku

W ruchu znak pisze się jednym ciągiem, ale gdy już stoi, składany jest z trzech osobnych pociągnięć — żeby w każdej przeglądarce, także w Safari, linia miała tę samą grubość, bez podwojenia na środkowej nóżce.

Jeden kolor, każde tło

Znak dziedziczy kolor tekstu (currentColor): atrament na jasnym, papier na ciemnym, złoto jako akcent. Jeden plik pasuje wszędzie, bez ręcznych poprawek.

Od 16 px do druku

Ta sama forma czyta się jako favikona 16 px i jako znak na wizytówce. Do najmniejszych rozmiarów przygotowany jest grubszy wariant linii.

Warianty

AtramentPodstawowy — na jasnym tle
PapierNa ciemnym tle
ZłotoAkcent, tłoczenie
FavikonaGrubszy — na kafelku

Gdzie żyje na stronie

  • Preloader — znak pisze się na cały ekran, zanim zasłona się podniesie.
  • Nagłówek — pisze się przy wejściu i przerysowuje po najechaniu.
  • Stopka — pisze się, gdy do niej dojdziesz.
  • Ekran „dziękuję” po formularzu — znak jako podpis pod umową.

Paleta

Atrament#1C1A17
Papier#F2EEE3
Złoto#A6874F

Jak to powstało

  1. Szkice monogramu — połączenie „m” i „b” we wspólny, wysoki trzon.

  2. Konstrukcja monoliniowa na siatce; jeden ciągły kontur z niewidocznym powrotem środkowej nóżki.

  3. Animacja rysowania na czystym CSS (stroke-dashoffset), z poszanowaniem trybu „ogranicz ruch”.

  4. Warianty kolorystyczne i osobna wersja na ciemne tło.

  5. Zestaw favikon (adaptacyjne SVG + PNG 32 / 180 / 512) oraz awatary.

  6. Wizytówka: przygotowanie do druku w CMYK, ze spadami i znacznikami cięcia.

Co weszło w skład

  • Wektor master (SVG): atrament, złoto, wersja na ciemne tło
  • Eksporty PNG 512 / 1024 / 2048 px
  • Animowany SVG — rysujący się znak, do WWW, wideo i prezentacji
  • Zestaw favikon (SVG + 32 / 180 / 512 px) i awatary social
  • Wizytówka gotowa do druku (CMYK, spady 3 mm)
  • Komponent React z animacją pisania (użyty na tej stronie)
Wróć na stronę główną