XenForo 2.х.х Виджет с новым 2024 годом 1.0.1

<svg viewBox="0 0 125 120">
  <defs>
    <filter id="glow-red" height="122%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
      <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
      <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
      <feFlood flood-color="red" flood-opacity="1" result="offsetColor"></feFlood>
      <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite>
    </filter>
    <filter id="glow-blue" height="122%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"></feGaussianBlur>
      <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
      <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
      <feFlood flood-color="#4a58ff" flood-opacity="1" result="offsetColor"></feFlood>
      <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite>
    </filter>
    <filter id="glow-green" height="122%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur>
      <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
      <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
      <feFlood flood-color="#4bff4b" flood-opacity="1" result="offsetColor"></feFlood>
      <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite>
    </filter>
  </defs>
  <use xlink:href="#popper" filter="url(#glow-red)"></use>
  <use xlink:href="#confetti-1" filter="url(#glow-blue)"></use>
  <use xlink:href="#confetti-2" filter="url(#glow-blue)"></use>
  <use xlink:href="#confetti-3" filter="url(#glow-blue)"></use>
  <use xlink:href="#pop-1" filter="url(#glow-green)"></use>
  <use xlink:href="#pop-2" filter="url(#glow-green)"></use>
  <use xlink:href="#pop-3" filter="url(#glow-green)"></use>
  <path d="M24.781,52.447c0.309,-0.79 2.349,-2.784 2.806,-3.238c3.362,-3.362 8.003,-5.137 13.426,-5.137c8.656,0 18.409,4.588 26.098,12.276c13.083,13.082 16.22,30.443 7.139,39.524c-2.414,2.414 -5.499,3.996 -9.05,4.704l-60.453,19.062c-0.36,0.115 -0.731,0.169 -1.098,0.169c-0.994,0 -1.966,-0.409 -2.668,-1.159c-0.961,-1.028 -1.242,-2.515 -0.727,-3.825l24.527,-62.376Zm37.17,9.06c-6.347,-6.347 -14.175,-10.138 -20.936,-10.138c-2.401,0 -5.785,0.52 -8.264,2.999c-5.981,5.981 -2.711,19.355 7.139,29.203c6.347,6.347 14.175,10.138 20.936,10.138c0.779,0 1.665,-0.065 2.586,-0.225l2.182,-0.688c0.187,-0.059 0.376,-0.088 0.563,-0.117c1.035,-0.452 2.043,-1.082 2.934,-1.973c5.978,-5.974 2.709,-19.348 -7.14,-29.199Zm-13.473,36.689c-4.853,-2.111 -9.605,-5.315 -13.752,-9.461c-4.806,-4.806 -8.257,-10.191 -10.266,-15.53l-14.616,37.175l38.634,-12.184Z" id="popper" class="popper"></path>
  <path d="M95.872,60.358c2.064,-0.273 5.18,0.042 8.26,3.127c4.142,4.154 12.623,-2.502 12.704,-2.567c1.566,-1.276 3.858,-1.049 5.136,0.515c1.276,1.559 1.047,3.859 -0.513,5.135c-5.019,4.106 -15.403,9.164 -22.486,2.079c-1.181,-1.179 -1.881,-1.087 -2.138,-1.053c-1.748,0.225 -4.056,2.884 -5.071,4.617c-0.677,1.17 -1.904,1.824 -3.161,1.824c-0.619,0 -1.245,-0.157 -1.821,-0.488c-1.746,-1.006 -2.344,-3.238 -1.341,-4.984c0.432,-0.758 4.424,-7.411 10.431,-8.205Z" class="confetti" id="confetti-1"></path>
  <path d="M53.539,41.478c-0.644,0.459 -1.386,0.679 -2.12,0.679c-1.138,0 -2.259,-0.531 -2.972,-1.527c-1.958,-2.741 -5.042,-11.374 4.084,-18.309c2.538,-1.928 3.789,-4.412 3.62,-7.182c-0.2,-3.253 -2.336,-6.448 -5.578,-8.338c-1.741,-1.015 -2.329,-3.249 -1.314,-4.991c1.017,-1.741 3.256,-2.326 4.991,-1.314c5.321,3.105 8.84,8.546 9.184,14.2c0.322,5.243 -1.984,10.015 -6.491,13.439c-4.955,3.765 -3.197,7.29 -2.534,8.292c1.143,1.635 0.756,3.888 -0.87,5.051Z" class="confetti" id="confetti-2"></path>
  <path d="M75.987,52.118c-1.55,0 -2.988,-0.994 -3.481,-2.551c-0.605,-1.922 0.461,-3.972 2.381,-4.579c2.637,-0.833 10.208,-4.385 10.401,-9.603c0.095,-2.57 -0.405,-4.894 -0.886,-7.142c-1.024,-4.765 -2.297,-10.698 4.862,-15.367c1.683,-1.096 3.949,-0.626 5.049,1.064c1.103,1.688 0.628,3.949 -1.062,5.049c-2.848,1.859 -2.72,3.035 -1.712,7.724c0.522,2.435 1.172,5.463 1.044,8.944c-0.423,11.403 -14.879,16.099 -15.494,16.292c-0.369,0.115 -0.74,0.169 -1.102,0.169Z" class="confetti" id="confetti-3"></path>
  <circle cx="119.455" cy="32.89" r="5.254" class="pop" id="pop-1"></circle>
  <circle cx="67.259" cy="32.539" r="4.203" class="pop" id="pop-2"></circle>
  <circle cx="102.64" cy="87.54" r="3.854" class="pop" id="pop-3"></circle>
