Last active
August 29, 2024 19:51
-
-
Save johnnyshankman/325c5649d92b7060b5153685db6f5486 to your computer and use it in GitHub Desktop.
An svg that centers the text and pads it as best it can to fit on most screen/canvas sizes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So the idea here is we could take any
namefrom 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-basedanimation_url. It's just a preview thumbnail so it's nbd.