SVGのfilterを使った手書き風の囲み

テキストを手書き風の線で囲ったやつを作りました。
baseFrequencyをイジってノイズの具合を変えることができます。

htnl

<div class="ribbon"><div class="txt">HANDWRITTEN LINE<span><i></i></span></div></div>
<svg>
  <filter id="svg_filter">
    <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
    <feDisplacementMap in="SourceGraphic" scale="4" />
  </filter>
</svg>

sass

svg{
  display: none;
}
.ribbon {
  $line_width: 4px;
  .txt {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 0.8em 1.4em 0.7em;
    position: relative;
    span {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: solid $line_width #000;
      border-radius: 10px;
      filter: url("#svg_filter");
      i {
        display: block;
        width: 0.6em;
        height: $line_width;
        background: #fff;
        position: absolute;
        left: 2em;
        bottom: -$line_width;
        &::before,
        &::after {
          content: "";
          display: block;
          width: $line_width;
          height: $line_width;
          background: #000;
          position: absolute;
          top: 0;
          border-radius: 100%;
        }
        &::before {
          left: -$line_width / 2;
        }
        &::after {
          right: -$line_width / 2;
        }
      }
    }
  }
}

長文でも使えますが、ちょっとしたアクセントで使うと良いかもです。
タグとか、日付とか