Как сделать иллюзию того, что линия проходит в букву насквозь через отверстие, а не поверх нее

пример того как выглядит, а заголовок то что должно получиться

Ответ
Сложный способ:
Можно что-то подобное изобразить на канве, это конечно не буфер глубины, но подход в целом тот же. Тут еще необходимо поработать со смешиванием, для удаления черных пикселей
рисуем текст на одной канве а линию на другой объединяем изображения, имитируя буфер глубины


let ctx1 = canvas1.getContext('2d'),
ctx2 = canvas2.getContext("2d"),
w = canvas1.width, h = canvas1.height

requestAnimationFrame(draw)

function draw(t) {
requestAnimationFrame(draw)
drawText(ctx1)
drawLine(ctx2, t)
composeImages()
}

function composeImages(){
let imageData1 = ctx1.getImageData(0, 0, w, h)
let imageData2 = ctx2.getImageData(0, 0, w, h)
for (let x=0 x for (let y=0 y let o = (y*w+x)*4

// если прозрачность пикселя картинки, где нарисована
// линия меньше 100 - оставляем текст
if (imageData2.data[o+3]<100) continue <br>
// если пиксель левее центра буквы и данные пикселя есть
// (не 0 прозрачность) в обоих канвах, берем в качестве источника
// канву, где нарисована линия, иначе - берем канву с текстом
let src = x < 145 || !imageData1.data[o+3] ? imageData2 : imageData1
for (let i=0 i<4 i++)<br> imageData1.data[o+i] = src.data[o+i]
}
}
ctx1.putImageData(imageData1, 0, 0)
}

function drawText(ctx) {
ctx.clearRect(0,0,w,h)
ctx.fillStyle="white"
ctx.font="50px Arial"
ctx.fillText("example text",10,90)
}

function drawLine(ctx, t){
ctx.clearRect(0,0,w,h)
ctx.strokeStyle= `hsl(${Math.sin(t/1400)*180},75%,75%)`
ctx.lineWidth = 4+Math.sin(t/500)
ctx.beginPath()
ctx.moveTo(90+Math.sin(t/300)*5,10)
ctx.lineTo(200,140+Math.cos(t/500)*5)
ctx.stroke()
}