papertoothv0.5.2 Stamps
  1. papertooth
  2. Marks
  3. Stamps

Stamps

Rubber stamps with real ink: heavier at the rim, uneven in the middle, with small gaps where the paper did not take it.

Approved

The code for what is on screen

<span class="pt-stamp pt-stamp--box">Approved</span>

// texture, for every stamp on the page
kit.setFilters({ stamp: { wear: 0.55, edge: 0.5, mottle: 0.5 } });

Download the pictures

Each picture stamp is also a file of its own: one ink (it takes the colour around it, or black as an image) with real holes, so it sits on any paper. In a project they are papertooth/stamps/frog.svg and so on, and the stylesheet with all of them is optional (papertooth/css/pictures).

Approval boxes

The 承認 / 確認 / 作成 boxes found on Japanese office documents.

承認
確認確認
作成トマス

Parameters

SettingDefaultValues
.pt-stamp--box, .pt-stamp--roundText stamps. Any inline SVG drawn in currentColor works too
data-picA picture stamp, no script needed: tick, star, heart, arrow, cat, frog, bear, tiger, rabbit, tanuki, owl, paw, onigiri, sakura, cloud, sun, daruma, fuji. Give it role="img" and an aria-label; size with --pt-pic-size (60px)
data-inkredred, vermilion, blue, green, pink, brown
--pt-rot0degRotation
--pt-stamp-opacity.86How much ink
kit.setFilters({ stamp }){ wear: .55, edge: .5, mottle: .5, rough: 1.3 }Texture