cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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.

            
              <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="278.494" viewBox="0 0 1154.516 278.494">
  <g id="monitor">
    <path id="laptop" fill="#565656" d="M308.109 233.619c15.371 0 27.82-12.586 27.82-27.956l.136-139.784c0-15.378-12.585-27.956-27.956-27.956H84.455c-15.377 0-27.957 12.578-27.957 27.956v139.784c0 15.37 12.58 27.956 27.957 27.956H28.54v27.958h335.481v-27.958h-55.912zM84.455 65.879h223.654v139.784H84.455V65.879z"/>
  </g>
  <g id="virus2">
    <g id="virusface">
      <path id="virusbody_2_" fill="#4F1D2C" stroke="#FFF" stroke-miterlimit="10" d="M907.499 91.842l10.962-18.296-.318 20.522 12.951-5.518-4.742 11.682 8.725-1.918-4.836 10.613 22.742 7.024-24.066 2.205 6.3 9.211-12.527-1.56 6.102 19.861-15.813-15.54h-10.963l-15.812 15.54 6.099-19.861-13.955 2.524 7.729-10.175-24.067-2.205 22.744-7.024-5.552-9.89 9.441 1.195-11.529-18.044 19.736 11.88 1.828-13.715z"/>
      <path id="viruseyeL_2_" fill="#FFF" d="M894.983 102.899l9.951 4.835s-.141 6.591-4.975 6.494c0 .001-6.966-1.091-4.976-11.329z"/>
      <path id="viruseyeR_2_" fill="#FFF" d="M921.639 102.899l-9.953 4.835s.145 6.591 4.977 6.494c0 .001 6.966-1.091 4.976-11.329z"/>
      <path id="virusmouth_2_" fill="#FFF" d="M921.442 117.717c3.186-.014-5.855 5.766-13.078 5.766-7.225 0-16.266-5.742-13.08-5.766 2.195-.017 22.695.014 26.158 0z"/>
    </g>
  </g>
  <g id="document">
    <path fill="#FFF" stroke="#000" stroke-miterlimit="10" d="M887.752 83.562h46.592v64.237h-46.592z"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M892.26 89.145s3.473-.656 5.814.375c0 0 .377.846 3.377-1.031 0 0-.094-.654 3.188.611 0 0 2.439 1.27 3.848.609 0 0 2.438-3.06 5.252-1.39"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M907.057 92.693s3.473-.657 5.814.374c0 0 .377.845 3.377-1.031 0 0-.094-.654 3.189.61 0 0 2.438 1.27 3.846.611 0 0 2.438-3.061 5.25-1.391"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M892.432 92.408s2.258.725 3.498.234c0 0 1.963-1.059 4.021-.234 0 0 2.615 1.064 4.383.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M917.042 88.441s2.256.725 3.498.234c0 0 1.961-1.059 4.021-.234 0 0 2.615 1.065 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M892.506 97.025s3.473-.656 5.816.375c0 0 .375.845 3.375-1.031 0 0-.094-.654 3.188.611 0 0 2.441 1.268 3.848.609 0 0 2.438-3.061 5.252-1.39"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M907.303 100.573s3.473-.657 5.814.375c0 0 .377.845 3.377-1.032 0 0-.094-.654 3.189.611 0 0 2.438 1.269 3.844.61 0 0 2.438-3.061 5.254-1.391"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M892.678 100.288s2.256.726 3.498.235c0 0 1.961-1.059 4.023-.235 0 0 2.613 1.065 4.381.405"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M917.288 96.321s2.256.726 3.498.235c0 0 1.961-1.059 4.021-.235 0 0 2.615 1.065 4.383.405"/>
    <path fill="#7C7B7B" d="M892.678 103.105h13.977v14.68h-13.977z"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.036 103.92s2.256.727 3.498.236c0 0 1.961-1.06 4.02-.236 0 0 2.615 1.066 4.381.405"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M916.635 106.717s2.254.725 3.498.234c0 0 1.961-1.06 4.021-.234 0 0 2.613 1.064 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.454 106.604s1.145-.09 2.256.266c0 0 4.021.336 4.807-.275"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M921.17 104.707s2.258-.92 3.303-.166c0 0 2.861 1.143 4.063-.065"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.282 108.895s2.256.725 3.498.234c0 0 1.961-1.059 4.02-.234 0 0 2.615 1.064 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M916.881 111.688s2.254.726 3.498.236c0 0 1.961-1.06 4.021-.236 0 0 2.613 1.065 4.381.405"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.7 111.577s1.145-.09 2.256.266c0 0 4.021.335 4.807-.276"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M921.417 109.681s2.256-.92 3.303-.166c0 0 2.859 1.142 4.063-.065"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.454 114.369s2.256.725 3.498.234c0 0 1.961-1.059 4.021-.234 0 0 2.613 1.066 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M917.053 117.164s2.256.726 3.498.235c0 0 1.963-1.06 4.021-.235 0 0 2.615 1.065 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.874 117.051s1.143-.088 2.254.267c0 0 4.021.336 4.807-.276"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M921.59 115.155s2.256-.919 3.301-.165c0 0 2.861 1.142 4.064-.065"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M892.754 121.159s3.469-.656 5.814.375c0 0 .375.845 3.375-1.031 0 0-.094-.655 3.189.61 0 0 2.438 1.27 3.846.611 0 0 2.438-3.062 5.252-1.392"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M907.549 124.707s3.473-.657 5.814.375c0 0 .377.844 3.377-1.032 0 0-.094-.654 3.189.61 0 0 2.438 1.27 3.846.611 0 0 2.438-3.061 5.25-1.391"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M892.924 124.422s2.258.725 3.5.234c0 0 1.959-1.059 4.021-.234 0 0 2.613 1.064 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M917.534 120.455s2.256.726 3.498.234c0 0 1.963-1.059 4.021-.234 0 0 2.615 1.065 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M893 129.039s3.471-.656 5.814.375c0 0 .375.845 3.377-1.031 0 0-.096-.654 3.188.611 0 0 2.439 1.269 3.846.61 0 0 2.439-3.062 5.252-1.392"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M907.795 132.587s3.471-.657 5.816.375c0 0 .375.845 3.375-1.032 0 0-.094-.654 3.189.611 0 0 2.438 1.27 3.846.61 0 0 2.438-3.061 5.252-1.39"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M893.17 132.303s2.256.725 3.5.234c0 0 1.961-1.059 4.021-.234 0 0 2.613 1.064 4.381.404"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M917.78 128.335s2.256.726 3.498.235c0 0 1.963-1.059 4.02-.235 0 0 2.617 1.066 4.383.405"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M893.247 136.92s3.471-.656 5.814.375c0 0 .375.844 3.377-1.031 0 0-.096-.655 3.188.609 0 0 2.439 1.27 3.846.611 0 0 2.439-3.061 5.252-1.391"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M908.042 140.467s3.473-.655 5.816.376c0 0 .375.844 3.377-1.031 0 0-.096-.654 3.188.61 0 0 2.438 1.269 3.846.608 0 0 2.438-3.059 5.25-1.39"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M893.417 140.183s2.256.727 3.5.234c0 0 1.961-1.059 4.021-.234 0 0 2.613 1.065 4.381.405"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M918.026 136.216s2.256.726 3.498.235c0 0 1.963-1.059 4.021-.235 0 0 2.615 1.065 4.381.405"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M893.493 144.801s3.471-.657 5.814.374c0 0 .375.846 3.377-1.031 0 0-.096-.654 3.188.61 0 0 2.439 1.271 3.848.61 0 0 2.438-3.062 5.252-1.391"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M918.272 144.097s2.256.725 3.498.233c0 0 1.963-1.058 4.021-.233 0 0 2.615 1.065 4.381.405"/>
  </g>
  <path fill="#4F1D2C" stroke="#FFF" stroke-miterlimit="10" d="M928.075 95.856h-9.939a21.105 21.105 0 0 0-6.434-6.932l5.764-5.766-4.988-4.987-7.674 7.675a21.452 21.452 0 0 0-5.021-.602 20.94 20.94 0 0 0-4.988.602l-7.709-7.675-4.988 4.987 5.73 5.766a21.383 21.383 0 0 0-6.402 6.932h-9.938v7.073h7.391c-.176 1.168-.316 2.335-.316 3.537v3.537h-7.074v7.073h7.074v3.537c0 1.202.141 2.369.316 3.537h-7.391v7.073h9.938c3.678 6.331 10.502 10.61 18.355 10.61s14.68-4.279 18.354-10.61h9.941v-7.073h-7.391c.176-1.168.316-2.335.316-3.537v-3.537h7.074v-7.073H921v-3.537c0-1.202-.143-2.369-.316-3.537h7.391v-7.073zm-21.221 28.295h-14.146v-7.074h14.146v7.074zm0-14.147h-14.146v-7.074h14.146v7.074z" id="virus"/>
  <g id="catpic">
    <path id="frame_2_" fill="#8A9899" stroke="#515251" stroke-width="8" stroke-miterlimit="10" d="M909 64.52h66.023v85.98H909z"/>
    <ellipse id="head_1_" fill="#FFF" cx="942.243" cy="109.013" rx="16.787" ry="15.239"/>
    <path id="leftear_2_" fill="#FFF" d="M931.547 94.016l8.053 3.05-6.668 5.45-6.668 5.447-1.385-8.5-1.382-8.498z"/>
    <path id="rightear_2_" fill="#FFF" d="M959.043 97.885l-.38 8.603-7.26-4.631-7.26-4.632 7.643-3.971 7.64-3.971z"/>
    <ellipse id="lefteye_2_" cx="937.534" cy="105.12" rx="1.539" ry="2.843"/>
    <ellipse id="righteye_2_" cx="948.211" cy="103.785" rx="1.539" ry="2.842"/>
    <path id="nose_1_" d="M943.889 109.332l2.904-.295-1.197 2.662-1.199 2.662-1.705-2.368-1.705-2.368z"/>
    <path id="leftwisker_2_" fill="none" stroke="#000" stroke-miterlimit="10" d="M944.163 113.051s1.236 3.335-2.162 4.143c0 0-2.371.776-3.678-1.498"/>
    <path id="rightwisker_2_" fill="none" stroke="#000" stroke-miterlimit="10" d="M944.34 113.085s-.408 3.532 3.086 3.509c0 0 2.486.19 3.215-2.328"/>
  </g>
  <g fill="#F5F6F6" id="cloud">
    <ellipse cx="969.834" cy="65.553" rx="64.244" ry="51.948"/>
    <ellipse cx="1055.288" cy="95.456" rx="59.326" ry="48.567"/>
    <ellipse transform="rotate(170.895 948.04 143.03)" cx="948.037" cy="143.029" rx="64.552" ry="47.031"/>
    <ellipse cx="900.057" cy="103.361" rx="64.244" ry="51.025"/>
    <ellipse cx="1034.067" cy="134.408" rx="60.693" ry="48.875"/>
  </g>
  <g id="firewall">
    <defs>
      <path id="SVGID_1_" d="M450.097 44.118h100.529v186.653H450.097z"/>
    </defs>
    <clipPath id="SVGID_2_">
      <use xlink:href="#SVGID_1_" overflow="visible"/>
    </clipPath>
    <g clip-path="url(#SVGID_2_)" fill="#3E4E6B">
      <path d="M514.972 71.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6V60.118a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M550.641 98.805a6 6 0 0 1-6 6H491.98a6 6 0 0 1-6-6V87.118a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M482.544 98.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6V87.118a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M582.972 71.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6V60.118c0-3.313 2.688-6 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M514.972 125.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6v-11.687a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M550.641 152.805a6 6 0 0 1-6 6H491.98a6 6 0 0 1-6-6v-11.687a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M482.544 152.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6v-11.687a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M582.972 125.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6v-11.687c0-3.313 2.688-6 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M514.972 179.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6v-11.687a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M550.641 206.805a6 6 0 0 1-6 6H491.98a6 6 0 0 1-6-6v-11.687a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M482.544 206.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6v-11.687a6 6 0 0 1 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
      <path d="M582.972 179.805a6 6 0 0 1-6 6h-52.661a6 6 0 0 1-6-6v-11.687c0-3.313 2.688-6 6-6h52.661a6 6 0 0 1 6 6v11.687z"/>
    </g>
    <g id="fire" stroke-miterlimit="10">
      <path id="fireout" fill="#A8AFBA" stroke="#4E4F4F" d="M528.549 73.741s-18.648 19.148-12.578 45.789c0 0 4.354 27.677 30.152 26.942 0 0 30.568-12.445 16.256-47.143 0 0-.467 14.78-13.27 21.72 0 0 10.754-8.709 6.373-23.021 0 0-9.764-7.391-7.113-17.383.146-.56.334-1.126.564-1.7 4.336-10.843-7.807 10.843-6.506 20.818 0 0-10.846-12.431-1.955-23.998 0 0 4.557-5.62 10.629-7.509.003.001-13.401-2.363-22.552 5.485z"/>
      <path id="firein" fill="#C8CED6" stroke="#8E8E8E" d="M538.385 72.339s-30.377 23.429-18.498 52.896c0 0 5.939 17.413 24.162 19.028 0 0 15.045-3.539 17.787-26.896 0 0-6.93 6.307-12.143 7.972 0 0-5.127 1.533-6.629-2.204.001-.002-20.314-44.077-4.679-50.796z"/>
    </g>
  </g>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
            
          
!
            
              body{
  background-color: #7f9da3; 
  background-image:linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent);
  background-size:25px 25px;
  overflow:hidden;
}

.wall{
  fill: #3e4e6b;
  border-radius: 4px;
}
            
          
!
            
              var tl = new TimelineMax({repeat:-1, repeatDelay:1});
tl.add( TweenMax.to("#document", 5, {ease: Power0.easeNone, x:-675}) );
tl.add( TweenMax.to("#virus", 3, {ease: Bounce.easeOut, x:-320, y:-10, delay: 2}));
tl.add( TweenMax.to("#catpic", 5, {ease: Power0.easeNone, x:-800, y:50, scale: 0.85, delay: 2}));
tl.add( TweenMax.to("#virus2", 3, {ease: Bounce.easeOut, x:-320, y:50, delay: 2}));
            
          
!
999px
🕑 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 ..................

Console