🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Scribble Text Decoration

A collection of animated scribble text decorations.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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

Project duplicated

Project created

Globals imported

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