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.
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.
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.
Related
Turns out I’m working with the Autodesk Forge viewer and Three.js, trying to render 2D text that can be interacted with (specifically select, rotate, and move).
To do this I am working with meshes (using MeshBasicMaterial, Mesh and TextGeometry) but it turns out that the text does not look perfectly sharp, it presents aliasing and I found that according to the API reference, the antialiasing is not applicable to 2d.
Here are some examples of the problem, as you can see, the more I move away from the plane, the worse the text looks (and even up close it doesn't look perfect):
I have tried to make a test representing the text with a Sprite (despite the fact that it would mean having to change the entire implementation already made with meshes of other functionalities) but apart from the fact that I cannot see it, I have seen example images and they do not appear either well: aliasing is visible from a distance and it looks really blurry up close. Here some examples:
Is there a way to correct this problem or is this the most I can get in 2D? I've tried searching for information on this but can't find anything helpful. And what has puzzled me the most has been realizing that antialiasing was not applicable in the case of 2d, like making it clear that nothing can be done to fix it.
I would be very grateful if you could solve my doubts, thank you very much in advance for your help.
An easier alternative, is to just use a higher pixel ratio for the renderer...
window.devicePixelRatio=2;
viewer.resize();
For example, using the custom geometry text, from Joao's demo, you can see the same aliasing issue at DPR=0.5 and DPR=1.0 ...
https://joaomartins-forge.github.io/textgeometry-sample/
But when I set the DPR=2.0, the text looks clean. The trade off is rendering performance, but your 2D drawings may be simple enough that it won't matter. You can use a 'mouse up' camera settle trick, to switch between DPR of 1 and 2, if you want a better UX experience.
There are a few ways to solve this aliasing issue for 2D (and 3D text).
The way I would recommend for your use case, is to use DIV elements (THREE.CSS3DRenderer), instead of text converted into three.js tessellated triangle geometry, as shown in this blog post:
https://forge.autodesk.com/blog/how-do-you-add-labels-forge-viewer
You can find out more information about THREE.CSS3DRenderer here:
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer
and an Example here: https://threejs.org/examples/#css3d_periodictable
Using CSS3DRenderer instead of CSS2DRenderer, means you will get the correct scaling (and rotation) of the div element as you zoom into your 2D drawing and the mathematics inside the calculation for the matrix transform has less edge-cases.
Once you are using DIV elements for your text, you will notice that the text is sharper and has no aliasing issues. That's because it is not being rasterized by the webGL pipeline, but by the SKIA library used by chrome/firefox/opera/etc for rasterizing text.
There is one final option, that uses signed-distance fields, but it's probably overkill for what you need.
Let me know if you want some example code.
I have created 20 webpages full of charts for a client. They want to print them as part of a publication so I am needing to turn SVG into EPS.
I've imported a large d3-generated SVG into Illustrator. The CSS is inline so most of the formatting has come through (thanks to this answer: Can I turn SVG and external CSS into EPS?). However there are two problems. One is that three out of four x-axes are replaced by a thick black line. The other is that some of the data (three lines on the bottom right chart) are completely missing. Does anyone have any clues as to what is wrong?
I have looked through the CSS in the hope of finding something that favours one particular axis or tick but can't see anything. I can't share the SVG or page because it's driven by client data, which is confidential.
Grateful for any help
Emma
Original SVG:
New Illustrator EPS:
In case anyone else has the same problem, I thought I'd post how I worked this out. The problem was CSS-related. Illustrator renders CSS differently, and applies slightly different rules to my text editor. In particular:
class names containing underscores are ignored;
font-size using vw are ignored;
where two opposing CSS rules apply, it seems the first rule is taken (haven't tested this properly)
CDATA declarations have to be within the svg tags
Sometimes the path to the element has to be spelled out far more clearly than a browser would require
A bit late to the party but I noticed such artifacts as well with Illustrator. If you open the SVG in any other browser it works fine. My solution was to use InkScape and then re-save the SVG files. After this Illustrator handles the SVG well.
This isn't exactly an answer to your question, but if you're only looking for an image that's of a high enough resolution to print, and don't necessarily care about it being vector vs. raster graphics, you can always use a high-resolution screen (if you have a 4K/5K screen laying around, use that, but an iPad may do the trick too), zoom in so that each SVG chart takes up as much of the screen as possible, then take a screenshot. If you're doing an extremely large high-quality print of just the chart, it may not work, but as long as it's a smaller piece of a larger document, you'll likely get a large enough image that it being raster graphics won't affect the quality of the printing.
This approach certainly has its disadvantages, but it's relatively quick, simple, and gets the job done.
EDIT: It looks like printing to a PDF will also preserve SVG graphics, and (at least on my computer) there doesn't appear to be any differences between the two images. Once it's in PDF, you'll be able to import into Illustrator pretty easily, and extract the actual SVG graphics from there.
I want to know how to draw a text like this style ( curved) using only CSS please help me
It isn't super straightforward, but I suppose it could be done. Take a look at this article: Set Text on a Circle. Not the exact same thing, but same idea. You'd need to do it per character or section of words to do it.
A potentially easier solution would be to use Javascript/jQuery. But I know this doesn't meet your CSS only requirement. Consider looking at ArcText.js as an option if you feel CSS isn't doable for you.
There is also a tool that does this for you: CSS Warp - CSS Text to Path Generator. This would match exactly what you want, and generate the code for you for various browsers. I've never used it before, but seems nearly fool-proof.
Here is an example using CSS Warp. I spent about 5 minutes. It gets you pretty close to what you want, and you can polish it up more. Then just use CSS to add the rest of the styling.
Is it possible to animate text/object with 'end' in after effects just like you do with strokes? How can I achieve this? See the video and you'll understand what I wan't to achieve.
YouTube - Guy showing the 'end' on a stroke
Cheers,
Tommie
I think I see what you are asking. You want the shapes of a text layer (the actual lines of each character) to actually build on, right? Can't be done like that. Even if you use text and convert to shapes, you are looking at a world of pain because of the way letters are built by most fonts (for one thing, the shapes are actually filled, not stroked -- strokes are outlines).
The only way I would do this is by using the Element 3D plugin in After Effects and Cheetah3D (or whatever 3D tool you want to use). In Cheetah, I'd create the text shapes as extruded 3D text. Then I'd use the "Build" modifier ("Linear" setting) to progressively build the text. Then I'd export that out as an OBJ sequence (script for this is available on cheetah forum site -- I wrote it) and bring that sequence into Element3D and work with it that way. That will work. And as far as I know, that's the only way with a decent amount of control. Wedding video? Just curious. :-)
I have this project that it's due in a few hours and I still have a report to write... The project has nothing to do with Dot, but we were asked to draw a Graph with Dot, which I did.
It looks something like this:
http://img683.imageshack.us/img683/9735/dotj.jpg
The longer arrows represent smaller weights and the shorter arrows represent bigger weights. There isn't any problem in submitting my project like this, it does what's is supposed to do and this Dot thing is just an extra.
But I would like to make it pretty, I just don't have time to learn about Dot right now. Basically, all I want is make pretty. Perhaps, a bigger height for the page, like A4 paper size. And have the graph display more to the bottom than everything to the side.
What should I put on my .dot file to make it look better?
There are a lot of options that can help to fix this problem. Setting the size option to be whatever the dimensions of an A4 sheet of paper are would be a good start. The GraphViz guide goes over most of the relevant options pretty thoroughly (see page 14 of this pdf, it's not as long as it looks, only 2 or 3 pages for the relevant info).