Glowing Spinning Notification
Tooltips · @ahmed150up
- No JS
- Reduced-motion ready
Glowing 3D Notification
A pure-CSS notification with glow, 3D and spin effects. Created by Sameer2244 on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.5 KB gzip
Created by @Sameer2244 on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Glowing 3D Notification" by Sameer2244 on Uiverse.io · MIT License · https://uiverse.io/Sameer2244/white-eagle-79 -->
<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>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --color-2, --color-3) on .notification to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Gradient 3D Notification
Tooltips · @John-CFO
- GPU-friendly
- No JS
- Reduced-motion ready
Glowing Pulsing Notification
Tooltips · @Yaya12085
- No JS
- Reduced-motion ready
Gradient Spinning Notification
Tooltips · @yaroslavas2001
- No JS
- Reduced-motion ready
Pulsing Notification
Tooltips · @andrew-demchenk0
- GPU-friendly
- No JS
- Reduced-motion ready
Spinning Bouncing Notification
Tooltips · @devsleonardo
- GPU-friendly
- No JS
- Reduced-motion ready