Что было бы хорошим решением для подгонки текста к кругу на веб-сайте, чтобы он соответствовал кривым окружности, а не прямоугольному ограничивающему прямоугольнику?

Вот'что яЯ пытаюсь достичь: на странице есть несколько черных кругов (фиксированного размера) с текстовой областью рядом с каждым из них. Когда текст вводится в текстовую область, он появляется в черном круге, где он центрируется по обеим осям. Если ввести столько текста, что строка станет длиннее радиуса круга, за вычетом заданного значения поля, линия оборвется, как и следовало ожидать от обычного переноса, при этом блок текста по-прежнему центрируется. Линии ближе к верху или низу, конечно, будут короче, чем те, что ближе к середине.

Текст будет иметь фиксированный размер, и когда круг будет заполнен текстом, дополнительный контент не должен отображаться (например, переполнение скрыто).

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

Поддерживает ли это какая-нибудь из фантастических библиотек SVG / Canvas, или мне придется изобрести наш метод с нуля?