CodePen Embed - happy halloween

Live

This Pen is owned by Sarah Drasner on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__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\":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\":\"rMEdjB\",\"auto_save\":true},\"hashid\":\"rMEdjB\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=18\",\"order\":2,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js?r=19\",\"order\":3,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"happy halloween\",\"halloween\",\"spooky\",\"gsap svg animation\",\"motion along a path\"],\"id\":10622436,\"user_id\":28963,\"html\":\"<svg class=\\\"moon\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" viewBox=\\\"0 0 100 100\\\" width=\\\"100\\\" height=\\\"100\\\">\\n  <circle r=\\\"30\\\" fill=\\\"#fff\\\" cx=\\\"70\\\" cy=\\\"70\\\" />\\n</svg>\\n\\n<div class=\\\"back ground\\\"></div>\\n<div class=\\\"mid ground\\\"></div>\\n<div class=\\\"frontmid ground\\\"></div>\\n<div class=\\\"front ground\\\"></div>\\n<div class=\\\"horseman\\\"></div>\\n\\n<svg class=\\\"pumpkin\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" width=\\\"120\\\" height=\\\"120\\\" viewBox=\\\"0 0 426 426\\\">\\n  <defs>\\n    <radialGradient id=\\\"radial-gradient\\\" cx=\\\"213.02\\\" cy=\\\"213.02\\\" r=\\\"213.02\\\" gradientUnits=\\\"userSpaceOnUse\\\">\\n      <stop offset=\\\"0\\\" stop-color=\\\"#f69449\\\"/>\\n      <stop offset=\\\"0.7\\\" stop-color=\\\"#e99623\\\" stop-opacity=\\\"0.8\\\"/>\\n      <stop offset=\\\"1\\\" stop-color=\\\"#d7ba95\\\" stop-opacity=\\\"0\\\"/>\\n    </radialGradient>\\n  </defs>\\n  <title>pumpkin</title>\\n  <g id=\\\"pumpkin\\\">\\n    <circle id=\\\"back-area\\\" cx=\\\"213\\\" cy=\\\"213\\\" r=\\\"213\\\" opacity=\\\"0.75\\\" fill=\\\"url(#radial-gradient)\\\"/>\\n    <path id=\\\"p-back\\\" d=\\\"M329.5,132.4c-29.4-27.7-58.5-32-74.9-31.6s-25.5,9.8-32.1,16.5c-1.9,1.9-6.7,3.4-12.8,4.6a31.3,31.3,0,0,1-2.8-3.7c-5.8-9.4-15.2-19.2-14.3-25.5s34.8-2.2,42.4-5.4,1.4-18.3,16.5-21.4,25.3-10.6,39.2-24.5S328.6.9,328.6.9,291.4,23.2,275,23.2s-28,8.9-36.1,15.2-19.6-.3-28.6,13.4-.6,19.5-12.5,22.7-8.4,6.7-28.9,2.7c-10.5-2.1-20.1,0-28.3,3.6-3.1-3.8-13.3-14.6-28.3-17.4C94,59.8,76.6,66,68.1,73.6S50.4,100.9,49,129.4s2.6,45,12,53.9S74.8,194,74.8,194l.6-1.6c-10.1,26.8-7.9,58.2-1.5,75.9C82.9,293.3,119,317,119,317s48.1,22.2,67.8,25.3c7,1.1,18.2,1.7,30.9,1.3l1.1.9v-.9c22.6-.7,49.6-4.2,65.6-12.3,25.3-12.8,68.2-50.9,73.1-74.5S358.8,160.1,329.5,132.4Zm-235,30.8a74.4,74.4,0,0,0-17.6,25.7l4.2-10.5S59.7,168.9,61,134.2s11.2-49,22.3-54.8,27.3-9.8,35.3-4,10.2,9.4,10.2,9.4l6.7-1.4a93.7,93.7,0,0,0-14.2,9.9C111,101.7,96.7,116.5,99.4,128s.9,15.5,9.4,17.3,29.4-12.8,31.2-16.4,3.6-31.7,3.6-31.7,11.2-3.6,18.3,1.8,8,15.7,4.5,24.1c-.6,1.4-1.3,2.9-2.1,4.3l-3.7.6C145.7,130.7,124.7,135.1,94.5,163.2ZM132.8,120c-4.5,7.6-7.5,10.6-11.5,10.6a9.5,9.5,0,0,1-6.3-2.1s-6.1-3.6,1.3-14.7,16.9-11.6,16.9-11.6S137.2,112.4,132.8,120Z\\\" fill=\\\"#010101\\\" fill-rule=\\\"evenodd\\\"/>\\n    <g id=\\\"face\\\">\\n      <path d=\\\"M147.5,248.8s.4-36.7,6.3-44.6c0,0,20.4,28.1,41,29.5,0,0-19.5,10.7-31.6,15.2S147.5,248.8,147.5,248.8Z\\\" fill=\\\"#f8951d\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M233.1,259.1s4-37.1,6.7-40.2,34.7,23.2,29.8,26.8S233.1,259.1,233.1,259.1Z\\\" fill=\\\"#f8951d\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M295.1,215.8s.4-43.7-1.3-51.2c0,0,21.9,17.4,20.1,22.8S295.1,215.8,295.1,215.8Z\\\" fill=\\\"#f8951d\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M327.7,218.9c-5.4,11.2-4,22.3-7.6,24.1s-8.9-6.7-11.2,1.8-3.6,15.6-3.6,15.6-15.2-2.1-15.2,3.6-4,12.4-4,12.4-10.7-7.6-15.2-3.6-5.7,12.5-11.1,9.8-15.6.4-17.4,2.7-11.6,4-13.4-2.2-12.1,7.1-14.3,7.1-7.1-4-13.8-5.8-11.5,7.6-11.5,7.6l-8.5-17s-7.6,13.4-14.7,11.6S148,271,148,271s13.4,25.4,21.4,25.9,13.4,9.4,16.5,12.1,14.6-2.2,17.8-.4,6.7,14.7,13.4,11.2,6.7-11.2,17.9-6.3,20.2,12.5,23.7,3.6,22.2-10.7,26.2-12.1.9-10.7,11.6-14.7,13.4-12.2,17-18.8,17.9-13.7,15.6-21.8S327.7,218.9,327.7,218.9Z\\\" fill=\\\"#f8951d\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M327.7,218.9s-.9,22.8,1.3,30.8-12.1,15.2-15.6,21.8-6.3,14.7-17,18.8-7.6,13.4-11.6,14.7-22.8,3.1-26.2,12.1c-1.9,5-5.6,4.8-10.5,2.8-4.4,2.5-12-3.1-21-7.1-4.3.9-5.9,4.7-10.1,6.9-2.5,1.4-4.6.3-6.4-1.5l-1.4.9c-6,3.2-9.5-6.9-12.4-10.3-4.3.8-9.1,1.9-10.9.3,3.7-1,8.2-2.1,10-1.1,3.9,4.2,7.4,14.4,13.4,11.2l1.4-.9c5.2-3.6,6.1-9.5,15.4-5.8s17.6,10,22,7.5a6.5,6.5,0,0,0,2.7-3.5c3.5-8.9,22.2-10.7,26.2-12.1s.9-10.7,11.6-14.7,13.4-12.2,17-18.8,17.9-13.7,15.6-21.8a37.3,37.3,0,0,1-1-6.1c-2.1,1.1-4.6-1-6.8-1.7a3,3,0,0,1-1.2,1.1,3.1,3.1,0,0,1-2.4,0,2.7,2.7,0,0,1,3.6-1.2c2.2.7,4.7,2.8,6.6,1.8C323.6,240.9,322.4,229.9,327.7,218.9Z\\\" fill=\\\"#d9c98e\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M151.3,210.1a18.7,18.7,0,0,1,2.4-5.9s20.4,28.1,41,29.5c0,0-19.5,10.7-31.6,15.2-7.9,2.9-12.1,2-14.1,1.1a33.3,33.3,0,0,0,6.3-1.7c12.1-4.5,31.6-15.2,31.6-15.2C172.8,232,158.7,218.5,151.3,210.1Z\\\" fill=\\\"#d9c98e\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M233.1,259.1l.4-3.3c9.7-3.2,25-8.4,28.3-10.8s-12.9-17.7-22.9-24.1a6.3,6.3,0,0,1,.9-2c2.7-3.1,34.7,23.2,29.8,26.8S233.1,259.1,233.1,259.1Z\\\" fill=\\\"#d9c98e\\\" fill-rule=\\\"evenodd\\\"/>\\n      <path d=\\\"M295.1,215.8V204.1c4.7-6.7,10-14.6,10.9-17.5s-5.6-10-11.6-15.4a47.7,47.7,0,0,0-.7-6.7s21.9,17.4,20.1,22.8S295.1,215.8,295.1,215.8Z\\\" fill=\\\"#d9c98e\\\" fill-rule=\\\"evenodd\\\"/>\\n    </g>\\n  </g>\\n</svg>\\n\\n<h1>happy                 halloween</h1>\\n\",\"css\":\"//*------------------------------\\n\\n//looks best full screen\\n//https://codepen.io/sdras/pen/rMEdjB/\\n\\n//*------------------------------\\n\\nbody, html {\\n  width: 100%;\\n  height: 100%;\\n  min-height: 700px;\\n  background: rgb(4,30,43); /* Old browsers */\\nbackground: -moz-linear-gradient(top, rgba(4,30,43,1) 0%, rgba(64,120,134,1) 41%, rgba(212,219,219,1) 69%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%); /* FF3.6-15 */\\nbackground: -webkit-linear-gradient(top, rgba(4,30,43,1) 0%,rgba(64,120,134,1) 41%,rgba(212,219,219,1) 69%,rgba(0,0,0,1) 69%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */\\nbackground: linear-gradient(to bottom, rgba(4,30,43,1) 0%,rgba(64,120,134,1) 41%,rgba(212,219,219,1) 69%,rgba(0,0,0,1) 69%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#041e2b', endColorstr='#000000',GradientType=0 ); /* IE6-9 */\\n  font-family: 'Freckle Face', cursive;\\n}\\n\\n#foreground {\\n  height: 600px;\\n  position: absolute;\\n  margin-top: -200px;\\n  overflow-y: hidden;\\n}\\n\\nh1 {\\n  position: absolute;\\n  top: 550px;\\n  width: 100%;\\n  text-align: center;\\n  font-size: 45px;\\n  color: orange;\\n  white-space: pre;\\n  margin-left: 20px;\\n}\\n\\nspan {\\n  letterspacing: 200px;\\n}\\n\\n.moon {\\n  left: 25%;\\n  position: absolute;\\n  top: 100px;\\n}\\n\\n.horseman {\\n  width: 184px;\\n  height: 123px;\\n  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/horse-hallow5.svg');\\n  animation: horsemove 0.7s steps(15) infinite;\\n  position: absolute;\\n  left: 50%;\\n  margin-left: -100px;\\n  top: 300px;\\n}\\n\\n.pumpkin {\\n  position: absolute;\\n  left: 50%;\\n  margin-left: -100px;\\n  top: 300px;\\n}\\n\\n.ground {\\n  width: 151%;\\n  height: 697px;\\n  position: absolute;\\n  background-size: 800px 716px;\\n  left: 0;\\n  transform: translateZ(0);\\n  backface-visibility: hidden;\\n  perspective: 1000px;\\n}\\n\\n.front {\\n  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowfront4.svg') repeat-x;\\n  background-size: 1000px 871px;\\n  top: -100px;\\n  animation: bk 20s -5s linear infinite;\\n}\\n\\n.frontmid {\\n  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmidfront2.svg') repeat-x;\\n  background-size: 1000px 871px;\\n  top: -100px;\\n  animation: bk 50s -5s linear infinite;\\n}\\n\\n.mid {\\n  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmid2.svg') repeat-x;\\n  background-size: 1000px 871px;\\n  top: -100px;\\n  animation: bk 100s -5s linear infinite;\\n}\\n\\n.back {\\n  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowback2.svg') repeat-x;\\n  background-size: 1000px 871px;\\n  top: -100px;\\n  animation: bk 100s -5s linear infinite;\\n}\\n\\n@keyframes horsemove {\\n  100% { background-position: 0 -1848px; }\\n}\\n\\n@keyframes bk {\\n  100% { background-position: -200% 0; }\\n}\",\"js\":\"function sceneOne() {\\n  var tl = new TimelineMax();\\n\\n  tl.add(\\\"begin\\\", \\\"+=1\\\");\\n  tl.fromTo(\\\".pumpkin\\\", 2, {\\n    scale: 0,\\n    x: 0,\\n    y: 0,\\n    rotation: 180\\n  }, {\\n    scale: 1,\\n    bezier: {\\n      type: \\\"soft\\\",\\n      values: [{\\n        x: 400,\\n        y: 175\\n      }, {\\n        x: 30,\\n        y: 250\\n      }],\\n      autoRotate: false\\n    },\\n    rotation: 0,\\n    ease: Circ.easeInOut\\n  }, \\\"begin+=1\\\");\\n  tl.to(\\\"#face, #back-area\\\", 1, {\\n    opacity: 0.5,\\n    yoyo: true,\\n    repeatDelay: 0.65,\\n    repeat: -1,\\n    ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: \\\"none\\\", randomize:  true, clamp: false})\\n  }, \\\"begin+=3\\\");\\n  tl.from(\\\"h1\\\", 2, {\\n    opacity: 0,\\n    ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: \\\"none\\\", randomize:  true, clamp: false})\\n  }, \\\"begin+=3\\\");\\n  tl.from(\\\"h1\\\", 1, {\\n    rotationX: 180,\\n    ease: Sine.easeOut\\n  }, \\\"begin+=3\\\");\\n\\n  return tl;\\n}\\n\\n//add it all to master timeline\\nvar master = new TimelineMax();\\nmaster.add(sceneOne(), \\\"first\\\");\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2016-10-30T20:34:52.000Z\",\"updated_at\":\"2016-11-18T19:18:06.000Z\",\"title\":\"happy halloween\",\"description\":\"Happy halloween! Made with love, greensock, CSS, and SVG.\",\"slug_hash\":\"rMEdjB\",\"head\":\"<link href=\\\"https://fonts.googleapis.com/css?family=Freckle+Face\\\" rel=\\\"stylesheet\\\">\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":9,\"custom_screenshot_filename\":null,\"loves_count\":484,\"pick\":false,\"popularity_score\":4902,\"views_count\":23924,\"pick_visible_at\":null,\"cpid\":\"0158174d-4de0-7ea9-86ff-322bfa998dc1\",\"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"}