Curved Type using shape-outside (or other solutions?)

Thank you Archibald!

Everybody — I have a clean vector of this image in SVG format and I’m attaching it here! I can now test Archibald’s theory against csstricks’ solution off of a clean SVG original! I’ll report back and let you know how I fared . . .

ribbon-8881930.zip (19.1 KB)

EDIT: I can’t use Archibald/csstricks’ example because I can’t detach the curve from the image without Photoshop.

@snadyleiby ? . . .

This is cherry snady. I just wanted to thank you (again). :biggrin: See my most recent — I just uploaded a perfect SVG ORIGINAL of this little beauty!

39,202 characters! and somewhere in there is the curve. We really can’t access this without Photoshop. Snady? Archibald? Paul get back to the beach lol. And wear your sunblock.

No you are mistaken. It just removes the background gradient. You obviously did not check with the code I gave you.:slight_smile:

Would love to but in the airport lounge at this minute :frowning:

1 Like

What curve?

Alright I’ll go look at it right now. :biggrin:

The curve you’re typing to. I’ll do a screenshot but note this is off of the rough PNG not the vector I just uploaded. :biggrin:

It works. I found my error (two actually): First, I used

background-color: #00000000;

and second — which completely broke the page (well thank you Captain Obvious d’uh lol) — I removed the gradient . . . and then didn’t close the tag with a semicolon but just left a comma there, flapping in the wind. I’m amazed it could display my name! Thanks Paul. :biggrin:

1 Like

In that SVG, what appear to be black lines are closed curves (i.e. shapes) filled with black. The curved area in which the text sits is not anywhere in that SVG.

1 Like

I’m sorry Archibald you are absolutely correct. Paul explained this to me some weeks ago and I forgot. Well if you didn’t type to that black see-thru then you are typing to something to get your (excellent btw) curve eh? How did you get it?

Ah! Lightbulb! Disregard my prior post Archibald.

You really did an exquisite job of this Archibald I can’t thank you enough. You just nailed that curve! ~~er, angle. rotation. thing. :tongue:

1 Like

3 concepts in color, courtesy of “Deep Archibald”. What was interesting to me was to see the hammered metal effect of rendering the parchment background (image 2) in greyscale. It takes on this medieval jousting mail look that’s just wicked! I could pair it with an Old English font and really go to town with it but I just wanted to share these 3 right now . . .

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.