cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <svg version="1.1" id="svg-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 354 354" xml:space="preserve"><style type="text/css"> .st0{fill:#63BEDD;} .st1{fill:#A0AFB5;} .st2{fill:#A0AFB5;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} .st3{fill:#FFFFFF;} .st4{fill:none;stroke:#A0AFB5;stroke-width:2;stroke-miterlimit:10;} .st5{fill:#37A0E5;} .st6{fill:#4AD3AC;} .st7{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;} .st8{fill:#FBB03B;} .st9{fill:none;stroke:#F96155;stroke-width:2;stroke-miterlimit:10;} .st10{fill:#F96155;} .st11{fill:#F9F9F9;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill:#E2E6E8;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style><circle id="bg-circle" class="st0" cx="177" cy="177" r="177"/><g id="all-items"><polygon id="envelope-bg" class="st1" points="89 117 91 115 261 115 262 116 264 118 264 236 88 236 88 118 "/><polygon id="envelope-lip" class="st2" points="265 116 176 56 87 116"/><g id="screens"><g id="screen3"><path class="st3" d="M45 270c-2.8 0-5-2.2-5-5V165c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H45z"/><path class="st1" d="M189 161c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H45c-2.2 0-4-1.8-4-4V165c0-2.2 1.8-4 4-4H189M189 159H45c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V165C195 161.7 192.3 159 189 159L189 159z"/><line class="st4" x1="108" y1="184" x2="171" y2="184"/><line class="st4" x1="108" y1="192" x2="171" y2="192"/><line class="st4" x1="108" y1="200" x2="171" y2="200"/><line class="st4" x1="108" y1="208" x2="171" y2="208"/><line class="st4" x1="108" y1="216" x2="171" y2="216"/><line class="st4" x1="108" y1="224" x2="171" y2="224"/><line class="st4" x1="108" y1="232" x2="171" y2="232"/><line class="st4" x1="108" y1="240" x2="171" y2="240"/><line class="st4" x1="108" y1="248" x2="148" y2="248"/><rect x="61.5" y="182.5" class="st5" width="41" height="43"/><path class="st5" d="M102 183v42H62v-42H102M103 182H61v44h42V182L103 182z"/><polygon class="st3" points="77 197 88 204 77 211 "/></g><g id="screen2"><path class="st3" d="M104 231c-2.8 0-5-2.2-5-5V126c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H104z"/><path class="st1" d="M248 122c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H104c-2.2 0-4-1.8-4-4V126c0-2.2 1.8-4 4-4H248M248 120H104c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V126C254 122.7 251.3 120 248 120L248 120z"/><rect x="121" y="144" class="st6" width="39" height="41"/><path class="st6" d="M159 145v39h-37v-39H159M161 143h-41v43h41V143L161 143z"/><polyline class="st7" points="117.7 186.2 133.7 170.3 151.2 187.8 "/><polyline class="st7" points="137.2 173.7 147.5 163.4 161.1 176.9 "/><path class="st3" d="M134.6 154.7c2.1 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7 -3.7-1.7-3.7-3.7S132.5 154.7 134.6 154.7M134.6 152.7c-3.2 0-5.7 2.6-5.7 5.7s2.6 5.7 5.7 5.7 5.7-2.6 5.7-5.7S137.7 152.7 134.6 152.7L134.6 152.7z"/><rect x="168.5" y="143.5" class="st5" width="63" height="42"/><path class="st5" d="M231 144v41h-62v-41H231M232 143h-64v43h64V143L232 143z"/><polygon class="st3" points="195 158 206 165 195 172 "/><line class="st4" x1="120" y1="194" x2="232" y2="194"/><line class="st4" x1="120" y1="202" x2="232" y2="202"/><line class="st4" x1="120" y1="210" x2="189" y2="210"/></g><g id="screen1"><path class="st3" d="M163 194c-2.8 0-5-2.2-5-5V89c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H163z"/><path class="st1" d="M307 85c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H163c-2.2 0-4-1.8-4-4V89c0-2.2 1.8-4 4-4H307M307 83H163c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V89C313 85.7 310.3 83 307 83L307 83z"/><g id="screen2sim_1_"><rect x="250.5" y="107.5" class="st8" width="40" height="41"/><path class="st8" d="M290 108v40h-39v-40H290M291 107h-41v42h41V107L291 107z"/></g><path class="st7" d="M279.4 124.6c2 4.5-0.1 9.8-4.7 11.8s-9.8-0.1-11.8-4.7c-2-4.5 0.1-9.8 4.7-11.8C272.2 117.9 277.4 120 279.4 124.6z"/><path class="st3" d="M280 129.7c-0.1 0.6-0.3 1.2-0.5 1.7 1.4 1.1 2.1 2.1 1.9 2.6 -0.3 0.7-1.5 0.9-3.8 0.4 -1.8-0.4-4.3-1.2-7.7-2.5 -3.5-1.4-6-2.8-7.6-4 -1.7-1.3-2.4-2.3-2.1-2.9 0.3-0.5 1.3-0.6 2.8-0.4 0.2-0.5 0.5-1.1 0.9-1.5 -5.2-1.4-9.1-1.7-9.8-0.5 -0.8 1.4 2 4.5 8.5 7.8 2 1 4.2 2.1 6.9 3.1 2.4 0.9 4.5 1.7 6.4 2.4 7.7 2.6 11.1 2.7 11.8 1.1C288.2 135.6 285.2 132.7 280 129.7z"/><line class="st4" x1="181" y1="108" x2="244" y2="108"/><line class="st4" x1="181" y1="116" x2="244" y2="116"/><line class="st4" x1="181" y1="124" x2="244" y2="124"/><line class="st4" x1="181" y1="132" x2="244" y2="132"/><line class="st4" x1="181" y1="140" x2="244" y2="140"/><line class="st4" x1="181" y1="148" x2="220" y2="148"/><line class="st9" x1="181" y1="165" x2="291" y2="165"/><path class="st3" d="M199 170c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5S201.8 170 199 170z"/><path class="st10" d="M199 161c2.2 0 4 1.8 4 4s-1.8 4-4 4 -4-1.8-4-4S196.8 161 199 161M199 159c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6S202.3 159 199 159L199 159z"/></g></g><g id="envelope-fg"><polygon class="st11" points="265 235 87 235 87 117 "/><polygon class="st12" points="265 117 265 235 176 176 "/></g></g></svg>

<h1>Click the circle for awesomeness<h1>
<p>Or don't, I can't really force you to</p>
            
          
!
            
              body {
    background: #f9f9f9;
    text-align: center;
}

h1, p {
  font: 35px "adelle-sans", sans-serif;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 60px;
}

p {
  margin-top: -50px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.5);
}

