Circle Clip Mask attached to Cut Out Circle Div

Question

I'm looking to overlay a video with a blue transparent mask with a cut out circle in the middle. The cut out circle would be colored red and be transparent as well.

I need to be able to resize the circle (and the cut out) easily with javascript.

It would end up looking something like this:

https://i.stack.imgur.com/ORVyQ.jpg

I can't use a transparent PNG or SVG and simply resize it because I need to be able to set the colors with javascript.

What would be the most efficient way of doing this?

Here's what I have at the moment, but I don't think it's the best way.

https://jsfiddle.net/tbristol/j60u8pLm/

In particular, because I'm using a second SVG element and adjusting it with the top:-18px, I don't think it'll scale well or resize well.

svg:nth-child(2) {
  margin-top:-100%;
  position:relative;
  top:-18px;
}

Here's what I have so far, but I don't think I'm going in the right direction. https://jsfiddle.net/tbristol/j60u8pLm/ — keyboardface, May 09 '17 at 18:17
Maybe something using `background-image: radial-gradient()` would be the best approach — Lennholm, May 09 '17 at 18:19
Someone did that here, but I couldn't get it to work: http://stackoverflow.com/a/8286622/3079356 — keyboardface, May 09 '17 at 18:21
It's not technically the same question but see something similar I did here http://stackoverflow.com/questions/43355198/extend-svg-mask-without-stretching — Ian, May 09 '17 at 18:22
Thanks for link - seems like a similar approach could work. I'll post the solution here once I get it working. — keyboardface, May 09 '17 at 20:29

score 3 · Accepted Answer · answered May 09 '17 at 19:28

I think you are overthinking the solution.

All you need to do is place a semi-transparent SVG over the top of your background. No masks are required.

var circ = document.getElementById("circ");

// Every second update the position and size of the circle
window.setInterval(function() {

  circ.setAttribute("cx", getRandomNumberMinMax(30, 70) + "%");  
  circ.setAttribute("cy", getRandomNumberMinMax(30, 70) + "%");  
  circ.setAttribute("r", getRandomNumberMinMax(20, 40) + "%");  

}, 1000);


function getRandomNumberMinMax(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

body {
  background-image: url(http://bennettfeely.com/clippy/pics/pittsburgh.jpg);
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
}

<body>

  <svg>
    <g opacity="0.5">
      <rect x="0" y="0" width="100%" height="100%" fill="blue" />
      <circle id="circ" cx="50%" cy="40%" r="30%" fill="red" />
    </g>
  </svg>

</body>

The key thing here is that inline SVG is totally able to be manipulated by JavaScript. Which is awesome. — Niet the Dark Absol, May 09 '17 at 19:31
This is exactly what I was trying to do. You. are. awesome. Thank you :) — keyboardface, May 09 '17 at 22:14

Circle Clip Mask attached to Cut Out Circle Div

1 Answers1