SVG Clipping mask

Tutorials of (Svg clipping mask) by Yoshida

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>SVG Clipping mask</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrap">
		<img src="https://www.pakutaso.com/shared/img/thumb/P1100944_TP_V1.jpg" width="640" alt="" class="img" />

	<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="306.621px" height="292.834px" viewBox="0 0 306.621 292.834" enable-background="new 0 0 306.621 292.834" xml:space="preserve">
		<clipPath id="clipPath">
			<circle cx="300" cy="200" r="200" width="300px" height="300px" fill="#000" />
		</clipPath>
	</svg>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.wrap {
  width: 100%;
}

.img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.img {
  -webkit-clip-path: url(#clipPath);
  clip-path: url(#clipPath);
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( SVG Clipping mask ) is write by yoshida, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © yoshida