Robert Birming

Curve divider

An add-on that adds a small wave-shaped divider between sections. A nice way to break up content without a hard line.1

Preview

Some text above the divider to give you a better idea of how it looks.

And some text below the divider to give the look some context.

How to use

Add a <span> with the curve class wherever you want a divider.

Markup

<span class="curve"></span>

Styles

/* Curve divider | robertbirming.com */
span.curve {
  display: block;
  width: 8rem;
  height: 0.5rem;
  margin-block-start: calc(var(--space-block) * 0.7);
  margin-inline: auto;
  background: var(--link);
  opacity: 0.9;
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'><path d='M0 4 Q30 0 60 4 T120 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>")
    no-repeat center / contain;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'><path d='M0 4 Q30 0 60 4 T120 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>")
    no-repeat center / contain;
}

@supports not ((mask: url("")) or (-webkit-mask: url(""))) {
  span.curve {
    height: 0.125rem;
    border-radius: 999px;
  }
}

Want more? Check out all available Bearming add-ons.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