Creating a Minion logo using Css

Question

I am currently trying to generate this as part of creating a full 'minion' from the famous Despicable Me films.

It's all going well, apart from the fact that I am trying to make the black section transparent (i.e. take the inner black section and make it transparent), so that the gradient colouring behind can be seen).

---

.wrap {
  height: 300px;
  width: 300px;
  background: lime;
  position: relative;
  overflow:hidden;
  border-radius:50%;
}
.logoWrap {
  height: 200px;
  position: absolute;
  top: 15%;
  left: 15%;
  width: 200px;
  transform: rotate(45deg);
  background: black;
  transition:all 0.8s;
}
.logoWrap:before {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
  background: blue;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  transition:all 0.8s;
}
.logoWrap:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 160px;
  background: blue;
  border-bottom: 20px solid black;
  top: 10%;
  right: -40px;
  transform: rotate(-45deg);
  transition:all 0.8s;
}
.wrap:hover .logoWrap{
  background:tomato;
  }
.wrap:hover .logoWrap:after{
   border-bottom: 20px solid tomato;
  }

<div class="wrap">
  <div class="logoWrap"></div>
</div>

---

So in my snippet i'm looking for the blue section to take the background colour.

---

Please kindly note

• The background colour will not be a solid colour (a gradient or texture instead).

• Using an image is out of the question

• Still working on 'bettering' the current logo, so a alterable solution would be preferred i.e. still able to change sizing quickly (no need to alter the 100 values of clip path)

• I would be interested in adding some animation/hover, so this would be reinforcing previous point

Answer 1

Although an svg version of this would be better, you can achieve this shape with one element using box-shadows and pseudo elements :

DEMO

div {
  position: relative;
  width: 400px; height: 400px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 90px auto;
  overflow: hidden;
}
div:after,
div:before {
  content: '';
  display: block;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div:after {
  width: 200px; height: 200px;
  margin: 100px 0 0 100px;
  border-radius: 50%;
  box-shadow: 
    -102px 0px 0px 100px #000, 
    140px 300px 0px 200px #000, 
    140px -330px 0px 200px #000;
}
div:before {
  position: absolute;
  transform-origin: 100% 0;
  width: 250px; height: 30px;
  top: 0; right: 0;
  background: #000;
  box-shadow: 63px -60px 0px 0px #000;
}
body {
  background: url('http://lorempixel.com/output/people-q-c-640-480-9.jpg');
  background-size: cover;
}

<div></div>

---

EDIT :

Here is an svg version of this shape with the <mask> element more suitable for "real life" :

DEMO

svg {
  display: block;
  width: 70%;
  margin: 0 auto;
}
body {
  background: url('http://lorempixel.com/output/people-q-c-640-480-9.jpg') no-repeat;
  background-size: cover;
}

<svg id="lbox" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <mask id="c">
    <rect x="0" y="0" width="100" height="100" fill="#fff" stroke-width="0" />
    <rect x="60" y="45" width="40" height="5" fill="#000" stroke-width="0" transform="rotate(-45 50 50)" />
    <circle cx="50" cy="50" r="18" fill="#000" stroke-width="0" />
  </mask>
  <rect mask="url(#c)" x="20" y="20" width="60" height="60" fill="#000" stroke-width="0" transform="rotate(45 50 50)" />
  <rect x="55" y="50" width="15" height="5" fill="#000" stroke-width="0" />
</svg>