I'm placing some dynamic text in a web application/ to 'fit' on this cylinder. I'm changing the SVG node to add the custom text - and I'm looking for a way to 'warp' it - so that it feels like it's a bit more real. It's imperative that whatever I use translates to web / and also keeps the aspect ratio so that it can match the image. I've been trying every combination of the 'warp' option / so - maybe there's something in the 3D area I can use. Does anything come to mind?

enter image description here

I know that I can use canvas or WebGL - but my question is about how I can use illustrator and SVG to get this looking nice.

  • Dynamic (=changing) and warped text in a webpage - The warping must be done in the web application. That needs a programmer to generate the needed functionality. Check, if he has already visited here github.com/benjamminf/warpjs and left something to use. – user287001 Jul 22 '19 at 1:31
  • This warp.js program is really fun! I'll have to learn how to write the math for the transform though. I have no idea what to toss in there. haha! Thanks for the link. – sheriffderek Jul 22 '19 at 13:30
  • I saw (accidentally, not actually needing it) text "feDisplacementMap" in a listing of some SVG functions. That resembled a Photoshop function which can be used to distort images in quite limited way. But SVG function explanations for feDisplacementMap show that any image pixel can have independent displacements in X and Y dimensions, in Photoshop they are limited to be proportional. If you could rasterize your updated text, you could in theory also warp it with this. I am not a programmer, so I have no idea how to write it as code nor calculate if an acceptable resolution is achievable. – user287001 Jul 22 '19 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.