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

CSS

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

JS

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

              
            
!
999px

Console