Все комментарии о том, что это невозможно сделать, неверны. ДА, ЭТО МОЖЕТ БЫТЬ СДЕЛАНО. Ну, это не легко, но возможно. Начнем с самого начала.
1. Даже не думай писать код. Вам нужно программное обеспечение векторной графики. Я использовал Corel Draw для этого проекта.
2. Вам нужно создать весь текст, применить все преобразования, стилизовать каждую букву, добавить тень, фон или все, что вам нужно.
Это простой проект, который я создал. Это быстрый набросок, но вы можете оформить текст точно так же, как на вашей фотографии. Вы можете легко сделать все буквы посередине больше, чем остальные.
(извините, это не по-английски!)
3. Принудительно Corel Draw или любая другая программа для сохранения SVG со шрифтами, а не кривыми.
4. Я проанализировал код и вижу, что каждая буква сохраняется отдельно как глиф:
<glyph horiz-adv-x="222" unicode="l"><path d="m63.876 0.23623l-2.504 715.49 87.971 0.33072 2.504-715.49-87.971-0.33072z"/></glyph>
Некоторые другие буквы сохраняются в виде текста и применяются преобразования:
<text class="fil1 fnt0" x="1045" y="1269"><tspan rotate="335">L</tspan></text>
5. Полный код выглядит так. Это долго. Я немного его уменьшил.
FIDDLE: https://jsfiddle.net/ubw1rdq7/
РЕШЕНИЕ 2 - НАМНОГО ЛЕГКО
Неинтересно, если каждая буква сохраняется отдельно, потому что файл может быть огромным. Вы можете сохранить свой текст в виде кривой и иметь только один путь. Это будет вести себя как изображение, но вы можете вставить код в свой HTML.
Вот скрипка:
https://jsfiddle.net/wyfhfjo4/
В обоих случаях размер всего кода превышает 30 КБ, и я сделал только простые преобразования. Я надеюсь, что дал вам некоторое представление о том, как вы можете достичь желаемого эффекта. 99% проекта состоит в том, чтобы работать с программным обеспечением для векторного редактирования, таким как Corel Draw, и применять все преобразования к тексту.
Для любого трехмерного преобразования лучше преобразовать текст в кривые, поскольку это определенно будет проще. В качестве результата вы получите путь, а не глифы.