svg {
    display: block;
    margin: 60px auto;
    width: 80%;
    max-width: 320px;
    cursor: pointer;
}
#all-items {
  opacity: 0;
}

            
          
!
            
              window.onload = function() {
  var canvas = Snap.select("#svg-animation"),
    allItems = canvas.select("#all-items"),
      
    envelopeBg = canvas.select("#envelope-bg"),
    envelopeFg = canvas.select("#envelope-fg"),
    envelopeLip = canvas.select("#envelope-lip"),

    screens = canvas.select("#screens"),
    screen1 = screens.select("#screen1"),
    screen2 = screens.select("#screen2"),
    screen3 = screens.select("#screen3"),

    circleBg = canvas.select("#bg-circle"),
    bigCircle = canvas.circle(177, 177, 177),
      
    screenlist = [screen1, screen2, screen3];

  var envelopeLipTop = allItems.polygon("265,116 176,56 87,116");
  var closedLip = "265,116 176,176 87,116";
  
  allItems.attr({
    clip: bigCircle,
    opacity: 1
  });
  
  envelopeLipTop.attr({
    opacity: 0
  });

  screens.transform("t0,280");
  envelopeTransform("t0,300", false);

  function envelopeTransform(params, animation, nextAnim) {
    if (!animation) {
      envelopeBg.transform(params);
      envelopeFg.transform(params);
      envelopeLip.transform(params);
    } else {
      envelopeBg.animate({
        transform: params
      }, 300, mina.easeinout);
      envelopeFg.animate({
        transform: params
      }, 300, mina.easeinout);
      envelopeLip.animate({
        transform: params
      }, 300, mina.easeinout, nextAnim);
    }
  }
  
  function animateUp(element) {
    element.animate({
      transform: "t0,-280"
    }, 1000, mina.elastic);
  }

  for (i = 0; i < 3; i++) {
    (function(i) {
      setTimeout(function() {
        animateUp(screenlist[i]);
      }, 200 * i);
    }(i));
  }
  
  function initSequence() {
    screen1.animate({
      transform: "t-59,-243"
    }, 200, mina.easeinout);
    screen3.animate({
      transform: "t59,-319"
    }, 200, mina.easeinout, dropPulse);
  }

  function dropPulse() {
    pulseCircle = canvas.circle(176, 176, 50);

    pulseCircle.attr({
      stroke: "#fff",
      fill: "rgba(0,0,0,0)",
      strokeWidth: 15,
      opacity: 0
    });

    pulseCircle.animate({
      r: 100,
      opacity: 1
    }, 200, mina.easeinout);

    setTimeout(function() {
      pulseCircle.animate({
        r: 120,
        opacity: 0
      }, 200, mina.easeinout, moveEnvelope);
    }, 90);
  }

  function moveEnvelope() {
    setTimeout(function() {
      envelopeTransform("t0,0", true, animateLip);
    }, 50)
  }

  function animateLip() {
    envelopeLip.animate({
      opacity: 0
    }, 0, mina.linear);

    envelopeLipTop.attr({
      fill: "#A0AFB5",
      stroke: "#737F84",
      strokeWidth: 2,
      strokeLineJoin: "round",
      opacity: 1
    });

    envelopeLipTop.animate({
      "points": closedLip,
      fill: "#fff"
    }, 200, mina.easeinout, envelopeAnimOut);
  }
  
  function envelopeAnimOut() {
    setTimeout(function() {
      envelopeBg.animate({
        transform: "t300,0"
      }, 300, mina.easeinout);

      envelopeFg.animate({
        transform: "t300,0"
      }, 300, mina.easeinout);

      envelopeLipTop.animate({
        transform: "t300,0"
      }, 300, mina.easeinout);

      screens.animate({
        transform: "t300,280"
      }, 300, mina.easeinout, closeCircle);
    }, 200)
  }

  function closeCircle() {
    circleBg.animate({
      r: 50,
      fill: '#4ad3ac'
    }, 800, mina.bounce);

    tick = allItems.polyline("156,179 170,193 199.2,163.8");

    tick.attr({
      stroke: "#fff",
      fill: "rgba(0,0,0,0)",
      strokeWidth: 4
    });
  }
  
  function animate() {
    initSequence();
  }

  canvas.click(function() {
    animate();
    canvas.unclick();
  });
};
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console