<div class="notification-center">
<div class="notifications hidden">
<div class="notification">
<p>👍 Abdul liked your post</p>
</div>
<div class="notification">
<p>💬 Sierra commented on your post</p>
</div>
<div class="notification">
<p>👋 Kai accepted your invitation</p>
</div>
<div class="notification">
<p>🎥 Oscar is going live!</p>
</div>
</div>
</div>
<div class="all-notifications">
<svg viewBox="-20 -20 140 140" class="blobulus">
<path d="M 50 0 c 30 0 50 20 50 50 c 0 30 -20 50 -50 50 c -30 0 -50 -20 -50 -50 c 0 -30 20 -50 50 -50" fill="none" stroke="#ddd" stroke-opacity="0.7" stroke-width="1" stroke-dasharray="3" opacity="0.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 50 50; 360 50 50" dur="12419ms" begin="-1733ms" repeatCount="indefinite" />
<animate attributeName="d" values="M 50 0 c 43 0 50 7 50 50 c 0 44 -6 50 -50 50 c -44 0 -50 -6 -50 -50 c 0 -44 6 -50 50 -50; M 50 0 c 15 0 50 35 50 50 c 0 20 -30 50 -50 50 c -26 0 -50 -24 -50 -50 c 0 -41 9 -50 50 -50; M 50 0 c 32 0 50 18 50 50 c 0 44 -6 50 -50 50 c -15 0 -50 -35 -50 -50 c 0 -20 30 -50 50 -50; M 50 0 c 33 0 50 17 50 50 c 0 29 -21 50 -50 50 c -42 0 -50 -8 -50 -50 c 0 -20 30 -50 50 -50; M 50 0 c 23 0 50 27 50 50 c 0 43 -7 50 -50 50 c -24 0 -50 -26 -50 -50 c 0 -21 29 -50 50 -50; M 50 0 c 31 0 50 19 50 50 c 0 15 -35 50 -50 50 c -22 0 -50 -28 -50 -50 c 0 -30 20 -50 50 -50; M 50 0 c 41 0 50 9 50 50 c 0 33 -17 50 -50 50 c -33 0 -50 -17 -50 -50 c 0 -47 3 -50 50 -50; M 50 0 c 15 0 50 35 50 50 c 0 40 -10 50 -50 50 c -49 0 -50 -1 -50 -50 c 0 -23 27 -50 50 -50; M 50 0 c 43 0 50 7 50 50 c 0 23 -27 50 -50 50 c -50 0 -50 0 -50 -50 c 0 -39 11 -50 50 -50; M 50 0 c 18 0 50 32 50 50 c 0 37 -13 50 -50 50 c -27 0 -50 -23 -50 -50 c 0 -48 2 -50 50 -50; M 50 0 c 16 0 50 34 50 50 c 0 19 -31 50 -50 50 c -47 0 -50 -3 -50 -50 c 0 -37 13 -50 50 -50; M 50 0 c 21 0 50 29 50 50 c 0 23 -27 50 -50 50 c -43 0 -50 -7 -50 -50 c 0 -15 35 -50 50 -50; M 50 0 c 37 0 50 13 50 50 c 0 28 -22 50 -50 50 c -30 0 -50 -20 -50 -50 c 0 -23 27 -50 50 -50; M 50 0 c 31 0 50 19 50 50 c 0 26 -24 50 -50 50 c -27 0 -50 -23 -50 -50 c 0 -44 6 -50 50 -50;M 50 0 c 43 0 50 7 50 50 c 0 44 -6 50 -50 50 c -44 0 -50 -6 -50 -50 c 0 -44 6 -50 50 -50" dur="11797ms" begin="-3277ms" repeatCount="indefinite" keyTimes="0; 0.07142857142857142; 0.14285714285714285; 0.21428571428571427; 0.2857142857142857; 0.3571428571428571; 0.42857142857142855; 0.5; 0.5714285714285714; 0.6428571428571428; 0.7142857142857142; 0.7857142857142857; 0.8571428571428571; 0.9285714285714285; 1" keySplines="0.8 0.72 0.81 0.33; 0.7 0.27 0.82 0.87; 0.14 0.21 0.5 0.32; 0.97 0.01 0.31 0.51; 0.67 0.35 0.14 0.25; 0 0.46 0.2 0.1; 0.01 0.52 0.18 0.02; 0.73 0.4 0.87 0.55; 0.03 0.71 0.92 0.71; 0.33 0.6 0.68 0.45; 0.63 0.24 0.02 0.92; 0.34 0.55 0.6 0.44; 0.86 0.47 0.21 0.88; 0.09 0.49 0.09 0.73" calcMode="spline" />
<animate attributeName="stroke-dasharray" values="3;0;3;5;0;3;0;5;4;0;5;3;1;3;3" dur="11797ms" begin="-3277ms" repeatCount="indefinite" keyTimes="0; 0.07142857142857142; 0.14285714285714285; 0.21428571428571427; 0.2857142857142857; 0.3571428571428571; 0.42857142857142855; 0.5; 0.5714285714285714; 0.6428571428571428; 0.7142857142857142; 0.7857142857142857; 0.8571428571428571; 0.9285714285714285; 1" keySplines="0.8 0.72 0.81 0.33; 0.7 0.27 0.82 0.87; 0.14 0.21 0.5 0.32; 0.97 0.01 0.31 0.51; 0.67 0.35 0.14 0.25; 0 0.46 0.2 0.1; 0.01 0.52 0.18 0.02; 0.73 0.4 0.87 0.55; 0.03 0.71 0.92 0.71; 0.33 0.6 0.68 0.45; 0.63 0.24 0.02 0.92; 0.34 0.55 0.6 0.44; 0.86 0.47 0.21 0.88; 0.09 0.49 0.09 0.73" calcMode="spline" />
</path>
<path d="M 50 0 c 30 0 50 20 50 50 c 0 30 -20 50 -50 50 c -30 0 -50 -20 -50 -50 c 0 -30 20 -50 50 -50" fill="none" stroke="#fff" stroke-opacity="0.7" stroke-width="1" stroke-dasharray="15" opacity="0.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 50 50; -360 50 50" dur="17220ms" begin="-9567ms" repeatCount="indefinite" />
<animate attributeName="stroke-dasharray" values="15;10;13;15;10;13;10;15;14;10;15;13;11;13;15" dur="11797ms" begin="-3277ms" repeatCount="indefinite" keyTimes="0; 0.07142857142857142; 0.14285714285714285; 0.21428571428571427; 0.2857142857142857; 0.3571428571428571; 0.42857142857142855; 0.5; 0.5714285714285714; 0.6428571428571428; 0.7142857142857142; 0.7857142857142857; 0.8571428571428571; 0.9285714285714285; 1" keySplines="0.8 0.72 0.81 0.33; 0.7 0.27 0.82 0.87; 0.14 0.21 0.5 0.32; 0.97 0.01 0.31 0.51; 0.67 0.35 0.14 0.25; 0 0.46 0.2 0.1; 0.01 0.52 0.18 0.02; 0.73 0.4 0.87 0.55; 0.03 0.71 0.92 0.71; 0.33 0.6 0.68 0.45; 0.63 0.24 0.02 0.92; 0.34 0.55 0.6 0.44; 0.86 0.47 0.21 0.88; 0.09 0.49 0.09 0.73" calcMode="spline" />
<animate attributeName="d" values="M 50 0 c 31 0 50 19 50 50 c 0 15 -35 50 -50 50 c -17 0 -50 -33 -50 -50 c 0 -48 2 -50 50 -50; M 50 0 c 41 0 50 9 50 50 c 0 43 -7 50 -50 50 c -32 0 -50 -18 -50 -50 c 0 -24 26 -50 50 -50; M 50 0 c 34 0 50 16 50 50 c 0 50 0 50 -50 50 c -37 0 -50 -13 -50 -50 c 0 -40 10 -50 50 -50; M 50 0 c 48 0 50 2 50 50 c 0 33 -17 50 -50 50 c -17 0 -50 -33 -50 -50 c 0 -22 28 -50 50 -50; M 50 0 c 29 0 50 21 50 50 c 0 42 -8 50 -50 50 c -42 0 -50 -8 -50 -50 c 0 -41 9 -50 50 -50; M 50 0 c 34 0 50 16 50 50 c 0 48 -2 50 -50 50 c -27 0 -50 -23 -50 -50 c 0 -15 35 -50 50 -50; M 50 0 c 28 0 50 22 50 50 c 0 27 -23 50 -50 50 c -17 0 -50 -33 -50 -50 c 0 -47 3 -50 50 -50; M 50 0 c 38 0 50 12 50 50 c 0 48 -2 50 -50 50 c -42 0 -50 -8 -50 -50 c 0 -27 23 -50 50 -50; M 50 0 c 49 0 50 1 50 50 c 0 17 -33 50 -50 50 c -36 0 -50 -14 -50 -50 c 0 -17 33 -50 50 -50; M 50 0 c 28 0 50 22 50 50 c 0 32 -18 50 -50 50 c -45 0 -50 -5 -50 -50 c 0 -30 20 -50 50 -50; M 50 0 c 39 0 50 11 50 50 c 0 26 -24 50 -50 50 c -42 0 -50 -8 -50 -50 c 0 -17 33 -50 50 -50; M 50 0 c 49 0 50 1 50 50 c 0 23 -27 50 -50 50 c -18 0 -50 -32 -50 -50 c 0 -23 27 -50 50 -50; M 50 0 c 44 0 50 6 50 50 c 0 47 -3 50 -50 50 c -45 0 -50 -5 -50 -50 c 0 -25 25 -50 50 -50; M 50 0 c 34 0 50 16 50 50 c 0 44 -6 50 -50 50 c -49 0 -50 -1 -50 -50 c 0 -31 19 -50 50 -50;M 50 0 c 31 0 50 19 50 50 c 0 15 -35 50 -50 50 c -17 0 -50 -33 -50 -50 c 0 -48 2 -50 50 -50" dur="7794ms" begin="-7530ms" repeatCount="indefinite" keyTimes="0; 0.07142857142857142; 0.14285714285714285; 0.21428571428571427; 0.2857142857142857; 0.3571428571428571; 0.42857142857142855; 0.5; 0.5714285714285714; 0.6428571428571428; 0.7142857142857142; 0.7857142857142857; 0.8571428571428571; 0.9285714285714285; 1" keySplines="0.74 0.2 0.66 0.08; 0 0.6 0.22 0.33; 0.78 0.02 0.94 0.13; 0.35 0.36 0.05 0.19; 0.68 0.66 0.9 0.84; 0.06 0.33 0.86 0.12; 0.35 0.16 0.59 0.12; 0.75 0.98 0.65 0.92; 0.54 0.81 0.95 0.16; 0.92 0.11 0.09 0.53; 0.08 0.7 0.41 0.7; 0.57 0.43 0.49 0.22; 0.56 0.87 0.65 0.04; 0.15 1 0.52 0.94" calcMode="spline" />
</path>
</svg>
<svg viewBox="0 0 100 100" class="circles">
<defs>
<path id="l1" d="M50 2 2 50 50 98 98 50Z" />
</defs>
<g class="pasteHere" stroke-width="0.3">
<g id="c0" transform="rotate(0 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-0s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-0s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c0" transform="rotate(180 50 50)" filter="hue-rotate(180deg)" />
<g id="c17" transform="rotate(17 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-0.17s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-0.17s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c17" transform="rotate(180 50 50)" />
<g id="c34" transform="rotate(34 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-0.34s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-0.34s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c34" transform="rotate(180 50 50)" />
<g id="c51" transform="rotate(51 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-0.51s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-0.51s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c51" transform="rotate(180 50 50)" filter="hue-rotate(180deg)" />
<g id="c68" transform="rotate(68 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-0.68s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-0.68s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c68" transform="rotate(180 50 50)" filter="hue-rotate(180deg)" />
<g id="c85" transform="rotate(85 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-0.85s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-0.85s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c85" transform="rotate(180 50 50)" />
<g id="c102" transform="rotate(102 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-1.02s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-1.02s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c102" transform="rotate(180 50 50)" filter="hue-rotate(180deg)" />
<g id="c119" transform="rotate(119 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-1.19s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-1.19s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c119" transform="rotate(180 50 50)" />
<g id="c136" transform="rotate(136 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-1.36s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-1.36s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c136" transform="rotate(180 50 50)" />
<g id="c153" transform="rotate(153 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-1.53s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-1.53s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c153" transform="rotate(180 50 50)" filter="hue-rotate(180deg)" />
<g id="c170" transform="rotate(170 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-1.7s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-1.7s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c170" transform="rotate(180 50 50)" />
<g id="c187" transform="rotate(187 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-1.87s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-1.87s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c187" transform="rotate(180 50 50)" />
<g id="c204" transform="rotate(204 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-2.04s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-2.04s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c204" transform="rotate(180 50 50)" />
<g id="c221" transform="rotate(221 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-2.21s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-2.21s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c221" transform="rotate(180 50 50)" />
<g id="c238" transform="rotate(238 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-2.38s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-2.38s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c238" transform="rotate(180 50 50)" />
<g id="c255" transform="rotate(255 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-2.55s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-2.55s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c255" transform="rotate(180 50 50)" />
<g id="c272" transform="rotate(272 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-2.72s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-2.72s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c272" transform="rotate(180 50 50)" />
<g id="c289" transform="rotate(289 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-2.89s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-2.89s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c289" transform="rotate(180 50 50)" />
<g id="c306" transform="rotate(306 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-3.06s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-3.06s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c306" transform="rotate(180 50 50)" />
<g id="c323" transform="rotate(323 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-3.23s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-3.23s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c323" transform="rotate(180 50 50)" />
<g id="c340" transform="rotate(340 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-3.4s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-3.4s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c340" transform="rotate(180 50 50)" />
<g id="c357" transform="rotate(357 50 50)">
<circle cx="0" cy="0" r="0" fill="none" stroke="#ddd">
<animateMotion dur="6.2s" begin="-3.57s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline">
<mpath href="#l1" />
</animateMotion>
<animate attributeName="r" values="2;0;2" dur="6.2s" begin="-3.57s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.4 0.88 0.26 0.84; 0.4 0.88 0.26 0.84" calcMode="spline" />
</circle>
</g>
<use href="#c357" transform="rotate(180 50 50)" />
</g>
</svg>
<svg class="bell-icon" viewBox="0 0 100 100">
<defs>
<g fill="none" stroke="#ddd">
<path id="bellBody5" d="M 44 8 A 1 1 0 0 1 56 8 V 12 Q 80 17 80 41 Q 80 61 90 69 C 94 72 92 80 86 80 H 14 C 8 80 6 72 10 69 Q 20 61 20 41 Q 20 17 44 12 Z">
<animateTransform id="ringMe" attributeName="transform" attributeType="XML" type="rotate" values="0 50 45; -12 50 45; 0 50 45; 12 50 45; 0 50 45" dur="400ms" begin="0s" repeatCount="4" keyTimes="0;0.4;0.5;0.6;1" keySplines="0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98" calcMode="spline" />
</path>
</g>
<g fill="#000">
<circle id="badge5" cx="83" cy="27" r="15">
<animate attributeName="r" values="15;17;15" dur="400ms" begin="0s" repeatCount="4" />
</circle>
</g>
<mask id="mBell5">
<rect x="0" y="0" width="100" height="100" fill="#fff" />
<use href="#bellBody5" fill="#000" stroke="#000" stroke-width="10" />
</mask>
<mask id="m5">
<rect x="0" y="0" width="100" height="100" fill="#fff" />
<use href="#badge5" fill="#000" stroke="#000" stroke-width="10" />
</mask>
</defs>
<g mask="url(#m5)">
<use href="#bellBody5" fill="none" stroke="#dff" />
<circle class="bellGong" cx="50" cy="85" r="11" fill="none" stroke="#ddd" mask="url(#mBell5)">
<animate attributeName="cx" values="50; 40; 50; 60; 50" dur="400ms" begin="0s" repeatCount="4" keyTimes="0;0.4;0.5;0.6;1" keySplines="0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98" calcMode="spline" />
</circle>
</g>
<use href="#badge5" fill="none" stroke="#dff" stroke-dasharray="2.6">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 83 27; 360 81 24" dur="400ms" begin="0s" repeatCount="indefinite" />
</use>
<g mask="url(#mm5)">
<g transform="translate(77 34)">
<g style="pointer-events: none; user-select: none"><text x="0" y="0" font-size="20" fill="#fff" font-weight="200" font-family="monospace">0</text><text x="100" y="0" font-size="20" fill="#fff" font-weight="200" font-family="monospace">1</text><text x="200" y="0" font-size="20" fill="#fff" font-weight="200" font-family="monospace">2</text><text x="300" y="0" font-size="20" fill="#fff" font-weight="200" font-family="monospace">3</text><text x="400" y="0" font-size="20" fill="#fff" font-weight="200" font-family="monospace">4</text>
<animateTransform attributeName="transform" type="translate" values="0 0;-100 0;-200 0;-300 0;-400 0" dur="2000ms" begin="0s" calcMode="discrete" fill="freeze" />
</g>
</g>
</g>
</svg>
</div>
body {
font-family: sans-serif;
background: #111;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' id='bp'%3E%3Cdefs%3E%3CradialGradient id='grad'%3E%3Cstop offset='0%25' stop-color='%231a1a1a' /%3E%3Cstop offset='100%25' stop-color='%23000' /%3E%3C/radialGradient%3E%3Cpattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='scale(0.5) skewY(10) skewX(-30)'%3E%3Cpath d='M10 0v100m10 0v-100m10 0v100m10 0v-100m10 0v100m10 0v-100m10 0v100m10 0v-100m10 0v100M0 10h100m0 10h-100m0 10h100m0 10h-100m0 10h100m0 10h-100m0 10h100m0 10h-100m0 10h100' fill='none' stroke='rgba(255,255,255,0.1)' /%3E%3Cpath d='M0 0l0 100 100 0 0-100z' fill='none' stroke='rgba(255,255,255,0.2)' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)' /%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E");
height: 100vh;
width: 100vw;
margin: 0 auto;
}
}
.notification-center {
position: fixed;
top: 20px;
left: 20px;
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.hidden {
display: none;
}
.notification {
padding: 0.5rem;
color: #fff;
border-bottom: 1px dotted #e0e0e0;
}
.notification:last-child {
border-bottom: none;
}
.bell-icon, .circles, .blobulus, .all-notifications {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
}
.circles {
height: 190px;
width: 190px;
}
.blobulus {
height: 300px;
width: 300px;
}
.bell-icon {
height: 100px;
width: 100px;
}
const button = document.querySelector(".all-notifications");
const notifications = document.querySelector(".notifications");
button.addEventListener("click", function () {
if (button.getAttribute("aria-expanded") === "true") {
button.setAttribute("aria-expanded", "false");
} else {
button.setAttribute("aria-expanded", "true");
}
notifications.classList.toggle("hidden");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.