An svg that centers the text and pads it as best it can to fit on most screen/canvas sizes.

svgdatauri.txt

data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20.title-container%20%7B%0A%20%20%20%20%20%20font-family%3A%20Arial%2C%20sans-serif%3B%20%0A%20%20%20%20%20%20font-size%3A%2012px%3B%20%0A%20%20%20%20%20%20fill%3A%20black%3B%0A%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20text-overflow%3A%20ellipsis%3B%0A%20%20%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20%20%20box-sizing%3A%20border-box%3B%20%20%2F*%20Includes%20padding%20in%20the%20element%20size%20*%2F%0A%20%20%20%20%7D%0A%0A%20%20%20%20rect%20%7B%0A%20%20%20%20%20%20fill%3A%20white%3B%0A%20%20%20%20%20%20stroke%3A%20black%3B%0A%20%20%20%20%20%20stroke-width%3A%201%3B%0A%20%20%20%20%7D%0A%20%20%3C%2Fstyle%3E%0A%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%220%22%20y%3D%220%22%20width%3D%22200%22%20height%3D%22200%22%3E%0A%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22display%3A%20flex%3B%20justify-content%3A%20center%3B%20align-items%3A%20center%3B%20height%3A%20100%25%3B%20width%3A%20100%25%3B%22%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22title-container%22%3EAbsolutely%20Any%20Sized%20Title%20Can%20Go%20Here%3C%2Fspan%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E

svgfordisplayingbasictext.txt

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .title-container {
      font-family: Arial, sans-serif; 
      font-size: 12px; 
      fill: black;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px;
      box-sizing: border-box;  /* Includes padding in the element size */
    }

    rect {
      fill: white;
      stroke: black;
      stroke-width: 1;
    }
  </style>

  <rect x="0" y="0" width="100%" height="100%" />
  <foreignObject x="0" y="0" width="200" height="200">
    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;">
      <span class="title-container">Absolutely Any Sized Title Can Go Here</span>
    </div>
  </foreignObject>
</svg>

test.svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .title-container {
      font-family: Arial, sans-serif; 
      font-size: 12px; 
      fill: black;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px;
      box-sizing: border-box;  /* Includes padding in the element size */
    }

    rect {
      fill: white;
      stroke: black;
      stroke-width: 1;
    }
  </style>

  <rect x="0" y="0" width="100%" height="100%" />
  <foreignObject x="0" y="0" width="200" height="200">
    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;">
      <span class="title-container">Absolutely Any Sized Title Can Go Here</span>
    </div>
  </foreignObject>
</svg>

So the idea here is we could take any name from any NFT and concat it into the SVG template above. Then encode it as a Data URI (encodeURIComponent). Then use that as the image URL for any text-based animation_url. It's just a preview thumbnail so it's nbd.