Как сделать дырки (технологические отверстия) вот таким образом?

Question

[Максим]

Тренеруюсь с вёрсткой но вот такой шаблон попался с дырками ...
Вопрос теоретический ...как сделать эти дырки ?



Не хотелось бы PNG

Отдельное спасибо 0xD34F так как вариант решение суперуникальный и его способности в js суперские

Я же всё же сделал на SVG но не через редактор а руками : https://codepen.io/topicstarter/pen/gqvdYr

Comments

[Dima Polos]

Есть такой css-blend-mode, не самый кроссбраузерный, но, так как сейчас почти все хром, может сгодиться.
https://developer.mozilla.org/ru/docs/Web/CSS/mix-...

[HamSter]

Максим Ленский , Видел?

@HamSter ааа....мой вопрос был отредактирован ...там был другой текст ...изначально этот вопрос задал мой Шеф Максим Ленский на тостер но доделать отдал мне - т.е найти способ легко менять цвет заливки ..т.е что бы без матрицы цветов менять в более тёмный цвет ...вопрос отредактировали и удалили эту часть но вот ту оставили ..и получился набор символов – Павел Варшавский 25 минут назад

=))))))))))

[Максим]

HamSter, вот откуда такие решения .... Сашина Рука ...надо было мне сразу понять что это не Паши решение ....забыл уже AlexandrTT руку ...спасибо за ссылку Леночка...

[HamSter]

Максим Ленский, эксплуатируешь Варшавского или все же нанял для работы?)))

[Максим]

HamSter, он работает у меня примерно с лета ...точно не помню ...джуниор пока ...на мидла не тянет ...я его пока нагрузил на SVG ...посмотрим что сможет ...буду читать ruSO как он мозг выносить ...посмеюсь ...

[HamSter]

Максим Ленский, так это он из-за тебя на ruSo всех мучает )))))

[Максим]

HamSter, ну да....но только я ему говорил самостоятельно решать ...а он на SO на меня свалил ...типа я ему дал такое задание ....

[HamSter]

Максим Ленский, А что за работа, может быть и я джуном смогу?!

[Максим]

HamSter, я его воспитываю ...пока два проекта он не включен ни куда ...

[Максим]

HamSter, Леночка сорри у меня штат укомплектован ...

[HamSter]

Максим Ленский, вот так всегда))) Что ж удачи вам в проектах!

[Максим]

HamSter, без обид Леночка ...

[HamSter]

Максим Ленский, да какие обиды?!))) Я шучу, Максим!

Answer 1

[0xD34F]

например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.

Comments

[Максим]

я не понял не фига ...

[0xD34F]

Максим Ленский, дополнил ответ.

[Максим]

0xD34F, Самое интересное что в любом редакторе тот же фокус ни сделаешь - по крайней мере я не могу это сделать

[RAX7]

Максим Ленский, так он по сути рисует составной контур на js. Вручную можно сделать так:

1. рисуем большой прямоугольник с заливкой и размерами нужного svg (например как у вас 500х400)
   
2. поверх этого прямоугольника рисуем еще один поменьше - это будет дырка
   
3. выделяем их оба
   
4. 
   
   • в иллюстраторе открываем панель "обработка контуров" (Pathfinder), нажимаем на иконку "минус верхний" (Subtract from Shape Area)
     
   • в инкскейпе Path ->Difference
     
   
   
5. экспортируем в svg
   

[Максим]

RAX7, я делал это и в люстре и в инкскапе и в кореле - маска не работала - в браузере - в итоге сделал в ручном режиме ... щас загвоздка как менять яркость изображению с фильтром ...но нагрузил своему junior наверно разберётся

[RAX7]

Максим Ленский, там нет маски, должен получиться один path вида:
d = M описание большого прямоугольника M описание отверстия M описание отверстия ....
В люстре должно выглядеть вот так

Answer 2

[Павел Куноф]

На самом деле очень просто:
Создаешь родительский элемент c opacity, border-radius, overflow: hidden
В в нём создаешь дочерние элементы с заливкой #000, и позиционируешь их как нужно

Comments

[Максим]

https://codepen.io/topicstarter/pen/mvXomY - это конечно лучше но искать эти дырки геморойно

Answer 3

[forspamonly2]

имхо, самый простой вариант - это градиентами.