Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
<svg viewBox="0 0 1149 700" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round">
  <g id="Magic">
    <g id="wand" class="wand" fill-rule="nonzero">
      <path d="M600.358 312.652l233.173-204.664s10.212 1.276 10.212 12.339-230.62 208.494-230.62 208.494c-13.616 0-14.183-10.779-12.765-16.169z" fill="#f20505"/>
      <path d="M691.84 261.166c.944-10.77-1.619-14.848-14.892-16.594l-70.234 62.015c11.289.75 13.779 5.673 14.494 16.276 30.741-26.42 70.632-61.697 70.632-61.697z" fill="#fff" fill-opacity=".27"/>
    </g>
    <path id="star" class="star" d="M584.189 242.444l2.988 9.628 8.075 3.562-8.075 3.563-2.988 9.628-2.987-9.628-8.075-3.563 8.075-3.562 2.987-9.628z" fill="#fff" fill-rule="nonzero"/>
    <path id="star1" class="star" d="M625.038 210.074l1.839 5.925 4.969 2.192-4.969 2.192-1.839 5.925-1.839-5.925-4.969-2.192 4.969-2.192 1.839-5.925z" fill="#fff" fill-rule="nonzero"/>
    <path id="star2" class="star" d="M673.491 311.384l1.838 5.925 4.97 2.193-4.97 2.192-1.838 5.925-1.839-5.925-4.969-2.192 4.969-2.193 1.839-5.925z" fill="#fff" fill-rule="nonzero"/>
    <path id="star3" class="star" d="M741.288 232.411l2.644 8.517 7.143 3.151-7.143 3.152-2.644 8.517-2.643-8.517-7.143-3.152 7.143-3.151 2.643-8.517z" fill="#fff" fill-rule="nonzero"/>
    <g class="up1">
    <path  fill="none" d="M514.394 490.393h58.683v58.683h-58.683z"/>
    <path d="M543.663 503.054c5.252-5.252 13.766-5.252 19.018 0 5.252 5.252 5.252 13.767 0 19.018l-17.188 19.399a2.445 2.445 0 01-3.66 0l-17.189-19.399c-5.252-5.251-5.252-13.766 0-19.018 5.252-5.252 13.767-5.252 19.019 0z" fill="#fcaacf"/>
  </g>
    <g class="up2" >
    <path class="up" fill="none" d="M513.003 488.19h60.706v60.706h-60.706z"/>
    <path d="M564.548 496.34a1.517 1.517 0 00-2.146 0l-2.587 2.587-.001-.001-29.549 29.55v.001l-5.065 5.065a1.517 1.517 0 102.146 2.146l4.936-4.935 9.107 10.277a2.529 2.529 0 003.786 0l17.781-20.068c5.433-5.432 5.433-14.241 0-19.674a14.27 14.27 0 00-.623-.586l2.215-2.216a1.517 1.517 0 000-2.146zm-21.266 4.948c3.649-3.649 8.822-4.847 13.472-3.594L528.248 526.2l-4.641-5.238c-5.433-5.432-5.433-14.241 0-19.674s14.242-5.433 19.675 0z" fill="#fcaacf"/>
      </g>
    <g class="up3" >
    <path fill="none" d="M516.402 485.266h51.326v51.326h-51.326z"/>
    <path d="M543.85 532.315a3.924 3.924 0 01-3.924-3.924c0-3.045-.709-6.049-2.071-8.773l-1.938-3.877-5.614-4.812v-14.97l7.485-6.416h16.951a6.415 6.415 0 016.341 5.44l2.303 14.97c.598 3.887-2.409 7.392-6.341 7.392h-9.096l.965 3.861c.425 1.697.639 3.438.639 5.187v1.645a4.277 4.277 0 01-4.277 4.277h-1.423z" fill="#f20505"/>
    <path d="M520.679 517.345c0 1.181.958 2.138 2.139 2.138h7.485a2.138 2.138 0 002.138-2.138v-25.664a2.138 2.138 0 00-2.138-2.138h-7.485a2.139 2.139 0 00-2.139 2.138v25.664z" fill="#07038c"/>
    <path d="M520.679 517.345c0 1.181.958 2.138 2.139 2.138h7.485a2.138 2.138 0 002.138-2.138v-25.664a2.138 2.138 0 00-2.138-2.138h-7.485a2.139 2.139 0 00-2.139 2.138v25.664z" fill="#fff" fill-opacity=".01"/>
    </g>
    <g class="up4" >
    <path  fill="none" d="M514.246 481.129h56.251v56.251h-56.251z"/>
    <path d="M544.328 485.817a4.3 4.3 0 00-4.3 4.3c0 3.337-.777 6.629-2.27 9.614l-2.125 4.25-6.152 5.274v16.406l8.203 7.032h18.578a7.03 7.03 0 006.949-5.962l2.525-16.407c.655-4.259-2.641-8.101-6.95-8.101h-9.969l1.058-4.232c.465-1.859.7-3.768.7-5.684v-1.803a4.687 4.687 0 00-4.687-4.687h-1.56z" fill="#f20505"/>
    <path d="M518.934 502.223a2.343 2.343 0 012.344-2.343h8.203a2.344 2.344 0 012.344 2.343v28.126a2.345 2.345 0 01-2.344 2.344h-8.203a2.344 2.344 0 01-2.344-2.344v-28.126z" fill="#07038c"/>
    <path d="M518.934 502.223a2.343 2.343 0 012.344-2.343h8.203a2.344 2.344 0 012.344 2.343v28.126a2.345 2.345 0 01-2.344 2.344h-8.203a2.344 2.344 0 01-2.344-2.344v-28.126z" fill="#fff" fill-opacity=".01"/>
    </g>
    <g id="hat">
      <path d="M459.944 464.821v98.725c40.752 41.873 152.394 31.947 180.411 0v-99.679c44.607-6.911 76.452-18.705 74.888-33.778v-12.765l-.014.101c.009-.175.014-.351.014-.526 0-22.09-73.915-39.997-165.093-39.997-91.178 0-165.093 17.907-165.093 39.997 0 .146.003.293.01.439a.121.121 0 01-.01-.014v17.02c10.665 14.931 39.014 24.827 74.887 30.477z" fill="#07038c"/>
      <path d="M385.057 434.344v-17.02c42.55 60.846 324.229 44.252 330.186 0v12.765c4.68 45.103-289.764 60.846-330.186 4.255z" fill-opacity=".14" fill-rule="nonzero"/>
      <ellipse cx="550.15" cy="413.92" rx="90.205" ry="17.445" fill="#b0d8fc"/>
    </g>
  </g>
