In CSS or SVG, is it possible to warp text so it looks like it is written on a sphere or looked at using a magnifier?
Something similar to this
I have been look over the internet but could not find any guides.
Asked
Active
Viewed 2,830 times
1
-
SVG does not support non-affine transforms, so no you can't do it. – Robert Longson Apr 28 '18 at 06:37
-
if you wrap each letter (or each word) in a span you can do such thing – Temani Afif Apr 28 '18 at 08:12
-
@TemaniAfif I doubt it, the individual letters on the edges are pretty distorted by the non-affine transform. – Robert Longson Apr 28 '18 at 11:35
-
@RobertLongson i guess with some transformation applied to each letter and perspective we may have an approximate thing but of course it won't be a perfect sphere. – Temani Afif Apr 28 '18 at 11:38
2 Answers
0
All of the comments telling that it can't be done are wrong. YES IT CAN BE DONE. Well, it's not easy but possible. Let's start from the beginning.
1. Don't even think about writing the code. You need a vector graphics software. I used Corel Draw to this project.
2. You need to create all text, apply all transformation, style each letter, add shadow, background or whatever you need.
This is a simple project I created. It's a fast draft, but you can style the text exactly as on your photo. You can easily make all letters in the middle bigger than the others.
(sorry it's not in English!)
3. Force Corel Draw or any other program to save svg with fonts not curves.
4. I analyzed the code and I see that each letter is saved separetly as a glyph:
<glyph horiz-adv-x="222" unicode="l"><path d="m63.876 0.23623l-2.504 715.49 87.971 0.33072 2.504-715.49-87.971-0.33072z"/></glyph>
Some other letters are saved as text and transformations are applied:
<text class="fil1 fnt0" x="1045" y="1269"><tspan rotate="335">L</tspan></text>
5. FULL CODE looks like this. It's long. I minified it a little bit.
FIDDLE: https://jsfiddle.net/ubw1rdq7/
SOLUTION 2 - MUCH EASIER
It's not fun if you have each letter saved separetly because the file may be huge. You can save your text as a curve and have only one path. This will behave like an image but you can inline the code into your html.
Here is a fiddle: https://jsfiddle.net/wyfhfjo4/
In both cases all code is over 30kb in size and I made only simple transformations. i hope I gave you some idea how you can achieve desired effect. 99% of the project is to work in vector editing software like Corel Draw and apply all transformation to the text.
For any 3d transformation it's better to transform the text to curves as it will definitely be easier. As an output you will get a path not glyphs.
Jakub Muda
- 6,008
- 10
- 37
- 56
0
It is possible to do this using an feDisplacementMap in SVG, but this is currently bugged in current Chrome, so not very useful to you.
Michael Mullany
- 30,283
- 6
- 81
- 105