Pen Settings

HTML

CSS

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

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

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.

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="container w ip">
  <div class="box">
    <div class="box__in">
      <div class="box__copy">
        <div>
          <p>Rothco Presents</p>
        </div>
        <h1 data-copy="Cannes Watch">Cannes Watch</h1>
      </div>
      <div class="bg">

        <svg id="theSVG" width="1765px" height="1058px" viewBox="0 0 1765 1058" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="paths" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="path_dark-2__out">
              <path d="M29.6032029,389.563675 C29.6032029,529.422136 179.159715,632.163675 294.508902,664.408675 C409.859227,696.652675 478.019954,704.329675 582.883576,933.111675 C687.747197,1161.89267 1080.98435,1023.70267 1159.63179,830.236675 C1238.27922,636.770675 1212.06303,573.816675 1159.63179,589.171675 C1107.19941,604.525675 1161.379,688.975675 1248.76478,627.557675 C1336.1517,566.139675 1442.76254,681.298675 1540.63502,699.723675 C1638.50751,718.148675 1696.4003,606.660862 1696.4003,545.525747 C1696.4003,484.390631 1670.35218,458.631916 1616.4003,458.631916 C1562.44843,458.631916 1463.73481,345.035675 1423.53748,203.774675 C1383.34016,62.5136748 1233.34113,23.7124393 1045.16842,3.90759053 C923.364416,-8.91206892 751.744958,21.5075011 677.405018,78.4359879 C608.419615,131.264045 602.90867,196.676303 664.836547,196.676303 C733.897035,196.676303 740.44563,118.792847 647.751183,78.4359879 C570.333916,44.730433 435.620078,115.856825 294.508902,134.912791 C57.5546886,166.911611 55.0202839,134.912791 15.5237798,173.894559 C-23.9727243,212.876328 29.6032029,276.530087 29.6032029,389.563675 Z" id="path_dark-2" stroke="#021A9A" stroke-width="2" data-perspective="20"></path>
            </g>
            <g id="path_dark-1__out">
              <path d="M361.081372,60.075012 C469.638209,39.4874076 560.841849,53.8490555 580.546339,158.608501 C600.250829,263.367947 549.410787,428.35335 452.677787,491.30635 C355.944787,554.25935 295.293029,465.295734 278.105415,336.22635 C260.917801,207.156966 416.570393,109.731799 489.13296,166.210644 C561.695526,222.68949 768.529013,223.268648 889.525989,95.977292 C1010.52297,-31.3140637 1200.17252,56.6897402 1232.2958,121.116615 C1264.41909,185.54349 1224.32938,250.75045 1152.74192,235.159801 C1081.15445,219.569152 1052.22878,121.547133 1161.92998,84.3716969 C1271.63119,47.1962604 1488.31435,13.5790389 1589.17337,95.977292 C1690.0324,178.375545 1733.47794,264.968591 1716.34979,336.22635 C1699.22163,407.484108 1514.14544,485.283556 1489.6243,595.146667 C1465.10316,705.009778 1474.09253,763.48299 1531.03869,815.796479 C1587.98485,868.109968 1716.34979,831.107475 1730.78812,712.733349 C1745.22646,594.359223 1571.72641,501.048045 1438.14241,668.412045 C1304.55841,835.775045 1232.68379,893.59335 1096.02979,945.79835 C959.374787,998.00335 647.678787,1025.64135 575.513787,861.34835 C503.347787,697.05635 432.716787,643.31535 335.983787,620.28335 C239.250787,597.25235 171.599904,562.7273 151.730787,419.58635 C131.86167,276.445399 252.524534,80.6626165 361.081372,60.075012 Z" id="path_dark-1" stroke="#021A9A" stroke-width="6"  data-perspective="15"></path>
            </g>
            <g id="path_yellow__out">
              <path d="M433.209784,312.221714 C726.057804,398.227334 807.324603,107.351881 986.255062,209.786797 C1165.18552,312.221714 1395.06436,325.658794 1410.0438,220.513995 C1425.02324,115.369195 1591.68777,164.344701 1591.68777,258.686787 C1591.68777,353.028874 1479.13786,301.137358 1449.10679,409.077871 C1419.07573,517.018383 1436.87976,607.881467 1547.51975,616.725737 C1658.15974,625.570007 1700.03239,849.706668 1516.63698,889.130563 C1333.24158,928.554459 1410.0438,742.607315 1469.53331,839.617699 C1503.67525,895.293458 1244.29314,1056.8014 1168.96286,932.391106 C1136.25385,878.371157 1122.52857,995.994007 1039.23888,1032.1947 C930.708797,1079.36577 754.547134,1052.69579 779.584016,985.20901 C845.3338,807.980813 638.728707,757.668499 606.67531,941.498388 C574.621914,1125.32828 448.890065,1002.5724 367.063704,889.130563 C285.237344,775.68873 178.056459,742.607315 61.3138578,742.607315 C-55.4287435,742.607315 140.361763,226.216095 433.209784,312.221714 Z" id="path_yellow" stroke="#FEB601"  data-perspective="3" stroke-width="4"></path>
            </g>
            <g id="path_blue__out">
              <path d="M429.316198,184.768073 C724.271128,270.904308 668.023727,67.6587791 848.24151,170.249262 C1028.45929,272.839745 1184.62653,230.600474 1199.71374,125.295992 C1214.80095,19.9915112 1362.46851,59.358297 1362.46851,153.84366 C1362.46851,248.329022 1479.42801,166.863606 1449.18089,274.968046 C1418.93377,383.072486 1415.71377,491.644589 1527.14976,500.50229 C1638.58575,509.359992 1678.83584,691.092893 1494.12099,730.576661 C1421.41881,746.117135 1383.02985,723.356111 1374.99205,701.402731 C1362.60816,667.579036 1412.49496,628.225298 1438.46762,677.070113 C1464.85659,726.697852 1399.67011,787.465353 1259.32821,728.437514 C1195.59682,701.632078 1081.7092,779.368945 1051.90448,825.303049 C1027.26354,863.2789 958.009163,929.416713 890.92658,948.652334 C770.474389,983.191444 597.294921,854.1167 545.678747,969.642932 C494.062574,1085.16916 291.938185,989.81061 209.52312,876.196494 C127.108056,762.582378 226.41201,576.592242 108.829498,576.592242 C-8.75301378,576.592242 134.361268,98.6318383 429.316198,184.768073 Z" id="path_blue" stroke="#10E9FF" stroke-width="2" transform="translate(844.708417, 542.306572) rotate(-164.000000) translate(-844.708417, -542.306572) "  data-perspective="7"></path>
            </g>
            <g id="path_white__out">
              <path d="M391.217467,507.606169 C310.561015,616.079519 251.876004,643.172277 203.357411,636.28119 C154.838818,629.390102 45.694144,711.10903 103.310466,812.279114 C160.926788,913.449198 287.840124,965.840021 373.2502,934.191204 C458.660276,902.542386 550.883026,824.70577 659.408472,916.530102 C767.933917,1008.35443 1169.87462,1063.71435 1211.72442,925.099434 C1253.57423,786.484517 1238.80158,706.345186 1199.22624,727.797764 C1159.6509,749.250342 1190.89502,807.223922 1270.52979,761.895622 C1364.72215,705.211176 1455.56062,826.635817 1559.53731,836.122632 C1663.51401,845.609446 1778.95105,708.011504 1761.76735,598.223764 C1744.58365,488.436023 1709.99431,441.120961 1635.63015,381.074247 C1561.26599,321.027532 1418.52877,277.701068 1462.24699,224.888458 C1505.96521,172.075848 1569.08696,253.151725 1508.60232,288.989129 C1448.11769,324.826533 1348.5946,352.138273 1262.26008,346.478922 C1175.92555,340.819571 1008.9844,291.482148 940.600014,190.156731 C872.215629,88.8313144 655.327161,124.468609 624.43569,211.831297 C593.544218,299.193986 640.68894,334.256221 674.254562,292.875559 C707.820184,251.494897 541.64762,187.228097 471.873919,256.846675 C402.100217,326.465252 471.873919,399.132819 391.217467,507.606169 Z" id="path_white" stroke="#FFFFFF" stroke-width="2"  data-perspective="5"></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</div>

