Clip Path option for round curves? - html

I'm struggle with a design problem. The client did make a curve in his head-image https://www.dropbox.com/s/9qkz0aa05st5nz5/Screenshot%202018-08-21%2018.47.36.png?dl=0 and I want to make this possible in css.
I have tried clip-path but they wont offer a round curve like in the example. Do you know how I can handle it properly?
Thank you in advance!

I would use Path2D and .curveTo to achieve this. You'd be ready in about 4 lines of code.

Related

How can I make an irregular bubble in CSS3 and HTML5?

I'm trying to find some guide to accomplish this kind of shape by using CSS3:
BUBBLE EXAMPLE
And fit an image inside it. Is it possible? I wonder if this can be randomized aswell?
try to use svg it will work ..https://www.w3schools.com/graphics/svg_grad_radial.asp

Can this shape be drawn in css?

I am struggling currently with creating this effect on my navbar, effectively it will curve down like this but I've had a look everywhere on the web and can't seem to find anything on how to re-create this in css (or if its even possible) If anyone could point me in the right direction or give me some advice on how to achieve this effect it would be greaty appreciated.
Here's the shape:
You can use this tool: http://bennettfeely.com/clippy/ or try clipping path by SVG

Working with html 5 canvas drawing

I want similar functionality for drawing image with smooth curves in html canvas. Can somebody tel me how to get such smooth curves?
I used Smooth.js for a projet and I was pretty convinced by it.
See some examples here.
Highly recommend one of the bests in this category:
http://paperjs.org/examples/path-simplification/
http://d3js.org/

ActionScript 3 Sprite Envelope

I'm quite new to Flash and ActionScript.
Anyway, I wrote my own XML Slideshow, that's working great. The problem I have is that I can't add an 'envelope' effect to the images that are loaded as sprites. I know I can use 'envelope tool' if I break the image apart (ctrl+b) but I need to do it dynamically via AS.
Is there any way to do it.
Rotating the X/Y/Z axis doesn't do what I need.
Looking forward to your replies.
Thanks in advance.
Have you looked at this: http://krasimirtsonev.com/blog/article/distort-movieclip-or-image-in-flash-with-as3?
I think this can help you a lot.

How can I wrap text around a non rectangular image?

Is it possible to wrap text around a non rectangular image?
I want text around maps of different countries to wrap around the country's shape in such a way that the text always keeps the same distance from the country's border even though the border itself isn't straight.
Is this possible?
You can use this method, where you float divs to block off the shape's area.
So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.
It looks like that kind of support is on the horizon.
As Dave said, there is CSSTextWrapper, which is probably the best way to do it at the moment, but a relatively recent W3C working draft outlines a method to use more complex shapes using SVGs, and perhaps raster images with outline detection.
How long it will take for it to be implemented in major browsers, let alone finished, is anyone's guess.
At the moment, it can be done, with difficulty. With luck, it will be much easier in the future.
There's a jQuery plugin called Bagon designed to do exactly this.
As others have already said: yes, it's possible... but it's not so difficult.
Customers tend to like this kind or wrapping, at the end I made a script for it: http://www.miguel-svq.com/textwrap.html
This can use floating divs or slice the image, as you prefer.
There's the well-supported shape-outside CSS property. You can even just give it the PNG and it'll figure out the shape from the alpha channel.