paint-on-maskLayer-1a.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<title>Paint clip-path onto mask layer</title>

<style type="text/css">

  #inner {

    width: 200px;

    height: 200px;

    box-sizing:border-box;

    background: blue;

    /* make clip-path pained on mask layer */

    border: 1px solid transparent;

    will-change: transform;

  #outer {

    width: 200px;

    height: 200px;

    clip-path: url(#path);

    /* make it fixed so that inner div has different AGR with outter div */

    position: fixed;

</style>

<div id="outer">

  <div id="inner"></div>

</div>

<svg height="0">

  <defs>

    <clipPath id="path">

      <rect x="0" y="0" width="100" height="100"/>

    </clipPath>

  </defs>

</svg>

</html>