<button>toggle</button>

<div class="container content">
  <div class="col-xs-12">
    <h1>Things of note 👇</h1>
    <h2>Using negative values in clip-path</h2>
    <p>Transitioning from $parallel-closed-left: polygon(-100% 0%, -0% -0%, -75% 100%, -175% 100%); to $square: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); creates a rotating shutter effect as one corner of the square has further to travel.</p>
    
    <h2>CSS variables for line animation</h2>
    <p>First a variable is set via js to attach the path length as a variable on that element in the SVG.</p>
    <pre><code>paths[i].style.setProperty('--dash', paths[i].getTotalLength());</code></pre>
    
    <p>Then the CSS can use that variable, and use it in the animation to offset the stroke of the path, by the length of the path. At this time, you can't pass the variables into the keyframe animation on Safari.</p>
      
       <pre><code>path {
  stroke-dasharray: calc(var(<mark>--dash</mark>) / 16) calc(var(<mark>--dash</mark>) / 16 * 3);
  animation: dash 10s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: var(<mark>--dash</mark>);
  }
}</code></pre>

      
      
      <h2>Box shadow and clip path to create the multiply effect of the box</h2>
      <p>Also, turns out that you can use vertical units and variables in clip-path.</p>
      
<pre><code>polygon(
  calc(0% + 2vw) calc(0% + 2vw,
  calc(100% - 2vw) calc(0% + 2vw),
  calc(100% - 2vw) calc(100% - 2vw),
  calc(0% + 2vw) calc(100% - 2vw)
);</code></pre>
  </div>
</div>
  
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Judson:wght@700&display=swap");

// $ease: cubic-bezier(.75,0,.25,1);
$ease: cubic-bezier(0.85, 0, 0.05, 1);

$s5: 0.5s;
$s2: 0.2s;

$slow: 1;
// $slow: 10;

$s5: $s5 * $slow;
$s2: $s2 * $slow;

$parallel-closed-left: polygon(-100% 0%, -0% -0%, -75% 100%, -175% 100%);
$parallel-closed-right: polygon(175% 0%, 275% -0%, 25% 100%, 100% 100%);
$closed-left: polygon(0 0, 0 0, 0 100%, 0% 100%);
$square: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
$square-half-inset: polygon(
  calc(0% + var(--i)) calc(0% + var(--i)),
  calc(100% - var(--i)) calc(0% + var(--i)),
  calc(100% - var(--i)) calc(100% - var(--i)),
  calc(0% + var(--i)) calc(100% - var(--i))
);
$square-inset: polygon(
  calc(0% + var(--o)) calc(0% + var(--o)),
  calc(100% - var(--o)) calc(0% + var(--o)),
  calc(100% - var(--o)) calc(100% - var(--o)),
  calc(0% + var(--o)) calc(100% - var(--o))
);
$box-indent: 3%;

:root {
  --dark: #420bc8;
  --yellow: #ffb600;
  --bloo: #13e9ff;

  --o: 2vw;
  --i: 1vw;
}

.box {
  text-align: center;
  color: white;
  height: 90vh;
  height: calc(100vh - 120px);
  margin-top: 50px;
  position: relative;

  transition: all 2s $ease;

  .box__in {
    height: 100%;
    clip-path: $parallel-closed-left;
    transition: clip-path 0.5s $ease;
    transition-delay: 1s;
    .ready & {
      clip-path: $square;
      transition-delay: 0s !important;
    }

    &:before,
    &:after {
      position: absolute;
      content: "";
      z-index: -1;
    }
    &:before {
      box-shadow: 0 0 0px var(--i) var(--yellow), 0 0 0px var(--i) var(--bloo);
      transition: box-shadow 1.2s $ease;
      bottom: var(--o);
      right: var(--o);
      left: var(--o);
      top: var(--o);
      .ready & {
        box-shadow: calc(-0.75 * var(--o)) calc(0.75 * var(--o)) 0px
            calc(0.75 * var(--o)) var(--yellow),
          calc(0.75 * var(--o)) calc(var(--o) * -0.75) 0px calc(var(--o) * 0.75)
            var(--bloo);
        // box-shadow: calc(-.75 * var(--i) ) calc(.75 * var(--i)) 0px calc(.75 * var(--i)) var(--yellow), calc(.75 * var(--i)) calc(var(--i) * -.75) 0px calc(var(--i) * .75) var(--bloo);
      }
    }
    &:after {
      bottom: 0;
      right: 0;
      left: 0;
      top: 0;
      background-color: var(--dark);
      clip-path: $square;
      clip-path: $square-half-inset;
      transition: clip-path 1.2s $ease;

      .ready & {
        clip-path: $square-inset;
      }
    }
    // mix-blend-mode: darken;
  }
  .box__copy {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

    p {
      font-size: 2em;
      letter-spacing: 1px;
      color: var(--yellow);
      font-family: "Montserrat", sans-serif;

      clip-path: $parallel-closed-left;
      transition: all 0.5s $ease;

      transform-origin: center left;
      transform: scale(0.9, 1);
      transition-delay: 0.3s;
      display: inline-block;

      .ready & {
        clip-path: $square;
        transform: scale(1, 1);
      }
    }
    h1 {
      font-family: "Judson", serif;
      font-size: 5em;
      position: relative;
      color: transparent;
      display: inline-block;

      transition: all 2s $ease;
      transform: scale(0.9, 1);
      transform-origin: center left;

      .ready & {
        transform: scale(1, 1);
      }

      &:after,
      &:before {
        position: absolute;
        content: attr(data-copy);
        width: 100%;
        top: 0;
        left: 0;
      }
      &:after {
        color: white;
        clip-path: $parallel-closed-left;
        transition: all 1.2s $ease;
        transition-delay: $s5/3;

        .ready & {
          clip-path: $square;
        }
      }
      &:before {
        color: var(--dark);
        opacity: 1;
        clip-path: $parallel-closed-left;
        // clip-path: $closed-left;
        transition: clip-path 1s $ease, opacity 0.5s $ease 0;
        transition-delay: 0;
        text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white,
          -1px -1px 0 white, 1px 0 0 white, -1px 0 0 white, 1px 0 0 white,
          -1px 0 0 white, 0 1px 0 white, 0 1px 0 white, 0 -1px 0 white,
          0 -1px 0 white;

        .ready & {
          transition: clip-path 1s $ease, opacity 1s $ease 0.5s;
          opacity: 0;
          clip-path: $parallel-closed-right;
          clip-path: $square;
        }
      }
    }
  }
}

.bg {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  overflow: hidden;
  clip-path: $square-half-inset;

  transition: clip-path 1.2s $ease;

  .ready & {
    clip-path: $square-inset;
  }
}

.bg svg {
  width: 110%;
  position: absolute;
  top: 50%;
  left: -5%;
  right: -5%;
  transform: translateY(-50%);

  --dash: 2000; // default
  path {
    stroke-width: 0;
    transition: stroke-width 2.5s $ease;
    
    stroke-dasharray: calc(var(--dash) / 16) calc(var(--dash) / 16 * 3);
    animation: dash 10s linear infinite;
    
    .ready & {
      stroke-width: 2;
    }
  }
}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: var(--dash);
  }
}


