SVG Clipping mask

In this example below you will see how to do a SVG Clipping mask with some HTML / CSS and Javascript

This awesome code was written by YOSHIDASHINGO, you can see more from this user in the personal repository.
You can find the original code on


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>SVG Clipping mask</title>
    <link rel="stylesheet" href="">

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



  <div class="wrap">
		<img src="" width="640" alt="" class="img" />

	<svg version="1.1" id="star" xmlns="" xmlns: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" />
  <script src=''></script>




/*Downloaded from */
.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);