</svg>
</div>
            
          
!
            
              body {
	background-color: #16181D;
	background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
svg {
  max-width: 800px;
  width: 100%;
   background: #99f3eb;
}

            
          
!
            
              const path = 'M86.98488,14.92799 C71.84988,13.56499 51.80888,5.27599 41.58088,10.83999 31.35288,16.40399 21.58288,40.74399 25.61488,48.31399 29.64788,55.88499 58.84788,78.98699 67.65088,79.75399 76.45488,80.52099 110.28488,81.68599 120.26988,70.54499 130.25588,59.40399 143.94488,35.57199 143.94488,25.34499 143.94488,15.11799 139.02288,-12.76101 130.51888,-23.95001 122.01388,-35.13801 106.61788,-41.00901 92.91688,-41.78701 69.81088,-43.10001 40.51188,-40.38501 23.28788,-30.62901 9.84788,-23.01601 -10.15112,30.60099 -10.15112,30.60099 ';
const path2 = "M10.65287,-34.58001 C25.78687,-35.94301 45.82887,-44.23201 56.05687,-38.66801 66.28487,-33.10401 76.05487,-8.76401 72.02187,-1.19401 67.98987,6.37699 38.78987,29.47899 29.98587,30.24599 21.18287,31.01299 -12.64713,32.17799 -22.63313,21.03699 -32.61813,9.89599 -46.30713,-13.93601 -46.30713,-24.16301 -46.30713,-34.39001 -41.38613,-62.26901 -32.88113,-73.45801 -24.37713,-84.64601 -8.98113,-90.51701 4.72087,-91.29501 27.82587,-92.60801 57.12587,-89.89301 74.34887,-80.13701 87.78887,-72.52401 107.78887,-18.90701 107.78887,-18.90701 "
gsap.registerPlugin(MotionPathPlugin, CustomEase, CustomWiggle);

CustomWiggle.create("magicWiggle", {wiggles: 5, type: "anticipate"});


gsap.set('#wand',{align: "path"})
gsap.set(".star", {opacity: 0})

let tl = gsap.timeline({defaults: { duration: 1, ease: "elastic" }});
tl.to("#wand", {
  duration: 1.5,
  transformOrigin: "left 100%",
  ease: "power1.out",
   motionPath: path,
})
.to(".star",{
  duration: 0.1,
  opacity: 1,
  yoyo: true,
  repeat: 3,
  stagger: {
      amount: 0.1, 
    }
}, ">-1")
.to("#hat", {
  translateX: -10, 
  ease: "magicWiggle",
}, ">-0.5")

.to(".up3", {
  translateY: -200
})
.to(".up3", {
  duration: 0.3,
  transformOrigin: 'center center',
  scale: 1.5,
  yoyo: true,
  repeat: 1,
  ease: "back.out(1.4)"
},">-0.6")
.to(".wand", {
  duration: 0.2,
 translateX: 20,
  translateY: -10,
  ease: "back.out(1.4)"
},">-0.2")

.to(".wand", {
  transformOrigin: "left 100%",
  ease: "power1.out",
   motionPath: path
})
.to(".up3", {
  ease: "power1.out",
  opacity: 0,
  translateY: 10
},">-0.2")
.to("#wand", {
  transformOrigin: "left 100%",
  ease: "power1.out",
   motionPath: path
},">-0.2")
.to(".star",{
  duration: 0.1,
  opacity: 1,
  yoyo: true,
  repeat: 3,
  stagger: {
      amount: 0.1, 
    }
}, ">-1")
.to("#hat", {
  translateX: -10, 
  ease: "magicWiggle",
}, ">-1")
.to(".up4", {
  translateY: -300
})
.to("#wand", {
  transformOrigin: "center center",
  rotate: -180, 
  translateX: -50,
  translateY: -50,
  ease: "magicWiggle",
},">-0.5")
.to(".up4", {
  transformOrigin: "center center",
  duration: 0.5,
  translateY: -290,
  scale: 1.1,
  yoyo: true,
  repeat: -1,
  ease: "power0.none"
},">-0.7")
.set(".star", {translateX: -100, translateY: -30})
.to(".star",{
  duration: 0.2,
  opacity: 1,
  scale: 1.2,
  yoyo: true,
  repeat: -1,
  stagger: {
      amount: 0.2, 
    }
})
//Tweak the motion path
// MotionPathHelper.create(".wand")
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console