tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

clipPath-css-transform.html (900B)

      1 <style>
      2 #rec1 {
      3  transform: translate(15px,15px) scale(2,4);
      4 }
      5 #rec3 {
      6  transform: translate(100px,100px) scale(2,4);
      7 }
      8 #clipPath3 {
      9  transform: translate(100px,100px);
     10 }
     11 </style>
     12 <svg style="width: 400px; height: 400px; border: 1px solid red">
     13  <defs>
     14    <clipPath id="clipPath1">
     15      <rect id="rec1" width="20px" height="10px" />
     16      <rect id="rec2" width="20px" height="10px" />
     17    </clipPath>
     18    <clipPath id="clipPath2">
     19      <rect id="rec3" width="20px" height="10px" />
     20    </clipPath>
     21    <clipPath id="clipPath3">
     22      <rect id="rec4" x="200px" y="200px" width="40px" height="40px" />
     23    </clipPath>
     24  </defs>
     25 
     26  <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" />
     27  <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" />
     28  <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" />
     29 </svg>