#paths {
  transition: all 3s $ease;
  transform: scale(2);
  transform-origin: center center;

  .ready & {
    transform: scale(1);
  }
}

#path_dark-1 {
  animation-duration: 20s;
  stroke-dasharray: calc(var(--dash) / 4) calc(var(--dash) / 4 * 3);
}
#path_dark-2 {
  animation-duration: 17s;
  stroke-dasharray: calc(var(--dash) / 4) calc(var(--dash) / 4 * 3);
}
#path_yellow {
  animation-duration: 60s;
  
  stroke-dasharray: calc(var(--dash) / 8) calc(var(--dash) / 8 * 3);
}
#path_blue {
  animation-duration: 40s;
}
#path_white {
  animation-duration: 30s;
}

.wip {
  position: relative;
  &:after {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    content: "WIP";
    color: red;
    font-size: 22em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(15deg);
  }
}



.content {
  
  transform: translateY(100px);
  .readyFirst & {
      transition: transform .5s cubic-bezier(0,.74,.15,1) 3s;
      transform: translateY(0);
  }
}
              
            
!

JS

              
                window.setTimeout(function(){$('body').addClass("ready");$('body').addClass("readyFirst");}, 500); 


$( "button" ).click(function() {
  $( "body" ).toggleClass( 'ready' );
});


