Field - input сгибаем несгибаемое

Бодрящего кофе, друзья!
В очередной раз "попало" в поле зрения текстовое поле. Вы когда-нибудь задумывались почему текстовое поле всегда имеет прямоугольную форму и мы никак повлиять на это не можем? - По мне так эту несправедливость надо исправлять :)

Что хотим в итоге получить:
Изогнутое текстовое поле в которое пользователь может вводить текст.

Сказано - сделано, сразу можем пощупать пример в живую:
Сказано - сделано, сразу можем пощупать пример в живую:

На деле всё гораздо легче, чем кажется. Берём svg элемент и в нём создаём текстовую Ноду с определением пути. Оборачиваем всё это в редактируемый слой и наслаждаемся. Если применить смекалку, то для нашего текстового поля доступны все возможности по анимации и дизайну svg элементов.

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

Для тех кто любит в свободное время поломать голову над головоломками, есть пропущенный досадный недостаток, я его специально оставил не реализованным:
Если удалить последний символ, то написать больше нечего нельзя. Забегу наперёд и скажу, что это из-за удаления текстовой ноды у svg элемента.

Присылайте ваши варианты решения в комментариях, будет очень интересно посмотреть. Своё решение я опубликую в следующих статьях, подписывайтесь, не пропустите :)

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