Write text on shape path

Question

Is there a way to write text around a shape in js/css? I tried SVG libraries but I didn't find one that could write text around a shape, not inside.

I'd also like the text to move like in a marquee but in 2 dimensions, but this is a not crucial extra feature.

A solution I found is to export from After Effect an animated SVG with Lottie/BodyMoving, the problem with this solution is responsiveness.

Here is an example. Thanks in advance

Answer 1

I see there are already a few answers. This is mine:

The path I'm using i twice as long as the length of the rect and "coils" twice. I'm animating the startOffset and when the startOffset is at 50% I'm making it 0%.

let so = 0
function Marquee(){
  requestAnimationFrame(Marquee)
  tp.setAttributeNS(null,"startOffset",so+"%");
  if(so >= 50){so = 0;}
  so+= .05
}

Marquee()

svg{width:100vh;font-family:Helvetica}
path{stroke:black; fill:none}

<svg viewBox="0 0 300 200">
  <path id="the_rect" d="M20,20H280V180H20V20H280V180H20V20z" />
   <text stroke="#000000" font-size="20">
      <textPath id="tp" xlink:href="#the_rect" startOffset="0%">
            I'd also like the text to move like in a marquee but in 2 dimensions, but this is a not crucial extra.
      </textPath>
    </text>
</svg>

Answer 2

The SVG <textPath> element lets you define shapes for texts to run along. If the shape is a closed path, the amount of text shown is dependent on what fits around.

Note that the path runs clockwise. If it ran counter-clockwise, the text would be on the inside, theroretically unless you set side="right" - but that is part of the SVG2 spec, and is not yet implemented in all browsers.

Animation is tricky, as text does not "wrap around", it runs from the start to the end, and which part of the text you see changes during its course. These SMIL animations also do not run natively in IE/Edge, you would need to use the FakeSmile polyfill.

text {
  font-family: sans-serif;
  font-size: 10px;
}

<svg viewBox="0 0 300 150">
  <defs>
    <path id="shape" d="M20,20H280V130H20Z" />
  </defs>
  <text>
    <textPath xlink:href="#shape">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
      <animate attributeName="startOffset" from="-400" to="0" dur="10s" repeatCount="indefinite" />
    </textPath>
  </text>
</svg>