css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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

    <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">
  <filter id="glow" width="200%" height="200%" filterUnits="userSpaceOnUse">
    <feGaussianBlur stdDeviation="12.5" result="coloredBlur"/>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    <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 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 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 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 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 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 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 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>
    <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>
  background-color: #1C1C51;
  display: flex;
  font-family: "tamarillo-jf";
  font-size: 6em;
  color: white;
  text-align: center;
  margin: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;

  display: flex;
  flex-direction: row;
  justify-content: center;

  position: absolute;
  cursor: pointer;
  margin: 250px 100px 0px 0px;

  opacity: 0.55;
  background-color: white;
  border-radius: 50%;
  background-size: 100% 100%;
              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(){
    on = false;
    TweenMax.to('.light',.2, {filter:'', opacity: 0.55})
    TweenMax.to('.switchnob',.2, {y: '+=90'})
    TweenMax.to('.switchnob',.2, {y: '-=90'})
    TweenMax.staggerTo('.light', .5, {filter:'url(\'#glow\')', opacity: 1}, .04)
    on = true;


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');
 function animm(elm){   

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

🕑 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.
Loading ..................