Brand monochrome SVG filter

Reusable filter

<svg aria-hidden="true" class="svg-filter-defs">
  <filter id="green-color-mix" color-interpolation-filters="sRGB">
    <feColorMatrix
      result="ink-mask"
      type="matrix"
      values="0 0 0 0 0
              0 0 0 0 0
              0 0 0 0 0
             -.33 -.33 -.33 0 1"
    />
    <feComponentTransfer in="ink-mask" result="ink-coverage">
      <feFuncA type="gamma" amplitude="1.2" exponent="1.42" offset="0" />
    </feComponentTransfer>
    <feComposite in="ink-coverage" in2="SourceAlpha" operator="in" result="clipped-coverage" />
    <feFlood style="flood-color: var(--color-primary)" result="ink" />
    <feComposite in="ink" in2="clipped-coverage" operator="in" />
  </filter>

  <filter id="green-shadow-tint" color-interpolation-filters="sRGB">
    <feColorMatrix in="SourceGraphic" result="mono" type="saturate" values="0" />
    <feComponentTransfer in="mono" result="brightened-mono">
      <feFuncR type="gamma" amplitude="1" exponent=".55" offset="0" />
      <feFuncG type="gamma" amplitude="1" exponent=".55" offset="0" />
      <feFuncB type="gamma" amplitude="1" exponent=".55" offset="0" />
    </feComponentTransfer>
    <feComponentTransfer in="brightened-mono" result="contrast-mono">
      <feFuncR type="linear" slope="1.12" intercept="-.04" />
      <feFuncG type="linear" slope="1.12" intercept="-.04" />
      <feFuncB type="linear" slope="1.12" intercept="-.04" />
    </feComponentTransfer>
    <feFlood style="flood-color: var(--color-primary)" result="ink" />
    <feComposite in="ink" in2="SourceAlpha" operator="in" result="clipped-ink" />
    <feBlend in="contrast-mono" in2="clipped-ink" mode="multiply" result="shadow-tint" />
    <feComposite in="shadow-tint" in2="SourceAlpha" operator="in" />
  </filter>
</svg>

.brand-monochrome {
  filter: url(#green-color-mix);
}

.brand-shadow-tint {
  filter: url(#green-shadow-tint);
}