Creating custom shape using only CSS [duplicate] - html

How can I build a wave on a transparent image background ?
Layout-Image:
I need the wave in the white top background.


I slightly improved version of akshay's answer. This includes two separate options.
OPTION 1
If aspect ratio doesn't have to be preserved, then the curve will change with width.
http://jsfiddle.net/f6n73avk/2/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
<path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>
OPTION 2
If the aspect ratio has to be preserved, then we have to use same units value for height and width of svg element.
http://jsfiddle.net/o1eghm7v/1/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
<path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>
See here I used width and height both as 100%. To change the colour you have to change the value of fill attribute.
Also, I have used absolute path commands as they are simpler to edit.
Explanation
M - command moves the drawing point to the the coordinates specified after it, or 0,5 (SVG coordinate system)
H draws Horizontal line to specified X-coordinate from the current point (0,5)
C draws cubic bezier, with first point coords as first handle, second second handle, and third is the end point.
S draws a cubic bezier, but its first handle is the reflection of the last handle of last C command about the end point of last C.
V draws vertical line to specified Y-coordinate.
Z closes the path, ie draws a straight line from current point to last M point.


Not exactly like it Fiddle
<svg width="500" height="200">
<path d="m 0 100 l 40 0 q 50 0 60 10 100 80 250 0,100 -20 155 0 v 200 h -500 z" stroke="red" fill="orange"/>
</svg>

Related

Why do only the first two curves of this SVG display in Firefox?

Why does this SVG display in its entirety in Chrome, but not in Firefox? It is handcrafted, and I'm trying to figure out if I missed something, or I'm using it incorrectly - or, if it's instead just a problem with Firefox.
The correct display would seem to be Chrome's (six 'bumps' visible), while in Firefox it only displays the first two curves (the first 'bump').
<svg width="450" height="50" viewBox="0 0 450 50">
<path d="M0,0 C13.642086,0,23.815591,50,37.457677,50 C51.099763,50,61.273268,0,74.91535384383405,0,C88.557440,0,98.730945,50,112.37303,50 C126.01512,50,136.18862,0,149.8307076876681,0,C163.47279,0,173.64630,50,187.28838,50 C200.93047,50,211.10398,0,224.74606153150216,0,C238.38815,0,248.56165,50,262.20374,50 C275.84582,50,286.01933,0,299.6614153753362,0,C313.30350,0,323.47701,50,337.11909,50 C350.76118,50,360.93468,0,374.5767692191703,0,C388.21886,0,398.39236,50,412.03445,50 C425.67653,50,435.85004,0,449.4921230630043,0"></path>
</svg>
Note: There is a similar question from 5 years ago, Why are my SVG bezier curves broken in Firefox?
However it seems to be unresolved, and a tangentially related bug linked there was fixed at that time.

From this reference, you have not made the svg path d correctly due to the rules.
Also reference this.
The problem is the comma between statements.
<svg width="450" height="50" viewBox="0 0 450 50">
<path d="M0 0 C13.642086 0 23.815591 50 37.457677 50 C51.099763 50 61.273268 0 74.91535384383405,0 C88.557440 0 98.730945 50 112.37303 50 C126.01512 50 136.18862 0 149.8307076876681,0 C163.47279 0 173.64630 50 187.28838 50 C200.93047 50 211.10398 0 224.74606153150216,0 C238.38815 0 248.56165 50 262.20374 50 C275.84582 50 286.01933 0 299.6614153753362,0 C313.30350 0 323.47701 50 337.11909 50 C350.76118 50 360.93468 0 374.5767692191703,0 C388.21886 0 398.39236 50,412.03445 50 C425.67653 50 435.85004 0 449.4921230630043 0"></path>
</svg>

SVG clipPath on a div border

