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

user_7897395 · Answer

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}

user_4996779 · Answer

The SVG 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;
}

user_10285680 · Answer

Yes, you can 'wrap' text to an SVG 'path', with just JavaScript, and then you can animate it using something like TweenMax by Greensock. The text will be along the 'outside' of the path. So if you have an object, just get the surrounding 'path' of that object to use. See example below I made, it gives details on how to add the text to the path and then how to animate that text.

document.getElementById("MyPath").setAttribute("d",document.getElementById("thePath").getAttribute("d"));
var tl = new TimelineMax({repeat:-1});
tl.from("#yourText",5,{attr:{startOffset:'100%'}});  
tl.to("#yourText",5,{attr:{startOffset:'-100%'}});

body {
  background-color: #222;
}

svg {
  overflow: visible;
  left: 50%;
  top: 50%;
  position: absolute;
  margin: auto;
  transform: translate(-50%, -50%);
}

#yourText {
  font-size: 25px;
}

#thePath {
  fill: #5ca19c;
}

Write text on shape path

3 Answers