How to perform the same animation?

Question

css

Things like this: tuborg0001.fallwinter.dk
There is an interesting animation on the logo: waves fly off the logo, and the background vibrates a little under the logo itself.
How to do it?

Answer 1

It is possible on pure css, changing the content for the pseudo-element using keyframes

Answer 2

I didn’t see the waves, but the picture there just moves with keyframes)

Answer 3

The wave animation is done in SVG. Well, somewhere, of course, there is a Javascript part for animating SVG elements.

<g><circle cx="152.94" cy="63.72500000000002" r="186.08726988281347" fill="none" stroke="#87bf57" stroke-width="0.7841378389847803px" style="stroke-opacity: 0.801176;"></circle><circle cx="152.94" cy="63.72500000000002" r="154.92715792988938" fill="none" stroke="#87bf57" stroke-width="1.108841656164139px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="121.22866800106902" fill="none" stroke="#87bf57" stroke-width="1.1898077261725952px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="83.10243902488548" fill="none" stroke="#87bf57" stroke-width="1.005341255937085px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="44.23842102633702" fill="none" stroke="#87bf57" stroke-width="0.6048698871878049px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="8.027965461034638" fill="none" stroke="#87bf57" stroke-width="0.30270040022705097px" style="stroke-opacity: 1;"></circle></g>