Skip to content

Instantly share code, notes, and snippets.

@Aleksi44

Aleksi44/svg-animation-waves.svg

Last active February 28, 2024 18:52
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Aleksi44/da96f10eb2aad96475c5cba44f760bdf to your computer and use it in GitHub Desktop.
Save Aleksi44/da96f10eb2aad96475c5cba44f760bdf to your computer and use it in GitHub Desktop.
Download ZIP
SVG animation waves
Display the source blob
Display the rendered blob
Raw
svg-animation-waves.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Calque_1" x="0px"
y="0px" viewBox="0 0 1300 550" style="enable-background:new 0 0 1300 550;" xml:space="preserve">
<style type="text/css">
.st1{opacity:0.6;fill:#0C3157;enable-background:new;}
</style>
<path class="st1" d="M 0 250 C 600 450 650 100 1300 250 L 1300 550 L 0 550 L 0 250">
<animate
attributeName="d"
dur="5s"
begin="1s"
values="M 0 250 C 600 450 650 100 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 600 100 650 450 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 600 450 650 100 1300 250 L 1300 550 L 0 550 L 0 250"
repeatCount="indefinite"
/>
</path>
<path class="st1" d="M 0 250 C 600 100 650 450 1300 250 L 1300 550 L 0 550 L 0 250">
<animate
attributeName="d"
dur="5s"
values="M 0 250 C 600 100 650 450 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 600 450 650 100 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 600 100 650 450 1300 250 L 1300 550 L 0 550 L 0 250"
repeatCount="indefinite"
/>
</path>
<path class="st1" d="M 0 250 C 950 350 950 150 1300 250 L 1300 550 L 0 550 L 0 250">
<animate
attributeName="d"
dur="5s"
begin="2s"
values="M 0 250 C 950 350 950 150 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 350 150 350 350 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 950 350 950 150 1300 250 L 1300 550 L 0 550 L 0 250"
repeatCount="indefinite"
/>
</path>
<path class="st1" d="M 0 250 C 350 150 350 350 1300 250 L 1300 550 L 0 550 L 0 250">
<animate
attributeName="d"
dur="5s"
values="M 0 250 C 350 150 350 350 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 950 350 950 150 1300 250 L 1300 550 L 0 550 L 0 250;
M 0 250 C 350 150 350 350 1300 250 L 1300 550 L 0 550 L 0 250"
repeatCount="indefinite"
/>
</path>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment