Back to Snippets

Animated Background Snippet.

This code creates a fullscreen animated wave background using SVG with smooth, looping motion. It uses layered paths with gradients and animations to simulate moving waves.
How to Use?
Include the SVG and CSS styles in your HTML. It works without any extra libraries or scripts.
Credits
Inspired by wave animations commonly found on CodePen and SVG animation tutorials.

<svg
  version="1.1"
  xmlns="http:
  xmlns:xlink="http:
  x="0px"
  y="0px"
  width="100%"
  height="100%"
  viewBox="0 0 1600 900"
  preserveAspectRatio="xMidYMax slice"
  style="position: fixed; top: 0; left: 0; z-index: 1"
>
  <defs>
    <linearGradient id="bg">
      <stop
        offset="0%"
        style="stop-color: rgba(255, 255, 255, 0.06)"
      ></stop>
      <stop
        offset="50%"
        style="stop-color: rgba(255, 255, 255, 0.6)"
      ></stop>
      <stop offset="100%" style="stop-color: rgb(255, 255, 255)"></stop>
    </linearGradient>
    <path
      id="wave"
      fill="url(#bg)"
      d="M-363.852,502.589c0,0,236.988-41.997,505.475,0 s371.981,38.998,575.971,
      0s293.985-39.278,505.474,5.859s493.475,48.368,
      716.963-4.995v560.106H-363.852V502.589z"
    ></path>
  </defs>
  <g>
    <use xlink:href="#wave" opacity=".3">
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="translate"
        dur="10s"
        calcMode="spline"
        values="270 230; -334 180; 270 230"
        keyTimes="0; .5; 1"
        keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
        repeatCount="indefinite"
      ></animateTransform>
    </use>
    <use xlink:href="#wave" opacity=".6">
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="translate"
        dur="8s"
        calcMode="spline"
        values="-270 230;243 220;-270 230"
        keyTimes="0; .6; 1"
        keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
        repeatCount="indefinite"
      ></animateTransform>
    </use>
    <use xlink:href="#wave" opacity=".9">
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="translate"
        dur="6s"
        calcMode="spline"
        values="0 230;-140 200;0 230"
        keyTimes="0; .4; 1"
        keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
        repeatCount="indefinite"
      ></animateTransform>
    </use>
  </g>
</svg>

body {
font-family: Arial, sans-serif;
background-color: #000000;
color: white;
text-align: center;
position: relative;
min-height: 100vh;
}

$nomention

$onlyIf[$getVar[voter;$authorID]==true;You need to be a voter to use this command. Use `!vote` and then `!claim`.]

$var[current-timestamp;$sub[$getTimestamp;43200]]

$if[$getVar[voter-timestamp;$authorID]>=$var[current-timestamp]]

$c[The Premium Command Goes Here]
$httpGet[https://nekos.best/api/v2/kiss]
$description[<@$authorID>, kissed <@985626439179194428> (Cat That Ears The O/ Catearo)]
$image[$httpResult[results;0;url]]
$color[#36393e] 
$footer[Why are you kissing a random person man wtf?]
$footerIcon[$userAvatar[$botID]]

$else
$description[You need to be a voter to use this command. Use `!vote` and then `!claim`.]
$color[#36393e] 
$setVar[voter;false;$authorID]
$setVar[voter-timestamp;;$authorID]
$endif

$nomention
$onlyIf[$guildID!=;]
$allowUserMentions[]
$reply

$if[$message==]
Usage: !buy {item} {amount}

$else

$var[price1;$multi[1000;$message[2;amount]]]
$var[price2;$multi[5000;$message[2;amount]]]
$var[price3;$multi[10000;$message[2;amount]]]
$c[add more price variables as you add more items and the number inside multi is the actual price btw]

$if[$toLowercase[$message[1;item]==item1]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price1];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item 1(s).]
$color[#2F3136]

$setVar[item1;$sum[$getVar[item1;$authorID];$message[2;amount]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price1]];$authorID]

$elseif[$toLowercase[$message[1;item]==item2]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price2];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item2(s).]
$color[#2F3136]

$var[temp-item2;$multi[$message[2;amount];2]]
$c[The 2 at the end here is because this item gives a +2 multiplier]
$setVar[item2;$sum[$getVar[item2;$authorID];$var[temp-item2]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price2]];$authorID]

$elseif[$toLowercase[$message[1;item]==item3]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price3];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item3(s).]
$color[#2F3136]

$var[temp-item3;$multi[$message[2;amount];3]]
$c[The 3 at the end here is because this item gives a +2 multiplier]
$setVar[item3;$sum[$getVar[item3;$authorID];$var[temp-item3]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price3]];$authorID]

$endif
$endif