Wavy animation on svg

Hello, need help. Any ideas how do I create such animation All I have is this svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="772" height="1024" viewBox="0 0 772 1024">
    <g id="icon-hot" />
    <path class="icon-hot" d="M204.369 1022.663c12.075 5.304 24.797-6.21 17.25-15.741-30.701-37.177-49.322-85.317-49.322-137.806 0-41.823 11.822-80.885 32.307-114.027l-0.537 0.933c100.826-186.946 162.193-283.805 162.193-283.805 27.562 82.39 68.859 153.478 121.736 214.221l-0.641-0.753c85.172 96.686 131.746 218.298 56.623 319.642-7.072 9.487 5.391 20.743 17.25 15.654 116.427-42.69 199.803-148.534 209.052-274.962l0.061-1.037c0.432-7.408 0.678-16.073 0.678-24.796 0-63.445-13.015-123.85-36.52-178.691l1.127 2.957c-24.119-72.5-66.776-133.416-122.405-179.121l-0.673-0.537c-8.884-6.469-22.77-0.733-22.037 9.056 8.625 116.437-44.074 145.805-74.089 79.307-12.234-33.758-19.308-72.72-19.308-113.334 0-5.308 0.121-10.587 0.36-15.836l-0.027 0.744c0.001-0.259 0.001-0.566 0.001-0.874 0-102.874-39.706-196.474-104.629-266.311l0.222 0.242c-19.145-20.906-40.584-39.208-64.059-54.67l-1.275-0.789c-9.099-5.865-22.252 0-21.562 9.531 5.52 63.135 0.517 244.087-190.914 460.272-173.578 200.531-106.303 354.53-82.455 396.274 39.227 68.625 98.268 122.078 169.278 153.348l2.316 0.91z" />
  </svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="772" height="1024" viewBox="0 0 772 1024">
    <g id="icon-hot" />
    <path class="icon-hot" d="M204.369 1022.663c12.075 5.304 24.797-6.21 17.25-15.741-30.701-37.177-49.322-85.317-49.322-137.806 0-41.823 11.822-80.885 32.307-114.027l-0.537 0.933c100.826-186.946 162.193-283.805 162.193-283.805 27.562 82.39 68.859 153.478 121.736 214.221l-0.641-0.753c85.172 96.686 131.746 218.298 56.623 319.642-7.072 9.487 5.391 20.743 17.25 15.654 116.427-42.69 199.803-148.534 209.052-274.962l0.061-1.037c0.432-7.408 0.678-16.073 0.678-24.796 0-63.445-13.015-123.85-36.52-178.691l1.127 2.957c-24.119-72.5-66.776-133.416-122.405-179.121l-0.673-0.537c-8.884-6.469-22.77-0.733-22.037 9.056 8.625 116.437-44.074 145.805-74.089 79.307-12.234-33.758-19.308-72.72-19.308-113.334 0-5.308 0.121-10.587 0.36-15.836l-0.027 0.744c0.001-0.259 0.001-0.566 0.001-0.874 0-102.874-39.706-196.474-104.629-266.311l0.222 0.242c-19.145-20.906-40.584-39.208-64.059-54.67l-1.275-0.789c-9.099-5.865-22.252 0-21.562 9.531 5.52 63.135 0.517 244.087-190.914 460.272-173.578 200.531-106.303 354.53-82.455 396.274 39.227 68.625 98.268 122.078 169.278 153.348l2.316 0.91z" />
  </svg>

2 Replies

MarkBoots•2mo ago

Im not great at svg, but you might look in to svg turbulence filters maybe this video of Franks Laboratory helps https://www.youtube.com/watch?v=lisZT8JIeKk

Franks laboratory

YouTube

CSS Filters - SVG Turbulence Filter Animation [ CSS3 Creative Menu ...

Let's take a look at CSS filters, specifically SVG turbulence animation (and displacement map) which apply 'perlin noise' effect to any HTML element. It can also be applied to HTML canvas so you can try to combine it with any of the canvas effects we created in previous videos. Let's create really cool CSS3 creative menu hover effects also known...

Catnip Cat On Pizza With Catnip•2mo ago

Nice, I never heard of such thing, it helped me a lot, thank you!

Gaming

Programming

Wavy animation on svg