Максим

linear-gradient or svg

1) https://jsfiddle.net/prLsb04f/8/ - linear-gradient
2) https://jsfiddle.net/8u94vdgo/25/ -pseudo element
3)https://jsfiddle.net/712x3s40/11/ svg element

https://codepen.io/lisebee/pen/EXOOjo
https://codepen.io/masha_feilyk/pen/zPwdzP

в кодепен всё есть

Я перепечатовать не буду SVG но скажу так : любая векторная графика не кроссбраузерно работает при hover и потому напридумывали кучу разных библиотек svg.js tween.js и.т.д , очень нужно применять modernizr.js
анимация smil - не поддерживается в IE11 и ниже и не поддерживается в Edge , на англоязычном stackoverflow часто появляются вопросы "как же это сделать для Edge" на том же hongikat.com вообще целая полемика на эту тему но их примеры при просмотре в IE или в Edge так же не работают

вот аналогичная тема на русском ресурсе ... с полезной ссылкой на git

Вот так вроде бы https://jsfiddle.net/1zj3no6e/49/ но jQuery надо допилить, выпадает субменю во второй ссылке

jsfiddle.net/nzx2cm37/5 толщину подберёте сами
jsfiddle.net/nzx2cm37/10 svg - не знаю сможете работать с ним или нет

ищите по тегу unminity html

Этого будет достаточно : https://www.w3schools.com/Php/php_mysql_delete.asp
и перед mysqli не ставьте @ или $ - не надо гасить ошибки , их надо устранять

blend-mode

это обычный линейный градиент 45deg https://jsfiddle.net/4b2n7dp5/9/

https://jsfiddle.net/9sftq6wv/15/ а дальше сами уже