<!DOCTYPE html>
<html lang="en">
<head>
<style>

#div1 {
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle();
  background-color: green;
}
#div2 {
  width: 200px;
  height: 200px;
  -webkit-clip-path: ellipse(150px 75px at 150px 75px);
  background-color: green;
}
* {
  padding: 0;
  margin: 0;
}
</style>
<div id="div1"></div>
<div id="div2"></div>
<svg>
  <clipPath id="clip">
    <ellipse cx="100" cy="100" rx="100" ry="100"/>
  </clipPath>
  <clipPath id="clip2">
    <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/>
  </clipPath>
</svg>
</html>