CodePen Embed - Christmas Lights




<div class="anim-container" id="container">
  <div class="hbox align-center">
  <div class="switch" id="switch">

<svg width="57px" height="212px" viewBox="124 -23 357 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="1482704683_light-switch" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(124.000000, -23.000000)">
        <g id="light-switch">
            <g id="light-switch_1_">
                <rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="356" height="512" rx="71"></rect>
                <path d="M178.389,100.598 C188.275,100.598 196.362,92.51 196.362,82.633 C196.362,72.668 188.275,64.668 178.389,64.668 C168.424,64.668 160.336,72.668 160.336,82.633 C160.336,92.51 168.424,100.598 178.389,100.598 Z" id="Shape" fill="#EAEAEA"></path>
                <path d="M178.389,406.007 C168.424,406.007 160.336,413.998 160.336,423.972 C160.336,433.849 168.424,441.937 178.389,441.937 C188.275,441.937 196.362,433.849 196.362,423.972 C196.362,413.998 188.276,406.007 178.389,406.007 Z" id="Shape" fill="#EAEAEA"></path>
                <path d="M302.355,0 L53.896,0 C24.176,0 0,24.176 0,53.896 L0,458.105 C0,487.824 24.176,512 53.896,512 L302.356,512 C332.076,512 356.252,487.824 356.252,458.104 L356.252,53.896 C356.251,24.176 332.075,0 302.355,0 Z M338.286,458.104 C338.286,477.921 322.172,494.034 302.356,494.034 L53.896,494.034 C34.084,494.034 17.966,477.92 17.966,458.104 L17.966,53.896 C17.966,34.079 34.084,17.966 53.896,17.966 L302.356,17.966 C322.173,17.966 338.286,34.08 338.286,53.896 L338.286,458.104 Z" id="Shape" fill="#CDCDCD"></path>
                <polygon id="Shape" fill="#CCCCCC" points="131.686 284.742 131.686 353.366 223.574 353.366 223.574 284.742 223.574 148.3 131.686 148.3"></polygon>
                <rect id="Rectangle-2" class="switchnob" fill="#FAFAFA" x="148" y="166" width="60" height="75"></rect>
            </g>
        </g>
    </g>
</svg>

    
  </div>
    <div class="lights vbox">
      <h1> Merry Christmas! </h1>
<svg width="732px" height="75px" viewBox="114 88 732 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
  <filter id="glow" width="200%" height="200%" filterUnits="userSpaceOnUse">
    <feGaussianBlur stdDeviation="12.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
    <g id="Light1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(129.000000, 117.000000) rotate(9.000000) translate(-129.000000, -117.000000) translate(119.000000, 89.000000)">
        <ellipse class="light" id="Oval" fill="#FF3E3E" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="-5.68434189e-14" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(229.000000, 117.000000) rotate(-9.000000) translate(-229.000000, -117.000000) translate(219.000000, 89.000000)">
        <ellipse class="light" id="Oval" fill="#50F446" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="4.26325641e-14" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(329.000000, 117.000000) rotate(5.000000) translate(-329.000000, -117.000000) translate(319.000000, 89.000000)">
        <ellipse class="light" id="Oval" fill="#FF9F19" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="-7.10542736e-15" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(429.000000, 117.000000) rotate(-2.000000) translate(-429.000000, -117.000000) translate(419.000000, 89.000000)">
        <ellipse class="light" id="Oval" fill="#221DFF" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="-1.42108547e-14" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(529.000000, 117.000000) rotate(-9.000000) translate(-529.000000, -117.000000) translate(519.000000, 89.000000)">
        <ellipse class="light"  id="Oval" fill="#FFFFFF" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="2.84217094e-14" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy-5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(629.000000, 117.000000) rotate(18.000000) translate(-629.000000, -117.000000) translate(619.000000, 89.000000)">
        <ellipse class="light"  id="Oval" stroke="#F51F1F" fill="#FF3E3E" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="-1.42108547e-14" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy-7" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(729.000000, 117.000000) rotate(3.000000) translate(-729.000000, -117.000000) translate(719.000000, 89.000000)">
        <ellipse class="light"  id="Oval" fill="#50F346" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="2.13162821e-14" width="16" height="22" rx="4"></rect>
    </g>
    <g id="Light1-Copy-6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(829.000000, 117.000000) rotate(-13.000000) translate(-829.000000, -117.000000) translate(819.000000, 89.000000)">
        <ellipse class="light"  id="Oval" fill="#FF9F1A" cx="10" cy="37.5" rx="10" ry="18.5"></ellipse>
        <rect id="Rectangle" fill="#496E4C" x="2" y="0" width="16" height="22" rx="4"></rect>
    </g>
    <path d="M137,94 C137,94 213.5,102 227,95.5 C240.5,89 319,89.0008917 330.5,91.5 C342,93.9991083 423.5,99.5 431,92.5 C438.5,85.5 511,99.5 529,91 C547,82.5 635.5,96.5 635.5,96.5 C635.5,96.5 720,104 735,97.5 C750,91 826,96.5 826,96.5" id="Path-2" stroke="#496E4C" stroke-width="1" fill="none"></path>
  </svg>
    </div>
  </div>
  </div>

body{
  background-color: #1C1C51;
  display: flex;
  font-family: "tamarillo-jf";
}
h1{
  font-size: 6em;
  color: white;
  text-align: center;
  margin: 25px;
}
.anim-container{
  flex: 1;
}
.vbox{
  display: flex;
  flex-direction: column;
}

.hbox{
  display: flex;
  flex-direction: row;
}
.align-center{
  justify-content: center;
}

.switch{
  position: absolute;
  cursor: pointer;
  margin: 250px 100px 0px 0px;
}

.light{
  opacity: 0.55;
}
.lights{
}
.dot{
  width:5px;
  height:5px;
  position:absolute;
  background-color: white;
  border-radius: 50%;
  background-size: 100% 100%;
}

View Compiled

var lightswitch = document.getElementById("switch"),
    on = false;
lightswitch.addEventListener('click', toggleLights, false);

TweenMax.set('.switchnob', {y: '+=90'})

var tl = new TimelineMax({delay: .5});  

function toggleLights(){
  if(on){
    on = false;
    TweenMax.to('.light',.2, {filter:'', opacity: 0.55})
    TweenMax.to('.switchnob',.2, {y: '+=90'})
  }else{
    TweenMax.to('.switchnob',.2, {y: '-=90'})
    TweenMax.staggerTo('.light', .5, {filter:'url(\'#glow\')', opacity: 1}, .04)
    on = true;
  }
}

TweenLite.set(".anim-container",{perspective:600})

var total = 30;
var warp = document.getElementById("container"),  w = window.innerWidth , h = window.innerHeight;
 
 for (i=0; i<total; i++){ 
   var Div = document.createElement('div');
   TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
   warp.appendChild(Div);
   animm(Div);
 }
 
 function animm(elm){   
   TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
   TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
   TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
 };

function R(min,max) {return min+Math.random()*(max-min)};

This Pen is owned by Jason Knott on CodePen.

See more by @jgknott on CodePen

External CSS

//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js

External CSS

External JavaScript