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
Related
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.
Animated Motion Background Effect
i have tried the answers from the question above, but not exactly what am looking for, i am looking for a way to create the same background effect like the one on this webpage: https://fonoapi.freshpixl.com/ any tips or how-to on how i can create it? i came across it and wanted to know how i can achieve the same effect or create a new one.
That effect has been created using a particle api that can be found on GitHub https://github.com/VincentGarreau/particles.js
It has nothing to do with css and/or css animations, it is basically a particle simulation rendered to a html canvas element.
I'm new in drawing with HTML5 canvas, now, I've done the following demo:
https://dl.dropbox.com/u/4423757/demo2Canvas.html
so here are my questions:
How can I make disappear the red lines in the silver shadow?
Should use SVG in this case?
Thanks!
You should not use SVG because it is much harder to make animations and SVG is not even efficient for that.
About the main problem, I couldn't solve it but I think that it is caused due to the fact that the shadows are being drawn in exactly the same place has the "155%" are. So to solve this, assuming I'm correct, the shadows need to be thicker.
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
I have a small project I am working on HTML5 canvas and I wanted to get some ideas how to accomplish it. I have built an outline of a tree using all the canvas line functions. lineTo, bezierCurveTo, quadracticCurve, etc. I have attached a picture of the outline. Now, what I would like to do is have some code that fills a percent of this outline. Kind of like a progress bar starting from the bottom. Does anyone have ideas on how to accomplish this?
Thanks
Rather than thinking of the problem as having to fill a percentage of the inside of the tree, why not split the image into two layers, the tree and the "fill", and then draw one over the other. See my image below for a quick and dirty example.
Of course, you will need to obscure the rest of the "fill" layer, so you will need to fill the outside of the tree shape white, but this should be fairly easy as you already have the path worked out. In essence, your path would instead of being the outside edge of a a tree shape, become the inside edge of a tree shaped hole!