CodePen Embed - Central Notifications

Live

This Pen is owned by leimapapa on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":true,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"RwOZQOW\",\"auto_save\":true},\"hashid\":\"RwOZQOW\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"codepenchallenge\",\"cpc-notification-center\"],\"id\":74050783,\"user_id\":2045658,\"html\":\"<div class=\\\"notification-center\\\">\\n\\t<div class=\\\"notifications hidden\\\">\\n\\t\\t<div class=\\\"notification\\\">\\n\\t\\t\\t<p>👍 Abdul liked your post</p>\\n\\t\\t</div>\\n\\t\\t<div class=\\\"notification\\\">\\n\\t\\t\\t<p>💬 Sierra commented on your post</p>\\n\\t\\t</div>\\n\\t\\t<div class=\\\"notification\\\">\\n\\t\\t\\t<p>👋 Kai accepted your invitation</p>\\n\\t\\t</div>\\n\\t\\t<div class=\\\"notification\\\">\\n\\t\\t\\t<p>🎥 Oscar is going live!</p>\\n\\t\\t</div>\\n\\t</div>\\n</div>\\n\\n<div class=\\\"all-notifications\\\">\\n\\t<svg viewBox=\\\"-20 -20 140 140\\\" class=\\\"blobulus\\\">\\n\\t\\t<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\\\">\\n\\t\\t\\t<animateTransform attributeName=\\\"transform\\\" attributeType=\\\"XML\\\" type=\\\"rotate\\\" values=\\\"0 50 50; 360 50 50\\\" dur=\\\"12419ms\\\" begin=\\\"-1733ms\\\" repeatCount=\\\"indefinite\\\" />\\n\\t\\t\\t<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\\\" />\\n\\t\\t\\t<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\\\" />\\n\\t\\t</path>\\n\\t\\t<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\\\">\\n\\t\\t\\t<animateTransform attributeName=\\\"transform\\\" attributeType=\\\"XML\\\" type=\\\"rotate\\\" values=\\\"0 50 50; -360 50 50\\\" dur=\\\"17220ms\\\" begin=\\\"-9567ms\\\" repeatCount=\\\"indefinite\\\" />\\n\\t\\t\\t<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\\\" />\\n\\t\\t\\t<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\\\" />\\n\\t\\t</path>\\n\\t</svg>\\n\\n\\t<svg viewBox=\\\"0 0 100 100\\\" class=\\\"circles\\\">\\n\\t\\t<defs>\\n\\t\\t\\t<path id=\\\"l1\\\" d=\\\"M50 2 2 50 50 98 98 50Z\\\" />\\n\\t\\t</defs>\\n\\t\\t<g class=\\\"pasteHere\\\" stroke-width=\\\"0.3\\\">\\n\\t\\t\\t<g id=\\\"c0\\\" transform=\\\"rotate(0 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c0\\\" transform=\\\"rotate(180 50 50)\\\" filter=\\\"hue-rotate(180deg)\\\" />\\n\\t\\t\\t<g id=\\\"c17\\\" transform=\\\"rotate(17 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c17\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c34\\\" transform=\\\"rotate(34 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c34\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c51\\\" transform=\\\"rotate(51 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c51\\\" transform=\\\"rotate(180 50 50)\\\" filter=\\\"hue-rotate(180deg)\\\" />\\n\\t\\t\\t<g id=\\\"c68\\\" transform=\\\"rotate(68 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c68\\\" transform=\\\"rotate(180 50 50)\\\" filter=\\\"hue-rotate(180deg)\\\" />\\n\\t\\t\\t<g id=\\\"c85\\\" transform=\\\"rotate(85 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c85\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c102\\\" transform=\\\"rotate(102 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c102\\\" transform=\\\"rotate(180 50 50)\\\" filter=\\\"hue-rotate(180deg)\\\" />\\n\\t\\t\\t<g id=\\\"c119\\\" transform=\\\"rotate(119 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c119\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c136\\\" transform=\\\"rotate(136 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c136\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c153\\\" transform=\\\"rotate(153 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c153\\\" transform=\\\"rotate(180 50 50)\\\" filter=\\\"hue-rotate(180deg)\\\" />\\n\\t\\t\\t<g id=\\\"c170\\\" transform=\\\"rotate(170 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c170\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c187\\\" transform=\\\"rotate(187 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c187\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c204\\\" transform=\\\"rotate(204 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c204\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c221\\\" transform=\\\"rotate(221 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c221\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c238\\\" transform=\\\"rotate(238 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c238\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c255\\\" transform=\\\"rotate(255 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c255\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c272\\\" transform=\\\"rotate(272 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c272\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c289\\\" transform=\\\"rotate(289 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c289\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c306\\\" transform=\\\"rotate(306 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c306\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c323\\\" transform=\\\"rotate(323 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c323\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c340\\\" transform=\\\"rotate(340 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c340\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t\\t<g id=\\\"c357\\\" transform=\\\"rotate(357 50 50)\\\">\\n\\t\\t\\t\\t<circle cx=\\\"0\\\" cy=\\\"0\\\" r=\\\"0\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t\\t<mpath href=\\\"#l1\\\" />\\n\\t\\t\\t\\t\\t</animateMotion>\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<use href=\\\"#c357\\\" transform=\\\"rotate(180 50 50)\\\" />\\n\\t\\t</g>\\n\\n\\t</svg>\\n\\n\\t<svg class=\\\"bell-icon\\\" viewBox=\\\"0 0 100 100\\\">\\n\\t\\t<defs>\\n\\t\\t\\t<g fill=\\\"none\\\" stroke=\\\"#ddd\\\">\\n\\t\\t\\t\\t<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\\\">\\n\\t\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t\\t</path>\\n\\t\\t\\t</g>\\n\\t\\t\\t<g fill=\\\"#000\\\">\\n\\t\\t\\t\\t<circle id=\\\"badge5\\\" cx=\\\"83\\\" cy=\\\"27\\\" r=\\\"15\\\">\\n\\t\\t\\t\\t\\t<animate attributeName=\\\"r\\\" values=\\\"15;17;15\\\" dur=\\\"400ms\\\" begin=\\\"0s\\\" repeatCount=\\\"4\\\" />\\n\\t\\t\\t\\t</circle>\\n\\t\\t\\t</g>\\n\\t\\t\\t<mask id=\\\"mBell5\\\">\\n\\t\\t\\t\\t<rect x=\\\"0\\\" y=\\\"0\\\" width=\\\"100\\\" height=\\\"100\\\" fill=\\\"#fff\\\" />\\n\\t\\t\\t\\t<use href=\\\"#bellBody5\\\" fill=\\\"#000\\\" stroke=\\\"#000\\\" stroke-width=\\\"10\\\" />\\n\\t\\t\\t</mask>\\n\\t\\t\\t<mask id=\\\"m5\\\">\\n\\t\\t\\t\\t<rect x=\\\"0\\\" y=\\\"0\\\" width=\\\"100\\\" height=\\\"100\\\" fill=\\\"#fff\\\" />\\n\\t\\t\\t\\t<use href=\\\"#badge5\\\" fill=\\\"#000\\\" stroke=\\\"#000\\\" stroke-width=\\\"10\\\" />\\n\\t\\t\\t</mask>\\n\\t\\t</defs>\\n\\t\\t<g mask=\\\"url(#m5)\\\">\\n\\t\\t\\t<use href=\\\"#bellBody5\\\" fill=\\\"none\\\" stroke=\\\"#dff\\\" />\\n\\t\\t\\t<circle class=\\\"bellGong\\\" cx=\\\"50\\\" cy=\\\"85\\\" r=\\\"11\\\" fill=\\\"none\\\" stroke=\\\"#ddd\\\" mask=\\\"url(#mBell5)\\\">\\n\\t\\t\\t\\t<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\\\" />\\n\\t\\t\\t</circle>\\n\\t\\t</g>\\n\\t\\t<use href=\\\"#badge5\\\" fill=\\\"none\\\" stroke=\\\"#dff\\\" stroke-dasharray=\\\"2.6\\\">\\n\\t\\t\\t<animateTransform attributeName=\\\"transform\\\" attributeType=\\\"XML\\\" type=\\\"rotate\\\" values=\\\"0 83 27; 360 81 24\\\" dur=\\\"400ms\\\" begin=\\\"0s\\\" repeatCount=\\\"indefinite\\\" />\\n\\t\\t</use>\\n\\t\\t<g mask=\\\"url(#mm5)\\\">\\n\\t\\t\\t<g transform=\\\"translate(77 34)\\\">\\n\\t\\t\\t\\t<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>\\n\\t\\t\\t\\t\\t<animateTransform attributeName=\\\"transform\\\" type=\\\"translate\\\" values=\\\"0 0;-100 0;-200 0;-300 0;-400 0\\\" dur=\\\"2000ms\\\" begin=\\\"0s\\\" calcMode=\\\"discrete\\\" fill=\\\"freeze\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t</g>\\n\\t\\t</g>\\n\\t</svg>\\n</div>\",\"css\":\"body {\\n\\tfont-family: sans-serif;\\n  background: #111;\\n  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\\\");\\n  height: 100vh;\\n  width: 100vw;\\n  margin: 0 auto;\\n}\\n}\\n\\n.notification-center {\\n\\tposition: fixed;\\n\\ttop: 20px;\\n\\tleft: 20px;\\n\\twidth: 300px;\\n\\tbackground-color: #fff;\\n\\tbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\\n}\\n\\n.hidden {\\n\\tdisplay: none;\\n}\\n\\n.notification {\\n\\tpadding: 0.5rem;\\n\\tcolor: #fff;\\n\\tborder-bottom: 1px dotted #e0e0e0;\\n}\\n\\n.notification:last-child {\\n\\tborder-bottom: none;\\n}\\n.bell-icon, .circles, .blobulus, .all-notifications {\\n\\tposition: absolute;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\ttransform: translate(-50%,-50%);\\n\\tcursor: pointer;\\n}\\n.circles {\\n\\theight: 190px;\\n\\twidth: 190px;\\n}\\n.blobulus {\\n\\theight: 300px;\\n\\twidth: 300px;\\n}\\n.bell-icon {\\n\\theight: 100px;\\n\\twidth: 100px;\\n}\",\"js\":\"const button = document.querySelector(\\\".all-notifications\\\");\\nconst notifications = document.querySelector(\\\".notifications\\\");\\n\\nbutton.addEventListener(\\\"click\\\", function () {\\n\\tif (button.getAttribute(\\\"aria-expanded\\\") === \\\"true\\\") {\\n\\t\\tbutton.setAttribute(\\\"aria-expanded\\\", \\\"false\\\");\\n\\t} else {\\n\\t\\tbutton.setAttribute(\\\"aria-expanded\\\", \\\"true\\\");\\n\\t}\\n\\tnotifications.classList.toggle(\\\"hidden\\\");\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-03-27T17:05:21.537Z\",\"updated_at\":\"2024-03-27T17:05:21.537Z\",\"title\":\"Central Notifications\",\"description\":\"\",\"slug_hash\":\"RwOZQOW\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018e80df-9a81-7ff5-a3e8-bd4f2998b9ce\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}