Go to homepage

Projects /

Scribble Text Decoration

A collection of animated scribble text decorations.

View Demo

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; // 👈


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.