Как реализовать эффект вырезанных кусков в затемненном блоке?

Question

[Mikhail Rerberg]

Всем привет!

Нужно создать обучающую, интерактивную демку. Вокруг блока, на котором должен сфокусироваться пользователь, пропадает затемнение. Есть идея вставить 'тень' c заранее вырезанными кусками картинками и менять в зависимости от шага, но я хотел бы узнать, сталкивались ли вы с такой задачей и как вы её решили?

Заранее спасибо.

Answer 1

[RAX7]

Canvas либо svg поверх страницы сделай и на нем js`ом рисуй кружочки

Comments

[Mikhail Rerberg]

Благодарю за то, что потратили свое время на решение моей проблемы)

Answer 2

[Brad9aga]

Как сделать ссылки с прозрачным фоном?

Comments

[Mikhail Rerberg]

Спасибо

Answer 3

[gracer]

может вам не круги подойдут
xbsoftware.github.io/enjoyhint

Про тень попробовал https://codepen.io/gracer/pen/yLBePRY
Т.е. смысл элемент с тенью располагать и растягивать с js высчитывая от положения и размеров нужного элемента

Comments

[Mikhail Rerberg]

Спасибо за ответ