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

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

• javascript
• css
• svg

• here is almost the same (without animation) : stackoverflow./questions/51352490/… – Temani Afif Commented Oct 29, 2018 at 19:33
• Technically it works, but in that case there is only one word, in my case there is a full sentence and needs to be readable and responsive – Luigi Foscari Commented Oct 29, 2018 at 19:45

3 Answers 3

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>

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 modi consequat.
      <animate attributeName="startOffset" from="-400" to="0" dur="10s" repeatCount="indefinite" />
    </textPath>
  </text>
</svg>

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

<script src="https://cdnjs.cloudflare./ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<svg version="1.1" x="0" y="0px" width="200px" height="200px" viewBox="0 0 363.652 363.954" enable-background="new 0 0 363.652 363.954" xml:space="preserve">
    <defs><path id="MyPath"/></defs>
    <path id="thePath" stroke="#999" stroke-miterlimit="10" d="M515,269H31V30h484V269z"/>
    <text>
        <textPath id="yourText" fill='#88CE02' xlink:href="#MyPath" startOffset="0">Random Text to simulate the text your want to use Random Text to simulate the text your want to use.</textPath>
    </text>
</svg>