CodePen Embed - Graph Animation

Live

Live

Live

This Pen is owned by GreenSock on CodePen. It is a fork of this Pen.

See more by @GreenSock 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; web-share","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\":\"spaces\",\"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\":\"ZEQBemg\",\"auto_save\":false},\"hashid\":\"ZEQBemg\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js\",\"order\":3,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":45401267,\"user_id\":16327,\"html\":\"\\n\\t<div id=\\\"graphContainer\\\">\\n\\t\\t<svg id=\\\"graph\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 640 328.34\\\">\\n\\t\\t\\t<line id=\\\"bar1\\\" x1=\\\"126.56\\\" y1=\\\"280\\\" x2=\\\"126.56\\\" y2=\\\"20\\\" style=\\\"fill: none;stroke: #fbcd63;stroke-miterlimit: 10;stroke-width: 120px\\\" />\\n\\t\\t\\t<line id=\\\"bar2\\\" x1=\\\"264.25\\\" y1=\\\"280\\\" x2=\\\"264.25\\\" y2=\\\"20\\\" style=\\\"fill: none;stroke: #ae572b;stroke-miterlimit: 10;stroke-width: 120px\\\" />\\n\\t\\t\\t<line id=\\\"bar3\\\" x1=\\\"401.83\\\" y1=\\\"280\\\" x2=\\\"401.83\\\" y2=\\\"20\\\" style=\\\"fill: none;stroke: #312d2a;stroke-miterlimit: 10;stroke-width: 120px\\\" />\\n\\t\\t\\t<line id=\\\"bar4\\\" x1=\\\"539.25\\\" y1=\\\"280\\\" x2=\\\"539.25\\\" y2=\\\"20\\\" style=\\\"fill: none;stroke: #2e5b68;stroke-miterlimit: 10;stroke-width: 120px\\\" />\\n\\t\\t\\t<rect width=\\\"640\\\" height=\\\"328.34\\\" style=\\\"fill: none\\\" />\\n\\t\\t\\t<polyline id=\\\"axis\\\" points=\\\"58 20 58 280 608 280\\\" style=\\\"fill: none;stroke: #312d2a;stroke-miterlimit: 10;stroke-width: 0.98019134831326px\\\" />\\n\\t\\t\\t<g id=\\\"yAxis\\\">\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M25.89,279.53v-.93A9.24,9.24,0,0,0,27,279a5,5,0,0,0,1.11.15v-3.18l-.38-.14a3.73,3.73,0,0,1-1.46-.94,2,2,0,0,1-.48-1.38,1.94,1.94,0,0,1,.62-1.48,2.93,2.93,0,0,1,1.7-.68v-1.21H29v1.2a4.72,4.72,0,0,1,1,.18,5.6,5.6,0,0,1,.87.33v.92a7.36,7.36,0,0,0-.91-.35,5,5,0,0,0-1-.17v3l.39.14a4.1,4.1,0,0,1,1.59,1,2,2,0,0,1,.47,1.38,2.06,2.06,0,0,1-.66,1.61A3,3,0,0,1,29,280v1.23h-.82v-1.22a6.62,6.62,0,0,1-1.23-.18A4.59,4.59,0,0,1,25.89,279.53Zm.95-6a1.14,1.14,0,0,0,.33.84,2.54,2.54,0,0,0,1,.57v-2.66a1.69,1.69,0,0,0-.95.39A1.11,1.11,0,0,0,26.84,273.5Zm3.52,4.26a1.26,1.26,0,0,0-.31-.86,3.08,3.08,0,0,0-1.1-.63v2.84a1.81,1.81,0,0,0,1-.42A1.2,1.2,0,0,0,30.36,277.76Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M35.65,280.14A2.74,2.74,0,0,1,33.27,279a5.68,5.68,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44A5.68,5.68,0,0,1,38,279,2.74,2.74,0,0,1,35.65,280.14Zm0-.92c1.39,0,2.09-1.18,2.09-3.53a5.37,5.37,0,0,0-.51-2.65,1.87,1.87,0,0,0-3.15,0,5.25,5.25,0,0,0-.52,2.65C33.56,278,34.26,279.22,35.65,279.22Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,280v-1.26h1.41V280Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,280.14A2.74,2.74,0,0,1,43.3,279a5.68,5.68,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44a5.68,5.68,0,0,1-.81,3.33A2.74,2.74,0,0,1,45.68,280.14Zm0-.92c1.39,0,2.09-1.18,2.09-3.53a5.37,5.37,0,0,0-.51-2.65,1.87,1.87,0,0,0-3.15,0,5.36,5.36,0,0,0-.52,2.65C43.59,278,44.29,279.22,45.68,279.22Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M28.83,242.39v-.94a9.39,9.39,0,0,0,1.13.38,6.46,6.46,0,0,0,1.11.15V238.8l-.38-.14a3.63,3.63,0,0,1-1.46-.95,2,2,0,0,1-.48-1.37,1.92,1.92,0,0,1,.62-1.48,2.86,2.86,0,0,1,1.7-.68V233h.82v1.2a4.73,4.73,0,0,1,1,.17,6.84,6.84,0,0,1,.87.33v.93a6.05,6.05,0,0,0-.91-.35,5,5,0,0,0-1-.17v3l.39.15a4,4,0,0,1,1.59,1,2,2,0,0,1,.47,1.38,2,2,0,0,1-.66,1.6,2.91,2.91,0,0,1-1.79.69v1.24h-.82v-1.22a7.57,7.57,0,0,1-1.23-.18A4.59,4.59,0,0,1,28.83,242.39Zm1-6a1.15,1.15,0,0,0,.33.85,2.54,2.54,0,0,0,1,.57v-2.66a1.63,1.63,0,0,0-.95.39A1.09,1.09,0,0,0,29.78,236.35Zm3.52,4.26a1.25,1.25,0,0,0-.31-.85,3.23,3.23,0,0,0-1.1-.64V242a1.81,1.81,0,0,0,1-.43A1.18,1.18,0,0,0,33.3,240.61Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M37.15,242.86v-7.21l-2,.91v-.68l2.31-1.63h.79v8.61Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,242.86V241.6h1.41v1.26Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,243a2.74,2.74,0,0,1-2.38-1.12,5.68,5.68,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44a5.68,5.68,0,0,1-.81,3.33A2.74,2.74,0,0,1,45.68,243Zm0-.92c1.39,0,2.09-1.18,2.09-3.53a5.35,5.35,0,0,0-.51-2.65,1.86,1.86,0,0,0-3.15,0,5.33,5.33,0,0,0-.52,2.65C43.59,240.9,44.29,242.08,45.68,242.08Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M26.67,205.25v-.94a9.24,9.24,0,0,0,1.13.37,5.6,5.6,0,0,0,1.11.16v-3.18l-.38-.15a3.62,3.62,0,0,1-1.46-.94,2,2,0,0,1-.48-1.37,1.92,1.92,0,0,1,.62-1.48,2.86,2.86,0,0,1,1.7-.68v-1.21h.82V197a4.73,4.73,0,0,1,1,.17,5.6,5.6,0,0,1,.87.33v.92a6,6,0,0,0-.91-.34,4.36,4.36,0,0,0-1-.17v3l.39.14a4.1,4.1,0,0,1,1.59,1,2,2,0,0,1,.47,1.38,2.05,2.05,0,0,1-.66,1.6,2.91,2.91,0,0,1-1.79.69V207h-.82v-1.23a6.64,6.64,0,0,1-1.23-.17A5.18,5.18,0,0,1,26.67,205.25Zm.95-6a1.16,1.16,0,0,0,.33.85,2.54,2.54,0,0,0,1,.57V198a1.7,1.7,0,0,0-.95.4A1.09,1.09,0,0,0,27.62,199.21Zm3.52,4.26a1.23,1.23,0,0,0-.31-.85,2.94,2.94,0,0,0-1.1-.64v2.85a1.81,1.81,0,0,0,1-.43A1.2,1.2,0,0,0,31.14,203.47Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M33.21,205.71V205l2.39-2.59c.47-.51.84-.94,1.12-1.3a5,5,0,0,0,.62-.95,1.81,1.81,0,0,0,.19-.77c0-1-.56-1.45-1.68-1.45a4.86,4.86,0,0,0-2.35.69v-.94a4.06,4.06,0,0,1,1.13-.5,4.88,4.88,0,0,1,1.28-.18,2.93,2.93,0,0,1,2,.61,2.18,2.18,0,0,1,.7,1.74,3,3,0,0,1-.51,1.52,16,16,0,0,1-1.66,2l-1.76,1.9h4v.92Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,205.71v-1.26h1.41v1.26Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,205.86a2.76,2.76,0,0,1-2.38-1.12,5.68,5.68,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44a5.68,5.68,0,0,1-.81,3.33A2.76,2.76,0,0,1,45.68,205.86Zm0-.93c1.39,0,2.09-1.17,2.09-3.52a5.39,5.39,0,0,0-.51-2.66,1.87,1.87,0,0,0-3.15,0,5.38,5.38,0,0,0-.52,2.66C43.59,203.76,44.29,204.93,45.68,204.93Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M26.61,168.1v-.93a9.24,9.24,0,0,0,1.13.37,5.6,5.6,0,0,0,1.11.16v-3.19l-.38-.14a3.62,3.62,0,0,1-1.46-.94,2,2,0,0,1-.48-1.38,1.94,1.94,0,0,1,.62-1.48,2.86,2.86,0,0,1,1.7-.67v-1.22h.82v1.2a4.72,4.72,0,0,1,1,.18,5.6,5.6,0,0,1,.87.33v.92a7.36,7.36,0,0,0-.91-.35,5.89,5.89,0,0,0-1-.17v3l.39.14a4.22,4.22,0,0,1,1.59,1,2,2,0,0,1,.47,1.39,2.05,2.05,0,0,1-.66,1.6,3,3,0,0,1-1.79.69v1.23h-.82v-1.22a7.6,7.6,0,0,1-1.23-.17A5.15,5.15,0,0,1,26.61,168.1Zm.95-6a1.14,1.14,0,0,0,.33.84,2.54,2.54,0,0,0,1,.57v-2.66a1.77,1.77,0,0,0-1,.39A1.11,1.11,0,0,0,27.56,162.07Zm3.52,4.26a1.26,1.26,0,0,0-.31-.86,3.08,3.08,0,0,0-1.1-.63v2.84a1.74,1.74,0,0,0,1-.42A1.2,1.2,0,0,0,31.08,166.33Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M33.29,168.17v-.93a4.92,4.92,0,0,0,2.31.54,2.43,2.43,0,0,0,1.62-.5,1.8,1.8,0,0,0,.58-1.41,1.63,1.63,0,0,0-.47-1.2,1.77,1.77,0,0,0-1.28-.46,4,4,0,0,0-.71.07,4.69,4.69,0,0,0-.69.18l-.38-.64,2.78-2.93H33.37V160h5.1v.68l-2.64,2.78.34,0a2.7,2.7,0,0,1,1.95.67,2.34,2.34,0,0,1,.71,1.79A2.65,2.65,0,0,1,38,168a3.39,3.39,0,0,1-2.34.75A4.61,4.61,0,0,1,33.29,168.17Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,168.57v-1.26h1.41v1.26Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,168.71a2.74,2.74,0,0,1-2.38-1.12,5.66,5.66,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44a5.66,5.66,0,0,1-.81,3.33A2.74,2.74,0,0,1,45.68,168.71Zm0-.92c1.39,0,2.09-1.17,2.09-3.53a5.37,5.37,0,0,0-.51-2.65,1.87,1.87,0,0,0-3.15,0,5.36,5.36,0,0,0-.52,2.65C43.59,166.62,44.29,167.79,45.68,167.79Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M25.79,131V130a9.28,9.28,0,0,0,1.12.38,5.71,5.71,0,0,0,1.11.15v-3.18l-.37-.14a3.7,3.7,0,0,1-1.47-.94,2.05,2.05,0,0,1-.48-1.38,1.9,1.9,0,0,1,.63-1.48,2.83,2.83,0,0,1,1.69-.68v-1.21h.83v1.2a4.63,4.63,0,0,1,1,.17,7.22,7.22,0,0,1,.87.33v.93a5.67,5.67,0,0,0-.91-.35,5,5,0,0,0-1-.17v3l.38.15a4.11,4.11,0,0,1,1.6,1,2.28,2.28,0,0,1-.2,3,2.9,2.9,0,0,1-1.78.69v1.24H28v-1.22a7.91,7.91,0,0,1-1.23-.18A4.49,4.49,0,0,1,25.79,131Zm.94-6a1.15,1.15,0,0,0,.33.85,2.54,2.54,0,0,0,1,.57v-2.66a1.63,1.63,0,0,0-.95.39A1.12,1.12,0,0,0,26.73,124.92Zm3.52,4.26a1.2,1.2,0,0,0-.31-.85,3,3,0,0,0-1.09-.63v2.84a1.81,1.81,0,0,0,1-.43A1.17,1.17,0,0,0,30.25,129.18Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M32.34,129.42v-.8l4.47-5.8h1v5.68h1.15v.92H37.79v2H36.71v-2Zm1.23-.92h3.16v-4.06Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,131.43v-1.26h1.41v1.26Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,131.57a2.74,2.74,0,0,1-2.38-1.12,5.68,5.68,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44a5.68,5.68,0,0,1-.81,3.33A2.74,2.74,0,0,1,45.68,131.57Zm0-.92c1.39,0,2.09-1.18,2.09-3.53a5.35,5.35,0,0,0-.51-2.65,1.86,1.86,0,0,0-3.15,0,5.33,5.33,0,0,0-.52,2.65C43.59,129.47,44.29,130.65,45.68,130.65Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M26.67,93.82v-.94a9.24,9.24,0,0,0,1.13.37,5.6,5.6,0,0,0,1.11.16V90.23l-.38-.15a3.62,3.62,0,0,1-1.46-.94,2,2,0,0,1-.48-1.37,1.92,1.92,0,0,1,.62-1.48,2.86,2.86,0,0,1,1.7-.68V84.4h.82v1.2a4.73,4.73,0,0,1,1,.17,5.6,5.6,0,0,1,.87.33V87a6,6,0,0,0-.91-.34,4.36,4.36,0,0,0-1-.17v3l.39.14a4.1,4.1,0,0,1,1.59,1A2,2,0,0,1,32.18,92a2.05,2.05,0,0,1-.66,1.6,2.91,2.91,0,0,1-1.79.69v1.24h-.82V94.33a6.64,6.64,0,0,1-1.23-.17A5.18,5.18,0,0,1,26.67,93.82Zm.95-6a1.16,1.16,0,0,0,.33.85,2.54,2.54,0,0,0,1,.57V86.53a1.7,1.7,0,0,0-.95.4A1.09,1.09,0,0,0,27.62,87.78ZM31.14,92a1.23,1.23,0,0,0-.31-.85,2.94,2.94,0,0,0-1.1-.64V93.4a1.81,1.81,0,0,0,1-.43A1.2,1.2,0,0,0,31.14,92Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M33.17,93.89V93a4.65,4.65,0,0,0,1.11.41,5.23,5.23,0,0,0,1.19.13A2.17,2.17,0,0,0,37,93a1.82,1.82,0,0,0,.55-1.4,1.75,1.75,0,0,0-.49-1.31,1.88,1.88,0,0,0-1.34-.46,4.44,4.44,0,0,0-1,.12,3.68,3.68,0,0,0-.84.33l-.66-.51.51-4.07H38.1v.92H34.5l-.34,2.7A4.23,4.23,0,0,1,35,89a3.55,3.55,0,0,1,.86-.1,3.18,3.18,0,0,1,1.46.32,2.35,2.35,0,0,1,1,.93,2.7,2.7,0,0,1,.35,1.42,2.86,2.86,0,0,1-.38,1.52,2.48,2.48,0,0,1-1.06,1,3.78,3.78,0,0,1-1.64.34,6.4,6.4,0,0,1-1.26-.13A4,4,0,0,1,33.17,93.89Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,94.28V93h1.41v1.26Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,94.43a2.76,2.76,0,0,1-2.38-1.12A5.68,5.68,0,0,1,42.49,90q0-4.44,3.19-4.44T48.87,90a5.68,5.68,0,0,1-.81,3.33A2.76,2.76,0,0,1,45.68,94.43Zm0-.93c1.39,0,2.09-1.17,2.09-3.52a5.39,5.39,0,0,0-.51-2.66,1.87,1.87,0,0,0-3.15,0A5.38,5.38,0,0,0,43.59,90C43.59,92.33,44.29,93.5,45.68,93.5Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M26.19,56.67v-.93a9.24,9.24,0,0,0,1.13.37,5.6,5.6,0,0,0,1.11.16V53.09l-.38-.15A3.62,3.62,0,0,1,26.59,52a2,2,0,0,1-.48-1.37,2,2,0,0,1,.62-1.49,2.86,2.86,0,0,1,1.7-.67V47.25h.82v1.2a5.43,5.43,0,0,1,1,.18,5.6,5.6,0,0,1,.87.33v.92a7.36,7.36,0,0,0-.91-.35,5,5,0,0,0-1-.16v3l.39.14a4.1,4.1,0,0,1,1.59,1,2,2,0,0,1,.47,1.38,2.05,2.05,0,0,1-.66,1.6,3,3,0,0,1-1.79.69v1.23h-.82V57.19A6.64,6.64,0,0,1,27.2,57,5.15,5.15,0,0,1,26.19,56.67Zm.95-6a1.14,1.14,0,0,0,.33.84,2.54,2.54,0,0,0,1,.57V49.39a1.7,1.7,0,0,0-.95.4A1.07,1.07,0,0,0,27.14,50.64Zm3.52,4.26a1.22,1.22,0,0,0-.31-.85,2.94,2.94,0,0,0-1.1-.64v2.84a1.74,1.74,0,0,0,1-.42A1.2,1.2,0,0,0,30.66,54.9Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M35.59,57.29a2.81,2.81,0,0,1-2.14-.81,3.1,3.1,0,0,1-.78-2.24A4.27,4.27,0,0,1,33,52.63a9.47,9.47,0,0,1,1.08-1.86l1.6-2.23h1.18L35.1,51l-.36.5-.29.44a2.43,2.43,0,0,1,1.63-.58,2.32,2.32,0,0,1,2.19,1.38,3.57,3.57,0,0,1,.32,1.55,3.16,3.16,0,0,1-.38,1.56,2.53,2.53,0,0,1-1.05,1A3.17,3.17,0,0,1,35.59,57.29Zm-1.92-3a2.21,2.21,0,0,0,.51,1.55,1.8,1.8,0,0,0,1.42.56A1.88,1.88,0,0,0,37,55.81a2.14,2.14,0,0,0,.52-1.5,2.3,2.3,0,0,0-.48-1.53,1.59,1.59,0,0,0-1.27-.57,2.12,2.12,0,0,0-1.23.36,2.48,2.48,0,0,0-.86,1,3.11,3.11,0,0,0,0,.32C33.67,54,33.67,54.13,33.67,54.25Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,57.14V55.88h1.41v1.26Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,57.29a2.75,2.75,0,0,1-2.38-1.13,5.64,5.64,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44a5.64,5.64,0,0,1-.81,3.33A2.75,2.75,0,0,1,45.68,57.29Zm0-.93c1.39,0,2.09-1.17,2.09-3.53a5.37,5.37,0,0,0-.51-2.65,1.87,1.87,0,0,0-3.15,0,5.36,5.36,0,0,0-.52,2.65C43.59,55.19,44.29,56.36,45.68,56.36Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g>\\n\\t\\t\\t\\t\\t<path d=\\\"M28,19.53v-.94a8.84,8.84,0,0,0,1.13.38,5.61,5.61,0,0,0,1.1.15V15.94l-.37-.14a3.7,3.7,0,0,1-1.47-.94,2.05,2.05,0,0,1-.48-1.38A1.9,1.9,0,0,1,28.5,12a2.83,2.83,0,0,1,1.69-.68V10.11H31v1.2a4.53,4.53,0,0,1,1,.17,7.22,7.22,0,0,1,.87.33v.93a5.67,5.67,0,0,0-.91-.35,4.91,4.91,0,0,0-1-.17v3l.38.15a4,4,0,0,1,1.6,1,2.27,2.27,0,0,1-.19,3A2.93,2.93,0,0,1,31,20v1.24h-.83V20.05A7.91,7.91,0,0,1,29,19.87,4.49,4.49,0,0,1,28,19.53Zm.95-6a1.14,1.14,0,0,0,.32.85,2.71,2.71,0,0,0,1,.57V12.25a1.66,1.66,0,0,0-1,.39A1.11,1.11,0,0,0,28.91,13.49Zm3.51,4.26a1.2,1.2,0,0,0-.31-.85A3,3,0,0,0,31,16.27v2.84a1.84,1.84,0,0,0,1-.43A1.2,1.2,0,0,0,32.42,17.75Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M35.75,20,39,12.31H35.33L35,13.66h-.64V11.39H40.1v.71L36.91,20Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M40,20V18.74h1.41V20Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M45.68,20.14A2.74,2.74,0,0,1,43.3,19a5.68,5.68,0,0,1-.81-3.33q0-4.44,3.19-4.44t3.19,4.44A5.68,5.68,0,0,1,48.06,19,2.74,2.74,0,0,1,45.68,20.14Zm0-.92c1.39,0,2.09-1.18,2.09-3.53A5.35,5.35,0,0,0,47.26,13a1.86,1.86,0,0,0-3.15,0,5.33,5.33,0,0,0-.52,2.65C43.59,18,44.29,19.22,45.68,19.22Z\\\" style=\\\"fill: #312d2a\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t</g>\\n\\t\\t\\t<g id=\\\"xAxis\\\">\\n\\t\\t\\t\\t<g id=\\\"_2018\\\" data-name=\\\"2018\\\">\\n\\t\\t\\t\\t\\t<path d=\\\"M526.85,299v-.75l2.39-2.59c.47-.51.84-.94,1.13-1.3a5.43,5.43,0,0,0,.61-.95,1.85,1.85,0,0,0,.19-.77c0-1-.55-1.45-1.67-1.45a5,5,0,0,0-2.36.68V291a4.2,4.2,0,0,1,1.13-.5,4.9,4.9,0,0,1,1.28-.19,2.93,2.93,0,0,1,2,.62,2.18,2.18,0,0,1,.7,1.74,2.89,2.89,0,0,1-.51,1.51,15.33,15.33,0,0,1-1.66,2.06l-1.76,1.9h4V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M536.63,299.16a2.78,2.78,0,0,1-2.38-1.12,5.68,5.68,0,0,1-.81-3.33c0-3,1.07-4.45,3.19-4.45s3.2,1.49,3.2,4.45A5.68,5.68,0,0,1,539,298,2.78,2.78,0,0,1,536.63,299.16Zm0-.93c1.4,0,2.09-1.17,2.09-3.52a5.39,5.39,0,0,0-.51-2.66,1.87,1.87,0,0,0-3.15,0,5.39,5.39,0,0,0-.51,2.66C534.55,297.06,535.24,298.23,536.63,298.23Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M542.78,299V291.8l-2,.91V292l2.31-1.63h.79V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M551.39,296.65a2.24,2.24,0,0,1-.8,1.84,4.1,4.1,0,0,1-4.49,0,2.27,2.27,0,0,1-.8-1.84,2.2,2.2,0,0,1,.47-1.39,2.72,2.72,0,0,1,1.28-.86,2.59,2.59,0,0,1-1.13-.79,1.83,1.83,0,0,1-.39-1.16,1.93,1.93,0,0,1,.73-1.62,4.1,4.1,0,0,1,4.17,0,1.93,1.93,0,0,1,.74,1.62,1.78,1.78,0,0,1-.4,1.16,2.53,2.53,0,0,1-1.13.79,2.72,2.72,0,0,1,1.28.86A2.15,2.15,0,0,1,551.39,296.65Zm-3-1.86c-1.33.21-2,.81-2,1.8a1.51,1.51,0,0,0,.53,1.23,2.21,2.21,0,0,0,1.47.44,2.24,2.24,0,0,0,1.47-.44,1.5,1.5,0,0,0,.52-1.23C550.34,295.6,549.67,295,548.35,294.79Zm0-.77a3,3,0,0,0,1.31-.57,1.18,1.18,0,0,0,.46-.94c0-.9-.59-1.34-1.77-1.34s-1.78.44-1.78,1.34a1.18,1.18,0,0,0,.46.94A3,3,0,0,0,548.35,294Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g id=\\\"_2017\\\" data-name=\\\"2017\\\">\\n\\t\\t\\t\\t\\t<path d=\\\"M389.63,299v-.75l2.39-2.59c.46-.51.84-.94,1.12-1.3a5.57,5.57,0,0,0,.62-.95,1.85,1.85,0,0,0,.19-.77c0-1-.56-1.45-1.68-1.45a4.92,4.92,0,0,0-2.35.68V291a4.06,4.06,0,0,1,1.13-.5,4.9,4.9,0,0,1,1.28-.19,2.93,2.93,0,0,1,2,.62,2.18,2.18,0,0,1,.7,1.74,2.82,2.82,0,0,1-.52,1.51,14.37,14.37,0,0,1-1.65,2.06l-1.77,1.9h4V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M399.41,299.16A2.76,2.76,0,0,1,397,298a5.68,5.68,0,0,1-.81-3.33c0-3,1.06-4.45,3.19-4.45s3.19,1.49,3.19,4.45a5.68,5.68,0,0,1-.81,3.33A2.76,2.76,0,0,1,399.41,299.16Zm0-.93c1.39,0,2.09-1.17,2.09-3.52a5.39,5.39,0,0,0-.51-2.66,1.87,1.87,0,0,0-3.15,0,5.38,5.38,0,0,0-.52,2.66C397.32,297.06,398,298.23,399.41,298.23Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M405.55,299V291.8l-2,.91V292l2.3-1.63h.79V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M409.43,299l3.24-7.69H409l-.35,1.36H408v-2.27h5.76v.71l-3.2,7.89Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g id=\\\"_2016\\\" data-name=\\\"2016\\\">\\n\\t\\t\\t\\t\\t<path d=\\\"M251.85,299v-.75l2.39-2.59c.46-.51.84-.94,1.12-1.3a5.57,5.57,0,0,0,.62-.95,2,2,0,0,0,.19-.77c0-1-.56-1.45-1.68-1.45a4.92,4.92,0,0,0-2.35.68V291a4.06,4.06,0,0,1,1.13-.5,4.84,4.84,0,0,1,1.28-.19,2.93,2.93,0,0,1,2,.62,2.22,2.22,0,0,1,.7,1.74,2.91,2.91,0,0,1-.52,1.51,14.37,14.37,0,0,1-1.65,2.06l-1.77,1.9h4V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M261.63,299.16a2.76,2.76,0,0,1-2.38-1.12,5.68,5.68,0,0,1-.81-3.33c0-3,1.06-4.45,3.19-4.45s3.19,1.49,3.19,4.45A5.68,5.68,0,0,1,264,298,2.76,2.76,0,0,1,261.63,299.16Zm0-.93c1.39,0,2.09-1.17,2.09-3.52a5.39,5.39,0,0,0-.51-2.66,1.87,1.87,0,0,0-3.15,0,5.27,5.27,0,0,0-.52,2.66C259.54,297.06,260.24,298.23,261.63,298.23Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M267.77,299V291.8l-2,.91V292l2.3-1.63h.79V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M273.26,299.16a2.81,2.81,0,0,1-2.14-.81,3.1,3.1,0,0,1-.78-2.24,4.09,4.09,0,0,1,.34-1.61,9.47,9.47,0,0,1,1.08-1.86l1.59-2.23h1.19l-1.77,2.47-.36.5-.29.44a2.41,2.41,0,0,1,1.63-.58,2.38,2.38,0,0,1,1.31.36,2.45,2.45,0,0,1,.88,1,3.57,3.57,0,0,1,.32,1.55,3.16,3.16,0,0,1-.38,1.56,2.61,2.61,0,0,1-1.05,1.06A3.28,3.28,0,0,1,273.26,299.16Zm-1.92-3a2.19,2.19,0,0,0,.51,1.55,1.8,1.8,0,0,0,1.42.56,1.86,1.86,0,0,0,1.43-.55,2.1,2.1,0,0,0,.53-1.5,2.35,2.35,0,0,0-.48-1.53,1.59,1.59,0,0,0-1.28-.57,2.17,2.17,0,0,0-1.23.36,2.54,2.54,0,0,0-.85,1,3.11,3.11,0,0,0,0,.32C271.34,295.89,271.34,296,271.34,296.12Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t\\t<g id=\\\"_2015\\\" data-name=\\\"2015\\\">\\n\\t\\t\\t\\t\\t<path d=\\\"M114.59,299v-.75l2.39-2.59c.46-.51.83-.94,1.12-1.3a5.57,5.57,0,0,0,.62-.95,2,2,0,0,0,.19-.77c0-1-.56-1.45-1.68-1.45a4.89,4.89,0,0,0-2.35.68V291a4,4,0,0,1,1.12-.5,4.91,4.91,0,0,1,1.29-.19,2.88,2.88,0,0,1,2,.62,2.19,2.19,0,0,1,.71,1.74,2.91,2.91,0,0,1-.52,1.51,15.12,15.12,0,0,1-1.65,2.06l-1.77,1.9h4V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M124.37,299.16A2.76,2.76,0,0,1,122,298a5.68,5.68,0,0,1-.81-3.33c0-3,1.06-4.45,3.19-4.45s3.19,1.49,3.19,4.45a5.68,5.68,0,0,1-.81,3.33A2.76,2.76,0,0,1,124.37,299.16Zm0-.93c1.39,0,2.09-1.17,2.09-3.52a5.39,5.39,0,0,0-.51-2.66,1.87,1.87,0,0,0-3.15,0,5.27,5.27,0,0,0-.52,2.66C122.28,297.06,123,298.23,124.37,298.23Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M130.51,299V291.8l-2,.91V292l2.3-1.63h.79V299Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t\\t<path d=\\\"M133.09,298.62v-.94a4.57,4.57,0,0,0,1.12.41,5.17,5.17,0,0,0,1.19.13,2.18,2.18,0,0,0,1.54-.51,1.85,1.85,0,0,0,.54-1.4A1.71,1.71,0,0,0,137,295a1.84,1.84,0,0,0-1.33-.46,4.44,4.44,0,0,0-1,.12,3.5,3.5,0,0,0-.84.33l-.66-.51.51-4.07H138v.92h-3.6l-.33,2.7a4,4,0,0,1,.8-.29,3.55,3.55,0,0,1,.86-.1,3.23,3.23,0,0,1,1.46.32,2.39,2.39,0,0,1,1,.92,2.86,2.86,0,0,1,.35,1.43,3,3,0,0,1-.38,1.52,2.42,2.42,0,0,1-1.07,1,3.61,3.61,0,0,1-1.64.35,5.57,5.57,0,0,1-1.25-.14A3.78,3.78,0,0,1,133.09,298.62Z\\\" style=\\\"fill: #1d1d1b\\\" />\\n\\t\\t\\t\\t</g>\\n\\t\\t\\t</g>\\n\\t\\t\\t<g id=\\\"graphMarkers\\\">\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"242.86\\\" x2=\\\"608\\\" y2=\\\"242.86\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"205.71\\\" x2=\\\"608\\\" y2=\\\"205.71\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"168.57\\\" x2=\\\"608\\\" y2=\\\"168.57\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"131.43\\\" x2=\\\"608\\\" y2=\\\"131.43\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"94.29\\\" x2=\\\"608\\\" y2=\\\"94.29\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"57.14\\\" x2=\\\"608\\\" y2=\\\"57.14\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t\\t<line x1=\\\"58\\\" y1=\\\"20\\\" x2=\\\"608\\\" y2=\\\"20\\\" style=\\\"fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px;opacity: 0.5\\\" />\\n\\t\\t\\t</g>\\n\\t\\t\\n\\t\\t\\n\\t\\t\\t\\n\\t\\t\\t\\n\\t\\t</svg>\\n\\n\\n\\n\\t</div>\\n\\t<button id=\\\"graphButton1\\\">State 1</button>\\n\\t<button id=\\\"graphButton2\\\">State 2</button>\\n\\t<button id=\\\"graphButton3\\\">State 3</button>\\n\\t<button id=\\\"graphButton4\\\">State 4</button>\\n\\n\",\"css\":\"body {\\n\\tbackground-color: white;\\n}\\n\\n#graphContainer {\\n\\twidth: 640px;\\n\\theight: 329px;\\n}\\n\",\"js\":\"var bar1 = document.getElementById(\\\"bar1\\\");\\nvar bar2 = document.getElementById(\\\"bar2\\\");\\nvar bar3 = document.getElementById(\\\"bar3\\\");\\nvar bar4 = document.getElementById(\\\"bar4\\\");\\n\\nfunction drawBars(vals) {\\n  const offset = \\\"-=0.6\\\";\\n  const graphLa = gsap.timeline({\\n    defaults: {\\n      ease: \\\"power2.inOut\\\",\\n      duration: 0.7,\\n      overwrite: \\\"auto\\\"\\n    }\\n  })\\n  .to(bar1, { drawSVG: vals[0] })\\n  .to(bar2, { drawSVG: vals[1] }, offset)\\n  .to(bar3, { drawSVG: vals[2] }, offset)\\n  .to(bar4, { drawSVG: vals[3] }, offset)\\n}\\n\\n\\n//\\tState 1 Animation\\ndocument.querySelector(\\\"#graphButton1\\\").addEventListener(\\\"click\\\", () => drawBars([\\\"0px 111px\\\", \\\"0px 126px\\\", \\\"0px 141px\\\", \\\"0px 148px\\\"]) );\\ndrawBars([\\\"0px 111px\\\", \\\"0px 126px\\\", \\\"0px 141px\\\", \\\"0px 148px\\\"]); // set the intial state\\n\\n//\\tState 2 Animation\\ndocument.querySelector(\\\"#graphButton2\\\").addEventListener(\\\"click\\\", () => drawBars([\\\"0px 100px\\\", \\\"0px 14px\\\", \\\"0px 185px\\\", \\\"0px 219px\\\"]) );\\n\\n//\\tState 3 Animation\\ndocument.querySelector(\\\"#graphButton3\\\").addEventListener(\\\"click\\\", () => drawBars([\\\"0px 55px\\\", \\\"0px 74px\\\", \\\"0px 85px\\\", \\\"0px 96px\\\"]) );\\n\\n//\\tState 4 Animation\\ndocument.querySelector(\\\"#graphButton4\\\").addEventListener(\\\"click\\\", () => drawBars([\\\"0px 11px\\\", \\\"0px 11px\\\", \\\"0px 19px\\\", \\\"0px 19px\\\"]) );\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-06-17T12:51:51.000Z\",\"updated_at\":\"2020-06-23T14:07:48.000Z\",\"title\":\"Graph Animation\",\"description\":\"\",\"slug_hash\":\"ZEQBemg\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":45259288,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0172c255-ee58-7f86-9bed-67bcab0ec73c\",\"is_new_editor_pen\":false,\"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-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"}