Baktiyar Ablaikhan

Other

Source
Uiverse ↗
Author
Sameer2244
Licence
MIT

Loading…

Code

<div class="notification">
  <div class="shinner">
    <div class="mover"></div>
    <div class="mover2"></div>
  </div>
  <svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing">
 <g>
  <g id="svg_1">
   <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path>
  </g>
 </g>
</svg>

<svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing1">
 <g>
  <g id="svg_1">
   <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path>
  </g>
 </g>
</svg>
  <div></div>
  <p class="levelup">LEVEL UP!</p>
  <p class="congrats">Congratulations!</p>
  <div class="bg"></div>
    
</div>
Prompt

Build "Other", a other animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes, inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/Sameer2244/white-eagle-79 (Sameer2244, MIT).