Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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;
}

              
            
!

JS

              
                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

Console