</svg>
<p>
  <span>С новым</span>
  <span>2024</span>
  <span>годом!</span>
</p>
<style>
svg {
  fill: white;
  height: 125px;
  margin-top: -10px;
}

.popper {
  fill: red;
  animation: popper-appear 1s infinite;
}

.confetti {
  fill: #2334ff;
  animation: confetti-appear 1s infinite;
}

.pop {
  fill: #4bff4b;
  animation: pop-appear 1s infinite;
}

p {
  font-family: 'Pacifico', cursive;
  font-size: 29px;
  margin: 20px 0 0 0;
  text-shadow: 0 0 12px orange;
  color: orange;
  text-align: center;
}

span {
  animation: flicker-in 3s infinite backwards;
}

span:nth-of-type(2) {
  animation-delay: 1s;
}

span:nth-of-type(3) {
  animation-delay: 2s;
}

@keyframes popper-appear {
  0%, 33.33% {
    opacity: 1;
  }
  33.99%, to {
    opacity: .1;
  }
}

@keyframes confetti-appear {
  0%, 33.33%, 66.99%, to {
    opacity: .3;
  }
  33.99%, 66.66% {
    opacity: 1;
  }
}

@keyframes pop-appear {
  0%, 66.66% {
    opacity: .1;
  }
  66.99%, to {
    opacity: 1;
  }
}

@keyframes flicker-in {
  0%, 64% {
    opacity: .1;
  }
  66% {
    opacity: .7;
  }
  66.66%, to {
    opacity: 1;
  }
}
</style>

<div class="container">
    <h1 class="animated">С новым 2024 годом</h1>
  </div>
<style>
.container {
  display: flex;
  flex-direction: column;
  background: url('https://i.ibb.co/1sQXJ4z/page-bg.png') no-repeat center center/cover;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 125px;
}

.animated {
  font-family: 'Charm', cursive;
  margin: 0;
  padding: 0;
  background: url('https://i.ibb.co/89Cf3dm/text-bg.png') no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: moveBg 90s linear infinite;
  -webkit-animation: moveBg 90s linear infinite;
}

/* Text Background Animation */
@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }

  100% {
    background-position: 100% 50%;
  }
}
</style>