Clip a text using polyline - css

I want to clip a text such as a heading1 using svg polyline, the idea is to put the H1 behind the polyline background and make it appear like a frosted or blurred, I've done it before but somehow forgot
<svg height="200" width="100%"viewBox="0 0 100 200" preserveAspectRatio="none">
<polyline id="cliptop" points="
8.3,40
16.6,50
24.9,90
33.2,70
41.5,80
49.8,60
58.1,20
66.4,70
74.4,60
83,40
91.3,50
99.6,80
99.6,200
8.3,200
"
style="fill:rgba(255,255,255,0.75);stroke:none;"
/>
<polyline points="
8.3,40
16.6,50
24.9,90
33.2,70
41.5,80
49.8,60
58.1,20
66.4,70
74.4,60
83,40
91.3,50
99.6,80
"
style="fill:none;stroke:rgba(30,0,0,0.8);stroke-width:7;"vector-
effect="non-scaling-stroke"
/>
</svg>
i'd like to use #cliptop as clip-path in css, I tried the clip-path: url(#cliptop). thanks, any advise would be appreciated

This is one ay of doing it. In this case the points are relative to a very small box (a square of 1x1) and `clipPathUnits="objectBoundingBox"``
h1{
padding: 0;
background: silver;
background-size: cover;
height: 50vh;
-webkit-clip-path: url(#clip);
clip-path: url(#clip);
}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<polyline points="
.083,.4
.166,.50
.249,.90
.332,.70
.415,.80
.498,.60
.581,.20
.664,.70
.744,.60
.83,.40
.913,.50
.996,.80
.996,2.00
.083,2.00
" />
</clipPath>
</defs>
</svg>
<h1></h1>

I've figured it out just like enxaneta replied, here's how it look
<svg height="200" width="100%"viewBox="0 0 100 200"
preserveAspectRatio="none">
<defs>
<filter id="dropshadow" height="100%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.8"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<polyline points="
8.3,40
16.6,50
24.9,90
33.2,70
41.5,80
49.8,60
58.1,20
66.4,70
74.4,60
83,40
91.3,50
99.6,80
"
style="fill:none;stroke:rgba(30,0,0,0.8);stroke-width:3;"vector-effect="non-
scaling-stroke"
/>
</svg>
<h1 class="clipped">70.4%</h1>
<h1 class="clipped2">70.4%</h1>
</div>
<svg height="0" width="0">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<polyline points="
.083,.2
.166,.25
.249,.45
.332,.35
.415,.4
.498,.3
.581,.1
.664,.35
.744,.3
.83,.2
.913,.25
.996,.4
.996,2.00
0,2.00
0,0
" />
</clipPath>
<clipPath id="clip2" clipPathUnits="objectBoundingBox">
<polyline points="
.083,.2
.166,.25
.249,.45
.332,.35
.415,.4
.498,.3
.581,.1
.664,.35
.744,.3
.83,.2
.913,.25
.996,.4
.996,0
0,0
" />
</clipPath>
</defs>
</svg>
and the style
<style>
.framer .clipped,.framer .clipped2{
position: absolute;
top: 0;
margin: 0 auto;
width: 100%;
height: 200px;
line-height: 120px;
font-size: 120px;
letter-spacing: -5px;
text-align: center;
z-index: -2;
}
.framer .clipped{
color: transparent;
text-shadow: 0 0 8px rgba(130,100,100,0.5);
-webkit-clip-path: url(#clip);
clip-path: url(#clip);filter:
}
.framer .clipped2{
-webkit-clip-path: url(#clip2);
clip-path: url(#clip2);
color: #300;
}
</style>

Related

Before pseudo element not showing up on path element

Hi i am trying to create a 'pin' on a SVG map of the whole world, the SVG is build with path elements, my thought was to use a before or after element and show the pin accordingly.
Apparently it is not showing on the path element, i can see it in the debugger/console and if i put it on a div element it works fine and shows up, i have cut out all countries except the first one in the SVG for simplicity.
CSS
.map-pin::after{
content: url('pin.svg');
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: left top;
width: 30px;
height: 30px;
z-index: 10;
font-size: 1px;
display: inline-block;
position: absolute;
left: -999px;
top: -999px;
/*display: none;*/
}
.map-pin.active::after{
display: block;
}
.map-pin.active[data-id="AF"]::after{
top: 0;
left: 0;
}
SVG
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="0 0 2000 1001" id="svg2" inkscape:version="0.48.4 r9939" sodipodi:docname="world.svg">
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" style="fill:#f2f2f2;fill-rule:evenodd"></path>
</g>
</svg>
I also tried a more simple way by just adding an element inside the SVG after all the path elements, but this breaks the whole SVG.
Anyone able to help me out here, is it not possible in SVG path elements? and if so, what other options am i left with?
PIN:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#454545;stroke-width:18;stroke-miterlimit:10;}
</style>
<g>
<g id="XMLID_4245_">
<path class="st0" d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" id="XMLID_4247_"></path>
<path class="st0" d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" id="XMLID_4246_"></path>
</g>
</g>
</svg>
As I've commented you can't have a before pseudo element for a path. However in your case you can have a symbol for the pin and use it at the end of your document. This way it will stay above all the other paths. (a z-index won't work either in SVG).
If you are using a symbol with a viewBox attribute you can give the <use> element a position (x and y attributes) and a size (width and height attributes)
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="1280 320 100 100" id="svg2" >
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<symbol id="map-pin-after" viewBox="0 0 30 30">
<circle cx="15" cy="8" r="8" /> <polygon points="15,30 22.7,10 7.3,10 15,30"/>
</symbol>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="30" height="30" x="1310" y="327"/>
</svg>
UPDATE
An update where I'm using the OP's pin:
Since the new pin is not a square, and in order to preserve the aspect ratio, I had to recalculate the height of the pin.
<svg viewBox="1280 320 100 100" >
<defs>
<symbol id="map-pin-after" viewBox="111 60 290 397">
<g id="XMLID_4245_" fill="none" stroke="#454545" stroke-width="18" stroke-mitterlimit="10">
<path d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" ></path>
<path d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" ></path>
</g>
</symbol>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2" stroke="black"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="41" height="30" x="1305" y="327"/>
</svg>

How to use SVG clipPath with Pattern via CSS clip-path property?

The initial SVG figure with pattern:
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
<circle cx="2" cy="2" fill="white" r="0.8"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="100" height="100" fill="url(#img-dotted-dots)"></rect>
</mask>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" mask="url(#img-dotted-mask)" fill="#1063B1"></path>
</svg>
Need to achieve:
One instance of the SVG figure with pattern for refferencing with CSS as clip-path.
I have tried to create SVG clipPath element and bind to CSS clip-path by this way
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<pattern
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
x="0" y="0" height="0.1" width="0.1">
<circle cx="0" cy="0" fill="white" r="0.5"></circle>
</pattern>
</clipPath>
</defs>
</svg>
Nothing happens.
Expected result - the same as the previous snippet.
For comparing:
If I use SVG rect - CSS clip-path works.
If pattern - doesn't
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<rect width="1" height="1"></rect>
</clipPath>
</defs>
</svg>
The only things that are valid inside a clip path are:
Shape elements (‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’)
‘text’
‘use’
Plus you can use animation elements etc to animate the clip path. However, only the shapes of those elements are used. Effects such as patterns, filters, etc are ignored.
The only way you could get the effect you want to work as a clipping path would be to add numerous <circle> elements to your <clipPath>.
<clipPath>
<circle>
<circle>
<circle>
<circle>
... etc ...
</clipPath>
But you could use a mask instead. Masks allow patterns.
.figure {
width: 300px;
height: 300px;
-webkit-mask: url(#img-dotted-mask);
mask: url(#img-dotted-mask);
background-color: #1063B1;
}
<p>This only works in Firefox</p>
<div class="figure"></div>
<svg width="0" height="0">
<defs>
<pattern id="img-dotted-pattern"
viewBox="0 0 1 1"
patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="1" height="1" fill="black"/>
<circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>
</mask>
</defs>
</svg>
However inline SVG masks applied to HTML elements, like my example above, only work in Firefox. To get an SVG mask to work in Chrome, you would need to use mask or mask-image with an external or Data URL (as Temani has done in their answer).
You can recreate the same thing using mask combined with radial-gradient
.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);
/*radius here size here*/
-webkit-mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
}
body {
background:#f2f2f2;
}
<div class="figure"></div>
Or consider the SVG inside the mask property. Make sure to escape the # and correctly set the viewbox and width/height to have a perfect repeat
.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
}
body {
background:#f2f2f2;
}
<div class="figure"></div>

How to position my svg image to the center of browser

I generated a simple svg image and loaded it to Chrome. Meant to position it to the center of browser(even when the browser resizing), but so far have failed on this.
Have referred to some articles about viewport/viewbox setting, and some Q&As on this site(https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen), but haven't got it done. Maybe I missed something, since I am very new to this.
Here is the full code for this svg image:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="100%"
height="100%"
viewBox="0 -700 1080 1920"
preserveAspectRatio="xMidYMid meet"
version="1.1"
id="mysvg"
>
<g
id="group" >
<circle
r="500"
style="fill:#ffb721;fill-opacity:1"
cy="0"
cx="0"
id="path" />
<circle
style="fill:#f71c17;fill-opacity:1;"
id="path2"
cx="0"
cy="0"
r="250" />
</g>
</svg>
I expect this image could stay at the center of the browser, even during browser resizing.
I think this is what you want?
The SVG will be position in the center even the browser resized and scroll
ON GLOBAL CSS
CSS:
#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
INSIDE SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29" width="100%" height="100%">
<g id="group">
<circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>
<circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>
</g>
</svg>
Your SVG needs a little modification to center it in the ViewBox.
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 300px;
background-color: rgba(red, .3);
}
<div class="container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="100%"
height="100%"
viewBox="-540 -960 1080 1920"
preserveAspectRatio="xMidYMid meet"
version="1.1"
id="mysvg"
>
<g
id="group" >
<circle
r="500"
style="fill:#ffb721;fill-opacity:1"
cy="0"
cx="0"
id="path" />
<circle
style="fill:#f71c17;fill-opacity:1;"
id="path2"
cx="0"
cy="0"
r="250" />
</g>
</svg>
</div>

CSS shape something like tea drop

I am trying to create this shape ( on the uploaded image ) only with css borders but I have problem with the corners they are not accepting the right shape. May I ask you guys for advice or best practice how to create it ?
Here is my code
.tea-drop {
width: 90px;
height: 25px;
display: block;
background: #000;
border-top-left-radius: 100%;
border-top-right-radius: 60%;
border-bottom-left-radius: 70%;
border-bottom-right-radius: 67%;
}
<div class="tea-drop"></div>
SVG is the recommended way to create such shapes. It offers simplicity and scale-ability.
We can use SVG's path element to create a shape like above and fill it with some solid color, gradient or a pattern.
Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.
Following code will create above shape:
<path d="M 0,0
C 100,10 120,150 60,75
Z" />
Below is a brief description of path commands used in above code:
M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
Q command is used to draw curves.
Z command is used to close current path. It draws a straight line from current point to the starting point to close the shape.
Output Image:
Working Example:
* {box-sizing: border-box;}
body {
background: linear-gradient(teal, skyblue);
text-align: center;
min-height: 100vh;
padding: 10px;
margin: 0;
}
<svg width="200" height="200" viewBox="0 0 100 100">
<path d="M0,0
C 100,10 120,150 60,75
Z" />
</svg>
This shape can be filled with gradient or pattern as well. <linearGradient> element is used to define a gradient in SVG. This element can then be referenced later using an id attribute to fill or outline any shape.
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="orange" />
<stop offset="1" stop-color="green" />
</linearGradient>
The direction of the gradient is controlled by the x1, y1, x2 and y2 while <stop> elements are used to define colors and their position along the gradient line.
Output Image:
Working Example:
* {box-sizing: border-box;}
body {
background: linear-gradient(teal, skyblue);
text-align: center;
min-height: 100vh;
padding: 10px;
margin: 0;
}
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="orange" />
<stop offset="1" stop-color="green" />
</linearGradient>
</defs>
<path d="M0,0
C 100,10 120,150 60,75
Z" fill="url('#grad')" />
</svg>
We can even apply shadow to this shape using SVG's filters. This article on MDN explains the basics of filters.
Output Image:
Working Example:
* {box-sizing: border-box;}
body {
background: linear-gradient(teal, skyblue);
text-align: center;
min-height: 100vh;
padding: 10px;
margin: 0;
}
<svg width="240" height="240" viewBox="0 0 120 120">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="orange" />
<stop offset="1" stop-color="green" />
</linearGradient>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path d="M10,10
C 110,20 130,160 70,85
Z" fill="url('#grad')" filter="url('#shadow')" />
</svg>
Useful Resources:
Below are some useful links for SVG:
Specification
MDN
You can use CSS3 to make that.
.tear {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 10em;
height: 10em;
border: none;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: rgb(0,0,0);
-webkit-transform: rotateX(42.5447924299deg) rotateY(100deg) rotateZ(-45.26deg) translateY(1px) ;
transform: rotateX(42.5447924299deg) rotateY(100deg) rotateZ(-45.26deg) translateY(1px) ;
-webkit-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
<div class="tear"></div>
Reference: http://enjoycss.com/SfB
I saved the link, you can customized it for yourself.

SVG sprite on stack don't appear on Safarii

I created SVG sprite, where icons are on stack and displayed when targeting chosen ID. It works ok, but I don't know why, icons not appear on Safari, I can't find explanation in case when you're using SVG as a background. Is any one familiar with this problem?
SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="icon" class="icon" version="1.1">
<defs>
<style>
svg .icon {
display: none;
}
svg .icon:target {
display: inline-block;
}
</style>
</defs>
<svg viewBox="0 0 24 24">
<g id="icon-instagram" class="icon" fill="#fff">
<path fill-rule="nonzero"
d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/>
<path fill-rule="nonzero"
d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/>
</g>
</svg>
<svg viewBox="0 0 24 24">
<g id="icon-facebook" class="icon" fill="#fff">
<path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/>
</g>
</svg>
CSS
.icon-instagram {
width: 24px;
height: 24px;
background: url("../svg/viva-sprite.svg#icon-instagram") no-repeat;
}
.icon-facebook {
width: 24px;
height: 24px;
background: url("../svg/viva-sprite.svg#icon-facebook") no-repeat;
}

Resources