Logo & branding · Visual identity
mb — a monogram written in one stroke
A personal mark for Mikita Byshniou (mbyshniou.com). The “mb” monoline is written in a single, unbroken motion — the pen never leaves the paper. That one gesture is the whole soul of the mark: it's a signature, not an icon.
- Category
- Logo & identity
- Year
- 2026
- Role
- Mark, animation, print preparation
- Status
- Shipped
The mark draws itself
Concept
The mark is a small “mb” folded into one line: the two arches of the “m” and the “b” share a single tall stem. The whole thing can be written in one stroke — the pen starts at the foot of the left leg and never lifts until the final upstroke.
It isn't decoration. The owner builds websites end to end — a mark that “signs itself” in a single gesture says exactly that: the whole job start to finish, by one hand.
Construction
A monoline of constant weight on a 136-unit grid, every cap and join rounded. No fills — just the contour.
An “m” cannot be written without lifting the pen, so the middle leg is retraced twice — down and back up along the exact same line, which makes the return invisible. That's the only backtrack; the rest is one continuous motion.
Design decisions
One gesture
The pen never lifts: the “m”, down the last leg and straight into the “b”. The order of the stroke is the point of the mark, so the animation traces exactly that path.
A clean line at rest
While writing, the mark is drawn as one continuous stroke, but once it settles it's built from three separate strokes — so in every browser, Safari included, the line keeps the same weight, with no doubling on the middle leg.
One colour, any background
The mark inherits the text colour (currentColor): ink on light, paper on dark, gold as an accent. A single file fits everywhere, with no manual edits.
From 16 px to print
The same form reads as a 16 px favicon and as a mark on a business card. A heavier line weight is prepared for the smallest sizes.
Variants
Where it lives on the site
- Preloader — the mark writes itself full-screen before the veil lifts.
- Header — it writes on entry and re-draws on hover.
- Footer — it writes once you scroll down to it.
- The “thank you” screen after the form — the mark as a signature on the deal.
Palette
How it was made
Monogram sketches — joining the “m” and “b” onto one shared, tall stem.
Monoline construction on a grid; one continuous contour with an invisible retrace of the middle leg.
The drawing animation in plain CSS (stroke-dashoffset), respecting the “reduce motion” setting.
Colour variants and a dedicated version for dark backgrounds.
A favicon set (adaptive SVG + 32 / 180 / 512 px PNG) and social avatars.
Business card: CMYK print preparation with bleed and crop marks.
What was delivered
- Master vector (SVG): ink, gold, dark-background version
- PNG exports at 512 / 1024 / 2048 px
- Animated SVG — the self-drawing mark, for web, video and decks
- Favicon set (SVG + 32 / 180 / 512 px) and social avatars
- Print-ready business card (CMYK, 3 mm bleed)
- React component with the writing animation (used on this page)