Micrography Fill

Fill & Texture · Animated · pure CSS

The headline is literally built from tiny handwriting: a repeating data-URI SVG tile packs several staggered rows of your own text at miniature scale, clipped to the glyphs, with a thin stroked edge holding the letterforms legible. An optional slow drift makes the ink appear to flow inside the letters.

Open in the generator →All effects
Micrography Fill

How it works

Micrography Fill is an animated fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Micrography Fill exposes 6 dedicated controls — Micro Size, Density, Ink Hue, Edge Stroke, Drift and Drift Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Micrography Fill — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Space Mono', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22205.2%22%20height%3D%2250.2%22%20viewBox%3D%220%200%20205.2%2050.2%22%3E%3Cg%20fill%3D%22hsl(300%2044%25%2076%25)%22%3E%3Ctext%20x%3D%22-4.66%22%20y%3D%227.02%22%20font-family%3D%22Georgia%2C'Times%20New%20Roman'%2Cserif%22%20font-size%3D%227.6%22%3EYour%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20%3C%2Ftext%3E%3Ctext%20x%3D%22-16.06%22%20y%3D%2217.05%22%20font-family%3D%22Georgia%2C'Times%20New%20Roman'%2Cserif%22%20font-size%3D%227.6%22%3EYour%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20%3C%2Ftext%3E%3Ctext%20x%3D%22-10.36%22%20y%3D%2227.08%22%20font-family%3D%22Georgia%2C'Times%20New%20Roman'%2Cserif%22%20font-size%3D%227.6%22%3EYour%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20%3C%2Ftext%3E%3Ctext%20x%3D%22-20.24%22%20y%3D%2237.11%22%20font-family%3D%22Georgia%2C'Times%20New%20Roman'%2Cserif%22%20font-size%3D%227.6%22%3EYour%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20%3C%2Ftext%3E%3Ctext%20x%3D%22-7.32%22%20y%3D%2247.14%22%20font-family%3D%22Georgia%2C'Times%20New%20Roman'%2Cserif%22%20font-size%3D%227.6%22%3EYour%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20Your%20text%20%C2%B7%20%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 205.2px 50.2px;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.3px hsl(300 44% 76%);
  animation: text-effect-drift 19s linear infinite;
}

@keyframes text-effect-drift {
  from { background-position: 0 0; }
  to { background-position: 205.2px 100.4px; }
}

Pure CSS — just add the .text-effect class to any element.

Category
Fill & Texture
Type
Animated
Browser support
background-clip:text with a repeating data-URI SVG micro-text tile
Capabilities
pure

Related Fill & Texture effects