Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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="box">
 <div class="text">Click the sky to shoot a Firework :)</div>
  <svg id="svg" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5">
    <path id="bg_bg" fill="#F7D794" d="M0 0h800v600H0z" />
    <g id="whole">
      <rect class="posiBox" id="posiBox" x="0" y="0" width="165" height="170" />

  <g id="stamp">
    <path fill="#fff" d="M316.564 195.835h167.072v208.107H316.564z"/>
    <path d="M501.461 182.298c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v6.949c-3.533 0-6.402 2.868-6.402 6.402 0 3.533 2.869 6.401 6.402 6.401v9.324c-3.533 0-6.402 2.868-6.402 6.401 0 3.534 2.869 6.402 6.402 6.402v12.147h-6.84c.016-.181.024-.365.024-.551 0-3.533-2.869-6.401-6.402-6.401s-6.402 2.868-6.402 6.401c0 .186.008.37.024.551h-9.371c.016-.181.024-.365.024-.551 0-3.533-2.869-6.401-6.402-6.401s-6.401 2.868-6.401 6.401c0 .186.007.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.869-6.401-6.402-6.401s-6.401 2.868-6.401 6.401c0 .186.007.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.869-6.401-6.402-6.401s-6.401 2.868-6.401 6.401c0 .186.007.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-6.109v-12.166c.163.013.328.019.494.019 3.533 0 6.402-2.868 6.402-6.402 0-3.533-2.869-6.401-6.402-6.401-.166 0-.331.006-.494.019v-9.362c.163.013.328.019.494.019 3.533 0 6.402-2.868 6.402-6.401 0-3.534-2.869-6.402-6.402-6.402-.166 0-.331.006-.494.019v-6.987c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.006-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.006-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-8.685h6.086c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402s6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402s6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402s6.402-2.869 6.402-6.402h9.323c0 3.533 2.869 6.402 6.402 6.402s6.402-2.869 6.402-6.402h6.816v8.666z" fill="#ebebeb"/>
  </g>
      <path fill="#596276" d="M316.564 195.835h167.072v160.136H316.564z" />
      <path id="bg" fill="#596276" d="M316.564 195.835h167.072v208.107H316.564z" />
      <clippath id="_clip1">
        <path d="M316.564 195.835h167.072v208.107H316.564z" />
      </clippath>
      <g clip-path="url(#_clip1)">

        <g id="f1" fill="none" stroke="#fff">
          <path id="f_btm1" d="M316.564 195.617v150" stroke-width="1" />
          <g id="f_top1">
            <path class='odd' d="M323.552 167.537l-4.917 18.353" />
            <path d="M316.564 166.617v19" />
            <path class='odd' d="M309.576 167.537l4.918 18.353" />
            <path d="M303.064 170.235l9.5 16.454" />
            <path class='odd' d="M297.472 174.525l13.435 13.435" />
            <path d="M293.182 180.117l16.454 9.5" />
            <path class='odd' d="M290.484 186.629l18.353 4.918" />
            <path d="M289.564 193.617h19" />
            <path class='odd' d="M290.484 200.605l18.353-4.917" />
            <path d="M293.182 207.117l16.454-9.5" />
            <path class='odd' d="M297.472 212.709l13.435-13.435" />
            <path d="M303.064 217l9.5-16.454" />
            <path class='odd' d="M309.576 219.697l4.918-18.352" />
            <path d="M316.564 220.617v-19" />
            <path class='odd' d="M323.552 219.697l-4.917-18.352" />
            <path d="M330.064 217l-9.5-16.454" />
            <path class='odd' d="M335.656 212.709l-13.435-13.435" />
            <path d="M339.947 207.117l-16.455-9.5" />
            <path class='odd' d="M342.644 200.605l-18.352-4.917" />
            <path d="M343.564 193.617h-19" />
            <path class='odd' d="M342.644 186.629l-18.352 4.918" />
            <path d="M339.947 180.117l-16.455 9.5" />
            <path class='odd' d="M335.656 174.525l-13.435 13.435" />
            <path d="M330.064 170.235l-9.5 16.454" />
          </g>
        </g>

        <g id="skytree" fill="#303853">
          <path d="M464.05 270h4v3h-4z" />
          <path d="M464.05 274.205h4v3h-4z" />
          <path d="M464.05 278.41h4v3h-4z" />
          <path d="M471.575 358h-10.95l2.738-54.5h5.475l2.737 54.5z" />
          <path d="M465.15 267h1.9v26h-1.9z" />
          <path d="M462.934 291.252h6.332v4h-6.332z" />
          <path d="M463.65 294.434h4.9v8h-4.9z" />
          <path d="M461.1 301h10l-2.5 7h-5l-2.5-7z" />
        </g>
        <g id="building" fill="#303853">
          <path d="M316.564 326h31.218v77.942h-31.218z" />
          <path d="M336.087 308h31.218v95.942h-31.218z" />
          <path d="M361.301 326h31.218v77.942h-31.218z" />
          <path d="M379.834 348h31.218v55.942h-31.218z" />
          <path d="M433.83 348h31.218v55.942H433.83z" />
          <path d="M398.367 333h31.218v70.942h-31.218z" />
          <path d="M416.9 314h31.218v89.942H416.9z" />
          <path d="M452.418 326h31.218v77.942h-31.218z" />
        </g>
      </g>
    </g>

    <g id="lantern">
      <g class='lan'>
        <path d="M336.087 375.982c0-2.76-2.241-5-5-5-2.76 0-5 2.24-5 5v4c0 2.76 2.24 5 5 5 2.759 0 5-2.24 5-5v-4z" fill="#dc6385" />
        <path fill="#596276" d="M328.058 369.982h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M328.058 383.96h6.057v2.044h-6.057z" />
      </g>
      <g class='lan'>
        <path d="M358.831 371.989c0-2.76-2.24-5-5-5-2.759 0-5 2.24-5 5v4c0 2.759 2.241 5 5 5 2.76 0 5-2.241 5-5v-4z" fill="#f7d794" />
        <path fill="#596276" d="M350.803 365.989h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M350.803 379.967h6.057v2.044h-6.057z" />
      </g>
      <g class='lan'>
        <path d="M381.576 373.978c0-2.76-2.241-5-5-5-2.76 0-5 2.24-5 5v4c0 2.759 2.24 5 5 5 2.759 0 5-2.241 5-5v-4z" fill="#3ed0de" />
        <path fill="#596276" d="M373.547 367.978h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M373.547 381.956h6.057V384h-6.057z" />
      </g>
      <g class='lan'>
        <path d="M404.32 378.011c0-2.759-2.24-5-5-5s-5 2.241-5 5v4c0 2.76 2.24 5 5 5s5-2.24 5-5v-4z" fill="#f3a683" />
        <path fill="#596276" d="M396.292 372.011h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M396.292 385.989h6.057v2.044h-6.057z" />
      </g>
      <g class='lan'>
        <path d="M427.064 375.982c0-2.76-2.24-5-5-5-2.759 0-5 2.24-5 5v4c0 2.76 2.241 5 5 5 2.76 0 5-2.24 5-5v-4z" fill="#dc6385" />
        <path fill="#596276" d="M419.036 369.982h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M419.036 383.96h6.057v2.044h-6.057z" />
      </g>
      <g class='lan'>
        <path d="M449.809 371.989c0-2.76-2.241-5-5-5-2.76 0-5 2.24-5 5v4c0 2.759 2.24 5 5 5 2.759 0 5-2.241 5-5v-4z" fill="#f7d794" />
        <path fill="#596276" d="M441.78 365.989h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M441.78 379.967h6.057v2.044h-6.057z" />
      </g>
      <g class='lan'>
        <path d="M472.553 378.011c0-2.759-2.24-5-5-5-2.759 0-5 2.241-5 5v4c0 2.76 2.241 5 5 5 2.76 0 5-2.24 5-5v-4z" fill="#7b87ed" />
        <path fill="#596276" d="M464.525 372.011h6.057v2.044h-6.057z" />
        <path fill="#596276" d="M464.525 385.989h6.057v2.044h-6.057z" />
      </g>
    </g>
    </g>

  </svg>

