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

#css #html5 #svg #canvas #svg_animation

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

Ответы

Ответ 1

Сложный способ:

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


рисуем текст на одной канве а линию на другой
объединяем изображения, имитируя буфер глубины




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



Ответ 2

В предыдущих ответах уже были высказаны идеи, как реализовать эффект прохождения
линии сквозь текст:  

1. @hu-fo-of-ex


  В голову приходит только вариант с двумя линиями, но как ты это будешь
  анимировать, я не знаю. 


    

2. @Анатолий Шевелев  


  Можно часть линии, которая проходит "под" буквой, перекрыть
  каким-нибудь белым блоком.  


Конечно эти идеи лежат на поверхности, но как их реализовать?  

Техника реализации по шагам  

Это универсальный подход для реализации верстки точь в точь по макету дизайнера.
При этом не надо высчитывать, подбирать отступы, пропорции взаимного расположения элементов
вёрстки, мучатся с адаптивным дизайном. Всё будет адаптивно, на месте, не развалится
при смене размера дисплея.


Загружаем в векторный редактор SVG файл со скриншотом автора вопроса


  




	 





Используя существующие контуры линии рисуем инструментом - "Рисовать
кривые Безье и прямые линии"(красная стрелка на рисунке)  вдоль
направляющей три линии (зелёные стрелки)


Линия номер 2 будет закрашена белым цветом под фон буквы, линии 1 и 3 будут закрашены
фиолетовым цветом   

  


Каждая буква имеет свой path Для этого в векторном редакторе после
написания текста выбираем в меню  - Контур \ Оконтурить объект  
Сохраняем файл в формате *.svg    
Прогоняем его через оптимизатор SVG-EDITOR  
Для создания объема добавляем тень буквам и линиям  



    
       
       
       
        
         
      
    
  



Добавляем анимацию покачивания линии - поворот на 10 градусов и обратно  





Полный код  



.container {
width:50%;
height:50%;
}
.s0{
	-inkscape-font-specification:Tahoma;
	fill:#fff;
	font-family:Tahoma;
	font-size:53.3;
	letter-spacing:0;
	line-height:13;
	word-spacing:0;
	
}







Приложение полностью адаптивно, работает во всех современных браузерах, кроме IE


Ответ 3

В голову приходит только вариант с двумя линиями, но как ты это будешь анимировать,
я не знаю. 



div {
  position: relative;
  font-size: 5rem;
  font-family: sans-serif;
  text-transform: uppercase;
}

.line {
  position: absolute;
  left: 0;
  height: 160px;
  width: 10px;
  
  background-color: tomato;
}

.hello__line {
  transform: translateX(160px) rotate(50deg);
  z-index: -1;
}

.worlds__line {
  transform: translateX(50px) rotate(50deg);
}
hello 
world 


Ответ 4

А зачем вам это? Экспортируйте картинку с линией как одно целое из дизайна) Ведь
в дизайне, наверно, линия проходит так как вам нужно?)


Ответ 5

Можно часть линии, которая проходит "под" буквой, перекрыть каким-нибудь белым блоком.
Конечно придется этому блоку задать абсолютное позиционирование position: absolute
и z-index больше чем у надписи и у линии. 
Могут возникнуть проблемы если сама надпись тоже должна анимироваться