Как изогнуть input?

Хотелось бы сделать из этой палки изогнутую палку

Боюсь спросить на сколько изогнутую, как пример не?
https://jsfiddle.net/vtLn0596/1/

<script language="JavaScript">
function setMyTextValue() {
 myTextValue = "bla-bla-bla";
}
</script>
<form>
    <input type="hidden" name="myTextValue" />
    <svg onChange="setMyTextValue()">
</form>

Примеры можно найти здесь.

Сам input изогнуть увы никак нельзя, если функциональность инпута вам необходима, попробуйте такой костыль - добавьте на место инпута SVG как предложено в других ответах, рядом поставьте инпут с {display:none} например.
повесьте на SVG обработчик кликов, в котором по клику на рисунок перемещайте фокус на input input.focus(). А на инпуте повесьте обработчик на событие "input" в котором изменяйте содержимое текстовой строки в SVG

svg.querySelector("здесь_селектор_текстового_элемента").innerHTML = input.value;

1. www.olivermusebrink.de/beta/curvedtext
2. https://github.com/codrops/Arctext
3. https://circletype.labwire.ca/
4. https://css-tricks.com/snippets/svg/curved-text-al...
5. https://www.visualcinnamon.com/2015/09/placing-tex...

BONUS: roundsliderui.com