</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

$fillColor: #F7D794;


body,html{
  margin: 0;
  padding: 0;
  background: $fillColor;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;  
  font-family: 'Recursive', sans-serif;
}


.box{
  width: 800px;
  height: 600px;
  text-align: center;
}

.text{
  
  color: #fff;
}

#stamp{
  filter:  drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.08));
}
#whole{
  cursor: pointer;

}


              
            
!

JS

              
                
console.clear();

var stColor = gsap.utils.random(["#3ED0DE", "#DC6385", "#F7D794", "#F37A5F"], true);
var tl1 = gsap.timeline({paused: true});

gsap.set(".odd",{
  drawSVG: "20% 100%"
}) 

gsap.set('.posiBox',{
  x: 318,
  y: 195,
  opacity: 0
})



tl1
.addLabel("start")
.from("#f_btm1",{
  drawSVG: "100% 100%",
  duration: 2
})
.to("#f_btm1",{
  opacity: 0,
  duration: 1.5
})
.fromTo("#f_top1",{
  scale:0,
  transformOrigin: "center"
},{
  scale: 1.3,
  duration: 2
},"explo")
.to("#f_top1",{
  opacity: 0,
  y:5,
  duration: 2
})
.to('#bg',{
  fill: "#626C81",
  repeat: 4,
  yoyo: true,
  duration: 0.3,
},"explo") 
.to('#bg',{
  fill: "#596276",
}) 


gsap.set('.lan',{
  transformOrigin: 'center top',
  rotation: 20
})
gsap.to('.lan',{
  transformOrigin: 'center top',
  rotation: -20,
  duration: 2,
  ease: "sine.inOut",
  stagger:{
    each: 1,
    from: "random",
    repeat: -1,
    yoyo: true
  }
}).seek(100)
 
// GET A POINT 

var svg = document.querySelector("#svg");
var skyBox = document.querySelector("#posiBox");
var point = svg.createSVGPoint(); 
var mouse = { x: 0, y: 0 };

window.addEventListener("mousemove", onMouseMove);
function onMouseMove(event) { 
  mouse.x = point.x = event.clientX;
  mouse.y = point.y = event.clientY;
}

function getBgPos(e) {
  
    var matrix = svg.getScreenCTM();

    var skyBoxPoint =  point.matrixTransform(skyBox.getScreenCTM().inverse());
    var fPosX = skyBoxPoint.x.toFixed();
    var fPosY = skyBoxPoint.y.toFixed();
  
    // console.log("(" + skyBoxPoint.x.toFixed() + ", " + skyBoxPoint.y.toFixed() + ")");
  
  
  // GSAP//
  
    gsap.set('#f1',{
      x: fPosX,
      y: fPosY,
    })
  
    gsap.set(".odd",{
    stroke: stColor,
  }) 
  
  tl1.play("start")
}

//SHOOT HANBI
document.addEventListener("click", getBgPos);



              
            
!
999px

Console