Scribble Background Decoration

A collection of scribble background decorations.

How to

The Scribble Background Decoration component is a collection of customizable scribble background effects.

In the demo, we use the background utility classes to set the section color, and the color utility classes on the .scribble-bg__svg element to set the illustration color.

The stroke width is controlled by the stroke-width inline SVG attribute.

To horizontally/vertically flip an illustration, apply one of the flip utility classes to the .scribble-bg element:

<section class="padding-y-xxxl position-relative z-index-1">
  <div class="container position-relative z-index-2">
    <h1 class="text-xxxl text-center">Scribble Background</h1>
  </div>

  <figure class="scribble-bg flip-x z-index-1" aria-hidden="true"> <!-- 👈 -->
    <svg class="scribble-bg__svg" viewBox="0 0 1920 640">
      <path d="..." />
    </svg>
  </figure>
</section>

Self-Drawing Scroll Animation #

Optionally, you can combine the SVG scribble decoration with the Scrolling Animations plugin: check this example.

<figure 
  class="scribble-bg z-index-1 scroll-fx js-scroll-fx"
  data-scroll-fx="strokeDashoffset, 6482, 0, 15%, 85%" 
  aria-hidden="true">

  <svg 
    class="scribble-bg__svg top-50% left-50% -translate-50% color-accent opacity-50%" 
    viewBox="0 0 1920 500">

    <path d="..." 
    fill="none" 
    stroke="currentColor" 
    stroke-miterlimit="10" 
    stroke-width="1.5" 
    stroke-dasharray="6482"/>
  </svg>
</figure>

Categories

• Decorative Background

Bug report & feedback

Component Github page ↗