CodePen Embed - SVG Animation Simple Banner Finished

Live

Live

Live

This Pen is owned by Snorkl.tv on CodePen.

See more by @snorkltv on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__browser":{"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","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__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\":false,\"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\":false,\"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\":3,\"theme\":\"twilight\",\"id\":\"bGLKwaV\",\"auto_save\":true},\"hashid\":\"bGLKwaV\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://unpkg.co/gsap@3/dist/gsap.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://assets.codepen.io/16327/GSDevTools3.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":61245925,\"user_id\":32887,\"html\":\"<svg class=\\\"demo\\\" viewBox=\\\"0 0 300 300\\\"  xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n  <defs></defs>\\n\\t<ellipse style=\\\"fill: rgb(168, 55, 55, 0.2);\\\" cx=\\\"147.3\\\" cy=\\\"148.3\\\" rx=\\\"214.7\\\" ry=\\\"214.7\\\"></ellipse>\\n\\t<ellipse style=\\\"fill: rgb(168, 55, 55, 0.5);\\\" cx=\\\"147.3\\\" cy=\\\"148.3\\\" rx=\\\"214.7\\\" ry=\\\"214.7\\\"></ellipse>\\n  <ellipse style=\\\"fill: rgb(168, 55, 55);\\\" cx=\\\"147.3\\\" cy=\\\"148.3\\\" rx=\\\"214.7\\\" ry=\\\"214.7\\\"></ellipse>\\n  <g id=\\\"text\\\">\\n    <title>Group</title>\\n    <path d=\\\"M 58 27.9 L 56.1 34.1 L 62.5 34.1 L 60.6 27.9 C 60.5 27.6 60.4 27.5 60.3 27.4 C 60.1 27.2 60 27.2 59.8 27.2 L 58.8 27.2 C 58.6 27.2 58.5 27.2 58.4 27.4 C 58.3 27.5 58.1 27.6 58 27.9 Z M 55.7 47.3 C 55.7 47.8 55.6 48.2 55.3 48.5 C 55.1 48.7 54.7 48.8 54.2 48.8 L 48.2 48.8 C 47.7 48.8 47.3 48.7 47.1 48.5 C 46.8 48.2 46.7 47.8 46.7 47.3 L 46.7 36.5 C 46.7 35.7 46.8 34.7 47.1 33.7 C 47.4 32.6 47.8 31.4 48.3 29.9 L 51.9 20.6 C 52 20.2 52.3 19.8 52.6 19.6 C 53 19.4 53.4 19.3 54 19.3 L 65 19.3 C 65.5 19.3 65.9 19.4 66.3 19.6 C 66.6 19.8 66.9 20.2 67.1 20.6 L 70.6 29.9 C 71.2 31.4 71.6 32.6 71.8 33.7 C 72.1 34.7 72.2 35.7 72.2 36.5 L 72.2 47.3 C 72.2 47.8 72.1 48.2 71.9 48.5 C 71.6 48.7 71.3 48.8 70.7 48.8 L 64.5 48.8 C 64 48.8 63.6 48.7 63.3 48.5 C 63.1 48.2 63 47.8 63 47.3 L 63 41.6 L 55.7 41.6 L 55.7 47.3 Z M 84.9 48.8 L 78.7 48.8 C 78.2 48.8 77.8 48.7 77.6 48.5 C 77.4 48.2 77.3 47.8 77.3 47.3 L 77.3 20.8 C 77.3 20.2 77.4 19.9 77.6 19.6 C 77.8 19.4 78.2 19.3 78.7 19.3 L 83 19.3 C 83.5 19.3 84 19.4 84.3 19.5 C 84.7 19.7 85.1 20 85.4 20.4 L 93.4 29.5 L 93.4 20.8 C 93.4 20.2 93.5 19.9 93.7 19.6 C 93.9 19.4 94.3 19.3 94.8 19.3 L 101 19.3 C 101.5 19.3 101.9 19.4 102.1 19.6 C 102.3 19.9 102.5 20.2 102.5 20.8 L 102.5 47.3 C 102.5 47.8 102.3 48.2 102.1 48.5 C 101.9 48.7 101.5 48.8 101 48.8 L 94.8 48.8 C 94.3 48.8 93.9 48.7 93.7 48.5 C 93.5 48.2 93.4 47.8 93.4 47.3 L 93.4 42.3 L 86.4 33.8 L 86.4 47.3 C 86.4 47.8 86.2 48.2 86 48.5 C 85.8 48.7 85.4 48.8 84.9 48.8 Z M 108.9 48.8 C 108.4 48.8 108 48.7 107.8 48.5 C 107.6 48.2 107.5 47.8 107.5 47.3 L 107.5 42.4 C 107.5 41.9 107.6 41.5 107.8 41.3 C 108 41.1 108.4 41 108.9 41 L 113 41 L 113 27.2 L 108.9 27.2 C 108.4 27.2 108 27.1 107.8 26.8 C 107.6 26.6 107.5 26.2 107.5 25.7 L 107.5 20.8 C 107.5 20.2 107.6 19.9 107.8 19.6 C 108 19.4 108.4 19.3 108.9 19.3 L 126.4 19.3 C 126.9 19.3 127.3 19.4 127.5 19.6 C 127.8 19.9 127.9 20.2 127.9 20.8 L 127.9 25.7 C 127.9 26.2 127.8 26.6 127.5 26.8 C 127.3 27.1 126.9 27.2 126.4 27.2 L 122.4 27.2 L 122.4 41 L 126.4 41 C 126.9 41 127.3 41.1 127.5 41.3 C 127.8 41.5 127.9 41.9 127.9 42.4 L 127.9 47.3 C 127.9 47.8 127.8 48.2 127.5 48.5 C 127.3 48.7 126.9 48.8 126.4 48.8 L 108.9 48.8 Z M 140.5 48.8 L 134.4 48.8 C 133.9 48.8 133.5 48.7 133.3 48.5 C 133 48.2 132.9 47.8 132.9 47.3 L 132.9 20.8 C 132.9 20.2 133 19.9 133.3 19.6 C 133.5 19.4 133.9 19.3 134.4 19.3 L 141 19.3 C 141.4 19.3 141.8 19.4 142.1 19.6 C 142.4 19.8 142.6 20.1 142.9 20.5 L 146.6 27.2 C 146.7 27.4 146.8 27.6 146.9 27.7 C 147 27.8 147.2 27.9 147.3 27.9 L 147.7 27.9 C 147.9 27.9 148 27.8 148.1 27.7 C 148.2 27.6 148.3 27.4 148.4 27.2 L 152.1 20.5 C 152.3 20.1 152.6 19.8 152.9 19.6 C 153.2 19.4 153.5 19.3 154 19.3 L 160.6 19.3 C 161.1 19.3 161.5 19.4 161.7 19.6 C 162 19.9 162.1 20.2 162.1 20.8 L 162.1 47.3 C 162.1 47.8 162 48.2 161.7 48.5 C 161.5 48.7 161.1 48.8 160.6 48.8 L 154.3 48.8 C 153.8 48.8 153.4 48.7 153.2 48.5 C 152.9 48.2 152.8 47.8 152.8 47.3 L 152.8 32.9 L 150.4 37.4 C 150.1 37.8 149.9 38.2 149.5 38.4 C 149.2 38.6 148.7 38.7 148.2 38.7 L 146.6 38.7 C 146.1 38.7 145.6 38.6 145.3 38.4 C 144.9 38.2 144.7 37.8 144.4 37.4 L 142 32.9 L 142 47.3 C 142 47.8 141.9 48.2 141.6 48.5 C 141.4 48.7 141 48.8 140.5 48.8 Z M 178.4 27.9 L 176.5 34.1 L 182.9 34.1 L 181 27.9 C 180.9 27.6 180.8 27.5 180.7 27.4 C 180.5 27.2 180.4 27.2 180.2 27.2 L 179.2 27.2 C 179.1 27.2 178.9 27.2 178.8 27.4 C 178.7 27.5 178.5 27.6 178.4 27.9 Z M 176.1 47.3 C 176.1 47.8 176 48.2 175.8 48.5 C 175.5 48.7 175.1 48.8 174.6 48.8 L 168.6 48.8 C 168.1 48.8 167.7 48.7 167.5 48.5 C 167.2 48.2 167.1 47.8 167.1 47.3 L 167.1 36.5 C 167.1 35.7 167.3 34.7 167.5 33.7 C 167.8 32.6 168.2 31.4 168.7 29.9 L 172.3 20.6 C 172.5 20.2 172.7 19.8 173 19.6 C 173.4 19.4 173.8 19.3 174.4 19.3 L 185.4 19.3 C 185.9 19.3 186.4 19.4 186.7 19.6 C 187 19.8 187.3 20.2 187.5 20.6 L 191 29.9 C 191.6 31.4 192 32.6 192.2 33.7 C 192.5 34.7 192.6 35.7 192.6 36.5 L 192.6 47.3 C 192.6 47.8 192.5 48.2 192.3 48.5 C 192 48.7 191.7 48.8 191.1 48.8 L 185 48.8 C 184.4 48.8 184 48.7 183.7 48.5 C 183.5 48.2 183.4 47.8 183.4 47.3 L 183.4 41.6 L 176.1 41.6 L 176.1 47.3 Z M 210 48.8 L 203.3 48.8 C 202.8 48.8 202.4 48.7 202.2 48.5 C 202 48.2 201.8 47.8 201.8 47.3 L 201.8 27.2 L 195.8 27.2 C 195.3 27.2 194.9 27.1 194.7 26.8 C 194.5 26.6 194.3 26.2 194.3 25.7 L 194.3 20.8 C 194.3 20.2 194.5 19.9 194.7 19.6 C 194.9 19.4 195.3 19.3 195.8 19.3 L 217.5 19.3 C 218 19.3 218.4 19.4 218.6 19.6 C 218.8 19.9 218.9 20.2 218.9 20.8 L 218.9 25.7 C 218.9 26.2 218.8 26.6 218.6 26.8 C 218.4 27.1 218 27.2 217.5 27.2 L 211.4 27.2 L 211.4 47.3 C 211.4 47.8 211.3 48.2 211.1 48.5 C 210.9 48.7 210.5 48.8 210 48.8 Z M 243.4 48.8 L 224.4 48.8 C 223.9 48.8 223.5 48.7 223.3 48.5 C 223 48.2 222.9 47.8 222.9 47.3 L 222.9 20.8 C 222.9 20.2 223 19.9 223.3 19.6 C 223.5 19.4 223.9 19.3 224.4 19.3 L 243.4 19.3 C 243.9 19.3 244.3 19.4 244.5 19.6 C 244.8 19.9 244.9 20.2 244.9 20.8 L 244.9 25.6 C 244.9 26.1 244.8 26.4 244.5 26.7 C 244.3 26.9 243.9 27 243.4 27 L 232.1 27 L 232.1 30.2 L 240.1 30.2 C 240.6 30.2 241 30.3 241.2 30.5 C 241.5 30.8 241.6 31.1 241.6 31.7 L 241.6 36 C 241.6 36.6 241.5 36.9 241.2 37.2 C 241 37.4 240.6 37.5 240.1 37.5 L 232.1 37.5 L 232.1 41.1 L 243.4 41.1 C 243.9 41.1 244.3 41.2 244.5 41.4 C 244.8 41.6 244.9 42 244.9 42.5 L 244.9 47.3 C 244.9 47.8 244.8 48.2 244.5 48.5 C 244.3 48.7 243.9 48.8 243.4 48.8 Z\\\" style=\\\"fill: rgb(255, 255, 255); white-space: pre;\\\"></path>\\n    <path d=\\\"M 80.2 127 L 48 127 C 46.7 127 45.7 126.7 45.2 126.1 C 44.6 125.6 44.3 124.6 44.3 123.3 L 44.3 111.4 C 44.3 110.1 44.6 109.2 45.2 108.6 C 45.7 108 46.7 107.7 48 107.7 L 75.4 107.7 C 76.3 107.7 77 107.4 77.4 106.9 C 77.8 106.3 78.1 105.6 78.1 104.8 C 78.1 103.6 77.8 102.8 77.4 102.2 C 77 101.7 76.3 101.4 75.4 101.3 L 60.1 99.2 C 55.4 98.5 51.5 96.9 48.6 94.5 C 45.7 92 44.3 87.9 44.3 82.2 L 44.3 71.5 C 44.3 65.7 46.2 61.3 49.9 58.2 C 53.7 55.1 58.8 53.6 65.4 53.6 L 94 53.6 C 95.3 53.6 96.2 53.8 96.8 54.4 C 97.4 55 97.6 55.9 97.6 57.2 L 97.6 69.4 C 97.6 70.7 97.4 71.6 96.8 72.2 C 96.2 72.8 95.3 73 94 73 L 70.2 73 C 69.3 73 68.6 73.3 68.2 73.9 C 67.7 74.5 67.5 75.2 67.5 76.1 C 67.5 77 67.7 77.7 68.2 78.3 C 68.6 79 69.3 79.3 70.2 79.4 L 85.4 81.4 C 90.2 82.1 94 83.6 96.9 86.1 C 99.9 88.5 101.3 92.6 101.3 98.3 L 101.3 109 C 101.3 114.8 99.4 119.3 95.7 122.4 C 91.9 125.5 86.7 127 80.2 127 Z M 155.4 127 L 128.9 127 C 127.6 127 126.5 126.8 125.6 126.3 C 124.8 125.8 124.1 124.9 123.7 123.6 L 113.7 98.6 C 113 97.1 112.5 95.8 112.1 94.7 C 111.7 93.6 111.4 92.5 111.1 91.5 C 110.8 90.5 110.6 89.4 110.5 88.3 C 110.4 87.2 110.4 85.8 110.4 84.2 L 110.4 57.2 C 110.4 55.9 110.7 55 111.3 54.4 C 111.8 53.8 112.8 53.6 114.1 53.6 L 130.3 53.6 C 131.6 53.6 132.6 53.8 133.2 54.4 C 133.9 55 134.3 55.9 134.3 57.2 L 134.3 85.4 C 134.3 86.1 134.3 86.7 134.5 87.4 C 134.6 88.1 134.8 88.8 135.1 89.6 L 139.9 103.8 C 140.1 104.5 140.3 105 140.6 105.2 C 140.9 105.5 141.3 105.6 141.8 105.6 L 142.9 105.6 C 143.5 105.6 143.9 105.5 144.2 105.2 C 144.4 105 144.7 104.5 144.9 103.8 L 149.7 89.5 C 149.9 88.7 150.1 88 150.3 87.3 C 150.4 86.6 150.5 86 150.5 85.3 L 150.5 57.2 C 150.5 55.9 150.8 55 151.3 54.4 C 151.9 53.8 152.9 53.6 154.2 53.6 L 170.2 53.6 C 171.5 53.6 172.4 53.8 173 54.4 C 173.5 55 173.8 55.9 173.8 57.2 L 173.8 84.2 C 173.8 85.8 173.8 87.2 173.7 88.3 C 173.6 89.4 173.4 90.5 173.1 91.5 C 172.9 92.5 172.5 93.6 172.1 94.7 C 171.7 95.8 171.2 97.1 170.6 98.6 L 160.6 123.6 C 160.1 124.9 159.4 125.8 158.6 126.3 C 157.7 126.8 156.7 127 155.4 127 Z M 242.5 127 L 210.4 127 C 201.9 127 195.5 125.3 191.4 121.9 C 187.3 118.5 185.3 113.3 185.3 106.2 L 185.3 74.4 C 185.3 67.3 187.3 62.1 191.4 58.7 C 195.5 55.3 201.9 53.6 210.4 53.6 L 235.9 53.6 C 237.1 53.6 238.1 53.8 238.7 54.4 C 239.2 55 239.5 55.9 239.5 57.2 L 239.5 69.6 C 239.5 70.9 239.2 71.8 238.7 72.4 C 238.1 73 237.1 73.2 235.9 73.2 L 214.6 73.2 C 212.5 73.2 211 73.7 209.9 74.5 C 208.9 75.4 208.4 76.6 208.4 78.3 L 208.4 102.7 C 208.4 104.4 208.8 105.7 209.6 106.5 C 210.4 107.3 211.5 107.7 213.1 107.7 L 223 107.7 L 223 91.8 C 223 90.5 223.3 89.6 223.9 89 C 224.4 88.4 225.4 88.1 226.7 88.1 L 242.5 88.1 C 243.8 88.1 244.7 88.4 245.3 89 C 245.9 89.6 246.2 90.5 246.2 91.8 L 246.2 123.3 C 246.2 124.6 245.9 125.6 245.3 126.1 C 244.7 126.7 243.8 127 242.5 127 Z\\\" style=\\\"fill: rgb(255, 255, 255); white-space: pre;\\\"></path>\\n    <path d=\\\"M 86 134.6 L 96.8 134.6 C 97.8 134.6 98.4 134.7 98.8 134.9 C 99.3 135.2 99.5 135.5 99.5 136.1 L 99.5 152 C 99.5 152.8 99.4 153.7 99.3 154.4 C 99.2 155.2 98.8 156 98.2 157 L 94.5 162.6 C 94.3 163 93.9 163.4 93.4 163.7 C 93 164 92.4 164.1 91.6 164.1 L 81.9 164.1 C 81.1 164.1 80.4 164 79.8 163.8 C 79.1 163.6 78.7 163.3 78.5 162.9 L 75.2 156.2 C 75 155.9 74.8 155.7 74.6 155.6 C 74.4 155.5 74.1 155.5 73.8 155.5 L 73.2 155.5 C 72.9 155.5 72.6 155.5 72.4 155.6 C 72.2 155.7 72 155.9 71.9 156.2 L 68.4 162.9 C 68.3 163.3 67.9 163.6 67.4 163.8 C 66.8 164 66.2 164.1 65.4 164.1 L 55.8 164.1 C 55 164.1 54.3 164 53.7 163.7 C 53.2 163.4 52.8 163.1 52.5 162.6 L 48.9 157 C 48.3 156 47.9 155.1 47.8 154.3 C 47.6 153.6 47.6 152.8 47.6 151.9 L 47.6 136.1 C 47.6 135.5 47.8 135.2 48.2 134.9 C 48.6 134.7 49.3 134.6 50.2 134.6 L 61.4 134.6 C 62.4 134.6 63 134.7 63.5 134.9 C 63.9 135.2 64.1 135.5 64.1 136.1 L 64.1 151.1 L 68.3 146 C 68.7 145.5 69.2 145.2 69.8 145 C 70.5 144.8 71.2 144.7 72.2 144.7 L 75.2 144.7 C 76.2 144.7 76.9 144.8 77.6 145 C 78.2 145.2 78.7 145.5 79.1 146 L 83.3 151.1 L 83.3 136.1 C 83.3 135.5 83.5 135.2 84 134.9 C 84.4 134.7 85 134.6 86 134.6 Z M 110.3 164.1 C 109.4 164.1 108.7 164 108.3 163.8 C 107.9 163.5 107.7 163.1 107.7 162.6 L 107.7 157.7 C 107.7 157.2 107.9 156.8 108.3 156.6 C 108.7 156.4 109.4 156.3 110.3 156.3 L 117.6 156.3 L 117.6 142.5 L 110.3 142.5 C 109.4 142.5 108.7 142.4 108.3 142.1 C 107.9 141.9 107.7 141.5 107.7 141 L 107.7 136.1 C 107.7 135.5 107.9 135.2 108.3 134.9 C 108.7 134.7 109.4 134.6 110.3 134.6 L 141.4 134.6 C 142.3 134.6 143 134.7 143.4 134.9 C 143.8 135.2 144.1 135.5 144.1 136.1 L 144.1 141 C 144.1 141.5 143.8 141.9 143.4 142.1 C 143 142.4 142.3 142.5 141.4 142.5 L 134.3 142.5 L 134.3 156.3 L 141.4 156.3 C 142.3 156.3 143 156.4 143.4 156.6 C 143.8 156.8 144.1 157.2 144.1 157.7 L 144.1 162.6 C 144.1 163.1 143.8 163.5 143.4 163.8 C 143 164 142.3 164.1 141.4 164.1 L 110.3 164.1 Z M 177.8 164.1 L 166 164.1 C 165.1 164.1 164.4 164 164 163.8 C 163.6 163.5 163.4 163.1 163.4 162.6 L 163.4 142.5 L 152.7 142.5 C 151.7 142.5 151.1 142.4 150.6 142.1 C 150.2 141.9 150 141.5 150 141 L 150 136.1 C 150 135.5 150.2 135.2 150.6 134.9 C 151.1 134.7 151.7 134.6 152.7 134.6 L 191.2 134.6 C 192.1 134.6 192.8 134.7 193.2 134.9 C 193.6 135.2 193.8 135.5 193.8 136.1 L 193.8 141 C 193.8 141.5 193.6 141.9 193.2 142.1 C 192.8 142.4 192.1 142.5 191.2 142.5 L 180.5 142.5 L 180.5 162.6 C 180.5 163.1 180.3 163.5 179.8 163.8 C 179.4 164 178.8 164.1 177.8 164.1 Z M 214.8 164.1 L 203.5 164.1 C 202.6 164.1 201.9 164 201.5 163.8 C 201.1 163.5 200.9 163.1 200.9 162.6 L 200.9 136.1 C 200.9 135.5 201.1 135.2 201.5 134.9 C 201.9 134.7 202.6 134.6 203.5 134.6 L 214.8 134.6 C 215.8 134.6 216.4 134.7 216.8 134.9 C 217.3 135.2 217.5 135.5 217.5 136.1 L 217.5 145 L 229.6 145 L 229.6 136.1 C 229.6 135.5 229.9 135.2 230.3 134.9 C 230.7 134.7 231.3 134.6 232.3 134.6 L 243.6 134.6 C 244.5 134.6 245.2 134.7 245.6 134.9 C 246 135.2 246.2 135.5 246.2 136.1 L 246.2 162.6 C 246.2 163.1 246 163.5 245.6 163.8 C 245.2 164 244.5 164.1 243.6 164.1 L 232.3 164.1 C 231.3 164.1 230.7 164 230.3 163.8 C 229.9 163.5 229.6 163.1 229.6 162.6 L 229.6 153.5 L 217.5 153.5 L 217.5 162.6 C 217.5 163.1 217.3 163.5 216.8 163.8 C 216.4 164 215.8 164.1 214.8 164.1 Z\\\" style=\\\"fill: rgb(255, 255, 255); white-space: pre;\\\"></path>\\n    <path d=\\\"M 90.1 267.4 L 66.8 267.4 C 60.6 267.4 56 265.2 53.1 260.9 C 50.1 256.5 48.6 249.8 48.6 240.7 L 48.6 199.7 C 48.6 190.6 50.1 183.9 53.1 179.5 C 56 175.2 60.6 173 66.8 173 L 85.3 173 C 86.2 173 86.9 173.4 87.3 174.1 C 87.7 174.8 87.9 176 87.9 177.7 L 87.9 193.6 C 87.9 195.2 87.7 196.4 87.3 197.2 C 86.9 197.9 86.2 198.3 85.3 198.3 L 69.9 198.3 C 68.4 198.3 67.2 198.8 66.5 199.9 C 65.7 201 65.4 202.7 65.4 204.9 L 65.4 236.2 C 65.4 238.4 65.7 240 66.2 241.1 C 66.8 242.1 67.6 242.6 68.8 242.6 L 75.9 242.6 L 75.9 222.2 C 75.9 220.5 76.2 219.3 76.6 218.6 C 77 217.8 77.7 217.5 78.6 217.5 L 90.1 217.5 C 91 217.5 91.7 217.8 92.1 218.6 C 92.5 219.3 92.7 220.5 92.7 222.2 L 92.7 262.7 C 92.7 264.4 92.5 265.6 92.1 266.3 C 91.7 267.1 91 267.4 90.1 267.4 Z M 126.5 267.4 L 103.1 267.4 C 102.2 267.4 101.5 267.1 101.1 266.3 C 100.6 265.6 100.4 264.4 100.4 262.7 L 100.4 247.4 C 100.4 245.7 100.6 244.5 101.1 243.8 C 101.5 243 102.2 242.6 103.1 242.6 L 123 242.6 C 123.6 242.6 124.1 242.3 124.4 241.5 C 124.8 240.8 124.9 239.9 124.9 238.8 C 124.9 237.4 124.8 236.3 124.4 235.6 C 124.1 234.9 123.6 234.5 123 234.4 L 111.9 231.6 C 108.4 230.7 105.7 228.7 103.6 225.6 C 101.5 222.4 100.4 217.2 100.4 209.8 L 100.4 196.1 C 100.4 188.6 101.8 182.9 104.5 179 C 107.2 175 111 173 115.7 173 L 136.5 173 C 137.4 173 138.1 173.4 138.5 174.1 C 138.9 174.8 139.1 176 139.1 177.7 L 139.1 193.3 C 139.1 195 138.9 196.2 138.5 196.9 C 138.1 197.7 137.4 198 136.5 198 L 119.2 198 C 118.6 198 118.1 198.4 117.7 199.2 C 117.4 199.9 117.2 200.8 117.2 202 C 117.2 203.1 117.4 204.1 117.7 204.9 C 118.1 205.6 118.6 206.1 119.2 206.2 L 130.2 208.8 C 133.7 209.7 136.5 211.7 138.6 214.8 C 140.7 218 141.8 223.2 141.8 230.6 L 141.8 244.3 C 141.8 251.8 140.4 257.5 137.7 261.5 C 134.9 265.4 131.2 267.4 126.5 267.4 Z M 169.1 200.5 L 165.7 220.5 L 177.3 220.5 L 173.8 200.5 C 173.6 199.7 173.4 199.2 173.2 198.8 C 173 198.5 172.7 198.3 172.4 198.3 L 170.6 198.3 C 170.3 198.3 170 198.5 169.8 198.8 C 169.6 199.2 169.3 199.7 169.1 200.5 Z M 164.9 262.7 C 164.9 264.4 164.7 265.6 164.3 266.3 C 163.9 267.1 163.2 267.4 162.3 267.4 L 151.4 267.4 C 150.5 267.4 149.8 267.1 149.4 266.3 C 148.9 265.6 148.7 264.4 148.7 262.7 L 148.7 228.1 C 148.7 225.5 149 222.4 149.4 219 C 149.9 215.6 150.6 211.6 151.6 207.1 L 158.1 177.3 C 158.3 175.8 158.8 174.7 159.4 174 C 160 173.3 160.8 173 161.8 173 L 181.7 173 C 182.7 173 183.4 173.3 184.1 174 C 184.7 174.7 185.1 175.8 185.4 177.3 L 191.9 207.1 C 192.8 211.6 193.6 215.6 194 219 C 194.5 222.4 194.7 225.5 194.7 228.1 L 194.7 262.7 C 194.7 264.4 194.5 265.6 194.1 266.3 C 193.7 267.1 193 267.4 192.1 267.4 L 180.9 267.4 C 179.9 267.4 179.2 267.1 178.7 266.3 C 178.3 265.6 178 264.4 178 262.7 L 178 244.3 L 164.9 244.3 L 164.9 262.7 Z M 218 267.4 L 206.5 267.4 C 205.6 267.4 204.9 267.1 204.5 266.3 C 204 265.6 203.8 264.4 203.8 262.7 L 203.8 177.7 C 203.8 176 204 174.8 204.5 174.1 C 204.9 173.4 205.6 173 206.5 173 L 229.1 173 C 235.8 173 240.4 175.3 242.9 180.1 C 245.4 184.8 246.6 191 246.6 198.6 L 246.6 215.4 C 246.6 223 245.4 229.1 242.9 233.9 C 240.4 238.6 235.8 240.9 229.1 240.9 L 220.6 240.9 L 220.6 262.7 C 220.6 264.4 220.4 265.6 220 266.3 C 219.6 267.1 218.9 267.4 218 267.4 Z M 220.5 197.5 L 220.5 217.3 L 227.1 217.3 C 228.6 217.3 229.5 216.7 230 215.4 C 230.4 214 230.6 212.6 230.6 210.9 L 230.6 203.9 C 230.6 202.3 230.4 200.8 230 199.5 C 229.5 198.2 228.6 197.5 227.1 197.5 L 220.5 197.5 Z\\\" style=\\\"fill: rgb(255, 255, 255); white-space: pre;\\\"></path>\\n  </g>\\n</svg>\",\"css\":\"body {\\n\\tbackground:#1d1d1d;\\n\\ttext-align:center /* it works, don't judge */\\n}\\n\\nsvg.demo {\\n\\tbackground:#ededed;\\n\\tborder:1px solid #ccc;\\n\\tmin-width:300px;\\n\\twidth:80%;\\n}\",\"js\":\"const tl = gsap.timeline()\\ntl.from(\\\"ellipse\\\", {scale:0, ease:\\\"power2.inOut\\\", transformOrigin:\\\"50% 50%\\\", duration:1, stagger:0.1})\\n  .from(\\\"#text path\\\", {scale:0, transformOrigin:\\\"50% 50%\\\", stagger:0.05, ease:\\\"back\\\"}, \\\"-=0.4\\\")\\n\\nGSDevTools.create()\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-06-02T21:09:48.041Z\",\"updated_at\":\"2022-09-20T18:09:51.029Z\",\"title\":\"SVG Animation Simple Banner Finished\",\"description\":\"\",\"slug_hash\":\"bGLKwaV\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"097c8e005b49006acb8e32d9f151d141\",\"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\":\"2022-11-08T22:42:55.128Z\",\"cpid\":null,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3OTgxODI0N30.od50zNLrmY0InCludY3SWz3inV4B39aZhrI-DydmlCw","__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-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.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"}