Scribble Text Decoration

A collection of animated scribble text decorations.

How to

The Scribble Text Decoration component is used to animate a scribble while hovering over a text element.

The style of the SVG scribble is highly affected by the decoration size (width and height) and the stroke-width of the SVG path:

.scribble-text-fx--v1 {
  .scribble-text-fx__decoration {
    width: calc(100% + 24px); // 👈
    height: calc(100% + 12px); // 👈
  
    > * {
      stroke-width: 2px; // 👈
    }
  }
}

Categories

• Effects > Text
• Typography

Bug report & feedback

Component Github page ↗