let root = document.documentElement,
     winW = window.innerWidth;

var path = document.getElementById("theSVG");
 
var paths__out = [document.getElementById("path_dark-2__out"), document.getElementById("path_dark-1__out"), document.getElementById("path_yellow__out"), document.getElementById("path_blue__out"), document.getElementById("path_white__out")];

var paths = [
  document.getElementById("path_dark-2"),
  document.getElementById("path_dark-1"), 
  document.getElementById("path_yellow"), 
  document.getElementById("path_blue"),
  document.getElementById("path_white")
  ];

for (let i = 0; i < paths.length; i++) {
  paths[i].style.setProperty('--dash', paths[i].getTotalLength());
}

var elem =  { x: 0, y: 0 },
    mouse = { x: 0, y: 0 },
    move = { x: 0, y: 0 };



function init() {
  console.log('init()');
  elem.x = path.getBoundingClientRect().x + path.getBoundingClientRect().width / 2;
  elem.y = path.getBoundingClientRect().y + path.getBoundingClientRect().height / 2;
} init();

window.addEventListener('resize', init());

 
root.addEventListener("mousemove", e => {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
  
  move.x = mouse.x - elem.x;
  move.y = mouse.y - elem.y;
  
  for (let i = 0; i < paths.length; i++) {
    gsap.to(paths__out[i], 1, { 
      x: this.move.x / ( paths[i].dataset.perspective),
      y: this.move.y / ( paths[i].dataset.perspective),
    });
  }
});
              
            
!
999px

Console