Heat shimmer

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/heat-shimmer.html
  Desc   : Heat-haze shimmer rising over a flame
  ============================================================
-->
<div class="sg-heat-shimmer" style="--sg-color:#E8853C; --sg-size:110px;">
  <svg viewBox="0 0 120 140" aria-hidden="true" focusable="false">
    <defs>
      <path id="sg-heat-shimmer-flame"
        d="M60 16 C 72 38, 92 52, 92 84 A32 32 0 0 1 28 84 C 28 52, 48 38, 60 16 Z" />
      <filter id="sg-heat-shimmer-f" x="-30%" y="-40%" width="160%" height="180%">
        <feTurbulence type="fractalNoise" baseFrequency="0.03 0.12" numOctaves="2"
          seed="3" stitchTiles="stitch" result="n" />
        <feOffset in="n" dx="0" dy="0" result="sn">
          <animate attributeName="dy" from="0" to="-50" dur="2.4s" repeatCount="indefinite" />
        </feOffset>
        <feDisplacementMap in="SourceGraphic" in2="sn" scale="9"
          xChannelSelector="R" yChannelSelector="G" />
      </filter>
      <linearGradient id="sg-heat-shimmer-grad" x1="0" y1="1" x2="0" y2="0">
        <stop offset="0.25" stop-color="white" />
        <stop offset="0.85" stop-color="black" />
      </linearGradient>
      <mask id="sg-heat-shimmer-solid">
        <rect x="0" y="0" width="120" height="140" fill="url(#sg-heat-shimmer-grad)" />
      </mask>
    </defs>
    <use class="sg-heat-shimmer-hazy" href="#sg-heat-shimmer-flame" filter="url(#sg-heat-shimmer-f)" />
    <use class="sg-heat-shimmer-base" href="#sg-heat-shimmer-flame" mask="url(#sg-heat-shimmer-solid)" />
    <path class="sg-heat-shimmer-core" d="M60 62 C 66 76, 76 82, 76 96 A16 16 0 0 1 44 96 C 44 82, 54 76, 60 62 Z" />
  </svg>
</div>
<style>
  .sg-heat-shimmer {
    width: var(--sg-size);
  }
  .sg-heat-shimmer svg {
    display: block;
    width: 100%;
  }
  .sg-heat-shimmer-hazy,
  .sg-heat-shimmer-base {
    fill: var(--sg-color);
  }
  .sg-heat-shimmer-core {
    fill: rgba(255, 255, 255, 0.5);
  }
</style>