I'm trying to get a div's border to follow the pattern of an SVG going through the following answer on SO:
Clip div with SVG path
I have the following HTML:
<div class="container">
<svg height="850px" width="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="svgPath" >
<path style="stroke: none; fill: red" id="arrow" d="M 50 0 C 10 150 80 130 50 170 C 10 260 80 220 50 310 C 10 420 80 380 50 510 C 50 520 80 500 50 600 C 10 700 80 680 50 720 C 10 800 80 780 50 830 " />
</clipPath>
</defs>
<rect width="100%" height="100%" fill="green" clip-path="url(#svgPath)" />
</svg>
</div>
It gives me a pretty different result though. The following is a Plunker of the code:
https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview
Thanks :)

I figured it out. Initially as in the Plunker above, it was turning the swiggly line into a strange figure in the following way:
The above is this Plunker: https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview
However, it's basically adding a Z at the end of the SVG, so it's reconnecting to the beginning. Then I figured out it needs to actually have points that would define a rectangle, with one of the sides being the swiggly line. So I added two additional points on the top-left and bottom-left at the beginning and end of the SVG.
Plunker with the working example:
https://next.plnkr.co/edit/CjNqIDcEFcri4S7K?open=lib%2Fscript.js
(It's not fancy but works to visualise if someone stumbles upon this)

Does SVG path element support a lifting of the pen?

In SVG there are different commands used such as move pen, draw line, draw curve and so on like so:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
Is there a command that lifts the pen and then sets the pen down again? As an example, is there a single value of SVG path data that would draw parallel lines that do not intersect inside a single path element?
More info on SVG on MDN.

Thanks to #RobertLongson for pointing this out.
I can use move more than once. In this case it is in the middle of the statement.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 M 10 90 H 90" stroke="red"
stroke-width="3" fill="none"/>
</svg>

Create a simple wave with SVG issue

I am trying to create a simple wave with SVG to put on my website. This is what I've come up with so far:
<svg height="100" width="500">
<path d="M 0 50
Q 125 0, 250 50, 375 100, 500 50
L 500 100
L 0 100
L 0 50
Z" stroke="blue" stroke-width="1" fill="red" />
</svg>
https://jsfiddle.net/a5q41t26/
The problem is that I can't align the bottom of the path with the bottom of the lower wave to avoid the gap.
Any help would be appreciated.

The first coordinate pair, of the two pairs in a Q path command, is a control point. The curve does not pass through the control point.
Have a look at the section on Quadratic bezier curves in Wikipedia.

<path> (SVG) - elliptical arcs with big angles are working incorrectly

I'm trying to create pie chart (circle chart) using SVG. I decided to use path elements to represent different diagram slices. I think that an opportunity to use elliptical arcs for building paths looks great for this task.
But I faced a problem.
For example, I want to create a diagram of 2 slices. One of them will take 1/4 of the circle, another one 1/2. Here is my code:
<svg width="200" height="200">
<path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
<path d="M100 100 L100 200 A100 100 0 0 1 100 0 Z" fill="#0000FF"></path>
</svg>
Everything looks fine while the angle of the second slice is 180 degrees.
Another example. The first slice takes the same 1/4 of circle. And the second one takes 3/4.
My code:
<svg width="200" height="200">
<path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
<path d="M100 100 L100 200 A100 100 0 0 1 200 100 Z" fill="#0000FF"></path>
</svg>
I can fix this by setting 'large-arc-flag' attribute to 1 for the second slice:
<svg width="200" height="200">
<path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
<path d="M100 100 L100 200 A100 100 0 1 1 200 100 Z" fill="#0000FF"></path>
</svg>
But here are my questions:
1) Just because of my curiosity, can someone explain why is it working like this in the second snippet?
and
2) If I'm adding slices in the loop dynamically depending on an array of values, how to calculate when I have to set 'large-arc-flag' to 0 and when to 1?
UPDATE: Sorry, second question possibly is a duplicate: link

There are always two posible arcs within the same rectagle, so you have to define which one you want, in this case 0 = the small one 1 = the big one.
To see if the Arc is large or not, you just have to look if the slice is more than 1/2 of the total.