Как нарисовать такой слой?
 

Как нарисовать такой слой:

Светлые области нужны как transparent, что бы накрывающий такой слой отображал находящийся под ним контент(да я знаю что такой z-index но здесь он не совсем подходит по определенным причинам).
Как я понимаю это можно сделать с помощью SVG или Canvas, но что лучше выбрать? Что из этих двух способов будет быстрей при перерисовки при изменении размера окна?

Попробуй посмотреть в сторону масок в SVG: https://developer.mozilla.org/en-US/...ng_and_masking

Спасибо, попробовал, но не очень подходит этот вариант - как я понял маски не сильно отличаются от Clipping - т.е. фактически можно задать видимые области, а мне нужно наоборот - задать не видимые(или сделать прозрачными области) и поскольку таких областей не мало придется прописывать все их координаты через <path> или задавать кучу фигур на подобии <rect> что бы получить нужные пробелы - это очень накладно как-то. Жаль что в SVG нет действия обратного к Clipping и маскам.

Балин. Что мешает забить в гугл «svg inverse clip» или «svg mask hole»?

Все работает: http://codepen.io/ixth/pen/Fvtjx

Спасибо большое! Я забивал вопросы в гугл но очевидно не те что нужно, еще раз спасибо!