I want to crop / change the border of a div based on a svg (assume the blue pencil in the drawing is the svg).
I tried to use mask but it's not what I want because I also want to display the SVG.
Of course transparency is key because the background below the div is different.
You could do this using CSS and SVG clip paths, although it's hard to work with and has low browser support. Below is an example to get you started.
.clipped-card {
-webkit-clip-path: url(#curved-bottom);
clip-path: url(#curved-bottom);
background: black;
color: white;
position: relative;
padding-top: 100%;
}
.clipped-card-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.clipped-card svg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<svg width="0" height="0">
<defs>
<clipPath id="curved-bottom" clipPathUnits="objectBoundingBox">
<path d="M0 0H1V.9C.92.83.73.74.5.9A.6.6 90 00.49.91C.27 1.07.07.98 0 .91V0Z" />
</clipPath>
</defs>
</svg>
<div class="clipped-card">
<div class="clipped-card-content">
My content
</div>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 24"><path d="M0 10v5c7 7 27 16 49 0a60 60 0 001-1c23-16 42-7 50 0v1-5-1C92 2 73-7 50 9a60 60 0 00-1 1C27 26 7 17 0 10z" fill="red"/></svg>
</div>
Related
In HTML, I am trying to use SVG graphics to create a background section to a part of my site. It uses a curve that sections off a part of the website to another. I have managed to create a basic outline for the general shape of the SVG: Picture of the animated banner and SVG page section.
However, I am expecting the SVG element to be stretched downwards so it fills out the rest of the page. This is not the case however as when scrolling down the SVG ends and the background takes up the rest of the site: The SVG is too small.
I need help extending the SVG to fill the rest of the page underneath it.
Current HTML Code:
div class="wave">
<svg width="100%" height="200px" fill="none" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path
fill="white"
d="
M0 67
C 273,183
822,-90
2525.01,98
V 359
H 0
V 67
Z">
</path>
</svg>
</div>
I have tried to change the SVG values but they normally just turn the graphic out of shape. I would like help understanding how to understand and fix this problem.
Futhermore, how to use the SVG viewBox to preserve the aspect ratio of the graphic?
[Update] Here is the website so far. I need to move the SVG graphic downwards as indicated in the arrow so the black particle background is above it: Picture Update
The problem here is you can (see thereafter) "fill" till the end of page, now that means playing with viewport and aspect ratio as said Robert. That means also your "curve" won't be constant regarding different sizes of screen.
Check and play with the snippet thereafter:
.wave {
width: 100vw;
height: 100vh;
}
<div class="wave">
<svg width="auto" height="100%" fill="none" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice">
<path
fill="red"
d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z">
</path>
</svg>
</div>
perhaps this can work for you
you have your wave, plus a rect under
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.wave {
width: 100%;
height: 100%;
}
<div class="wave">
<svg width="auto" height="100%" fill="#ff0000" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"></path>
<rect width="512" height="129" x="0" y="127" />
</svg>
</div>
I thought about your problem.
If the idea is to have an image fullscreen on home with a wave svg down with a color and continuity same color in other part. An idea would be the following:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
section {
min-height: 100vh;
background-color: #999999;
margin: 0;
}
section h2 {
margin: 0;
}
#home {
margin: 0;
padding: 0;
width: 100vw;
background-image: url("https://picsum.photos/1920/1080");
background-size: cover;
background-position: center;
position: relative;
}
#home .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #7b98bc;
}
.wave {
width: 100%;
height: 100vh;
}
.wave svg {
display: inline-block;
}
<section id="home">
<div class="wave">
<svg width="100%" height="auto" fill="#999999" viewbox="0 0 512 128" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"/>
</svg>
</div>
<div class="title">
<h2>Title of my website</h2>
</div>
</section>
<section id="part1">
<h2>here we are section part1</h2>
</section>
Hi guys, i'm using svg shaper generated from shapedivider an how you can see, there is a white line and i don't why its there and how to remove it. Could you please help me?
there is the code of the shape divider:
.custom-shape-divider-bottom-1640714253 {
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1640714253 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 115px;
}
.custom-shape-divider-bottom-1640714253 .shape-fill {
fill: #FF2E63;
}
<div class="custom-shape-divider-bottom-1640714253" id="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>
Here are four examples. The first two uses an SVG as background or positioned in the bottom of the <div>. They both have a white triangle to cut off the background color. This will leave a solid background.
The third example is using CSS clip-path to cut off the triangle in the bottom. In this example the height of the triangle is a bit hard to calculate. But one advantage is that the triangle is transparent.
The fourth example looks a lot like yours. In this example I translate the <path> -1 unit on the y-axis, so that the upper border of the SVG is not "antialiasing".
.photocollage {
height: 200px;
background: #FF2E63 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMCI+PHBhdGggZD0iTSAwIDAgTCAxMjAwIDEyMCBMIDAgMTIwIFoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 101% auto;
}
.photocollage2 {
background: #FF2E63;
position: relative;
}
.photocollage2 svg {
position: absolute;
bottom: 0;
}
.photocollage3 {
height: 200px;
background: #FF2E63;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
}
.photocollage4 {
height: 160px;
background: #FF2E63;
}
<p>Example 1</p>
<div class="photocollage"></div>
<p>Example 2</p>
<div class="photocollage2">
<div style="height: 200px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path d="M 0 0 L 1200 120 L 0 120 Z" fill="#FFF"/>
</svg>
</div>
<p>Example 3</p>
<div class="photocollage3"></div>
<p>Example 4</p>
<div class="photocollage4"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path transform="translate(0 -1)" d="M 0 0 L 1200 0 L 1200 120 L 0 1 Z" fill="#FF2E63"/>
</svg>
Try giving the svg a very small negative margin-top, one or two pixels should do the trick.
It should pull the shape up ever so slightly to bridge the gap.
I'm trying to append a clip-path for my div, using svg
<svg xmlns="http://www.w3.org/2000/svg" class="svg-mask" viewBox="0 0 1166 1614">
<defs>
<clipPath id="svgMask" clipPathUnits="userSpaceOnUse"> // I also tried <mask>
<path d="M51.77 1408.06c-6.04-8.38-11.39-22.76-9.38-42.96 2.79-28 15.97-54.81 15.97-54.81l18.27-56.13 48.56-147.97 43.29-130.69 43.45-131.35 46.75-140.07 27.98-84.77 28.97-87.89 35.55-108.8 41.31-126.25 32.92-98.43 28.31-83.78s7.82-30.32 15.76-42.93c2.9-4.61 24.32-43.1 79.37-36.19 61.08 7.66 61.75 4.09 60.33 25.5-.94 14.13 2.18 28.62 25.06 35.12 15.36 4.36 83.98 12.41 83.98 12.41l100.9 14.16 96.95 13.17s38.52 3.13 48.88-10.86c10.37-13.99 14.98-23.21 19.42-26.34 4.44-3.13 14.98-2.8 30.12-.66 15.14 2.14 51.85 6.91 51.85 6.91s29.46 6.09 35.88 30.78c6.42 24.69.99 38.35-3.95 54.81s-45.76 147.48-45.76 147.48L1001 504.1l-47.57 153.24L908 803.01l-55.8 177.6-46.75 148.47-42.79 135.13-40.98 129.7-18.43 59.75s-10.04 40.66-19.59 53.16-21.89 28.48-41.31 34.4c-19.42 5.93-32.43 4.61-55.8-.49-23.37-5.1-190.44-40.98-190.44-40.98l-193.07-42.47-117.36-25.51c0-.01-20.51-5.1-33.91-23.71z" fill="#fff"/>
</clipPath>
</defs>
</svg>
the structure is simple,
<div class="wrapper>
<div class="content>content</div>
</div>
and the css is like
body {
position: relative;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
clip-path: url(#svgMask); // i also try mask: url(#svgMask);
//...
}
.content {
height: 100%;
width: 100%;
// other attributes
}
but nothing is displayed. If I use svg without <defs> and clipPath or mask, and url is like (/images/path.svg) then everything works great, but not in Firefox.
What's wrong?
Your HTML gave some issues regarding not closing the quotes on class attribute. Your clipping mask is working. Added some colour to show the masks outline.
body {
position: relative;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
clip-path: url(#svgMask);
background: blue;
}
.content {
height: 100%;
width: 100%;
background: red;
}
<svg xmlns="http://www.w3.org/2000/svg" class="svg-mask" viewBox="0 0 1166 1614">
<defs>
<clipPath id="svgMask" clipPathUnits="userSpaceOnUse">
<path d="M51.77 1408.06c-6.04-8.38-11.39-22.76-9.38-42.96 2.79-28 15.97-54.81 15.97-54.81l18.27-56.13 48.56-147.97 43.29-130.69 43.45-131.35 46.75-140.07 27.98-84.77 28.97-87.89 35.55-108.8 41.31-126.25 32.92-98.43 28.31-83.78s7.82-30.32 15.76-42.93c2.9-4.61 24.32-43.1 79.37-36.19 61.08 7.66 61.75 4.09 60.33 25.5-.94 14.13 2.18 28.62 25.06 35.12 15.36 4.36 83.98 12.41 83.98 12.41l100.9 14.16 96.95 13.17s38.52 3.13 48.88-10.86c10.37-13.99 14.98-23.21 19.42-26.34 4.44-3.13 14.98-2.8 30.12-.66 15.14 2.14 51.85 6.91 51.85 6.91s29.46 6.09 35.88 30.78c6.42 24.69.99 38.35-3.95 54.81s-45.76 147.48-45.76 147.48L1001 504.1l-47.57 153.24L908 803.01l-55.8 177.6-46.75 148.47-42.79 135.13-40.98 129.7-18.43 59.75s-10.04 40.66-19.59 53.16-21.89 28.48-41.31 34.4c-19.42 5.93-32.43 4.61-55.8-.49-23.37-5.1-190.44-40.98-190.44-40.98l-193.07-42.47-117.36-25.51c0-.01-20.51-5.1-33.91-23.71z" fill="#000"/>
</clipPath>
</defs>
</svg>
<div class="wrapper">
<div class="content">content</div>
</div>
I'm working on animations here I have an SVG image I'm trying to move image like a wave continuously. I have tried using gsap and css still not getting. Can anyone suggest me any help will be appreciated
GSAP
TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780">
<g>
<g opacity=".75">
<path fill="#ffefdd" d="M518.416 278.813c100.975 408.098 513.434 328.466 588.907 253.974 75.473-74.493 153.228-259.973 324.949-282.534 154.635-20.315 317.211-182.93 487.728-78.482v453.068c-264.98 2.452-323.019-161.187-601.137 25.146-320.667 214.84-339.51 105.56-508.484 75.563S535.477 828.256 326.51 643.775C188.975 522.356 98.538 508.728 0 535.407V0h260.293c113.729 39.308 218.825 119.99 258.123 278.813z"/>
</g>
</g>
</svg>
The reason why you cannot currently animate your SVG like the one in the answer you linked is because they fake the wave by just translating the wave and having each side match up. If you remove the set width in the example on that answer you can clearly see this:
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<div class="container">
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>
In order to animate your SVG like a wave it will be more complex because the ends don't match up to each other. You likely need to use an SVG animation tool like GSAP's MorphSVG (which is a paid plugin, but you can try it out free on CodePen).
With MorphSVG I'd recommend making 2 or 3 different SVG and then animating between them using MorphSVG. There are several examples of how to do this on the GreenSock website.
For more about MorphSVG see the GreenSock page for it.
For Wave SVG you may use this:
<svg id="wave" viewbox="0 0 100 15">
<path fill="#fff" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
<path fill="#fff" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>
I am trying to make .main-div like this image
.main-div {
width: 100px;
height: 100px;
background-color: Red;
border-radius: 30px/20px;
}
<div class="main-div"></div>
My JSFiddle is here.
You can do a trick using a pseudo element and achieve that shape
body {
background: lightgray;
}
.main-div {
position: relative;
display: inline-block;
width: 110px;
height: 100px;
background-color: red;
border-radius: 30%/50%;
background: url(https://i.stack.imgur.com/CWoXa.png) center center no-repeat;
background-size: 110px 110px;
}
.main-div::after {
content: '';
position: absolute;
left: 5px;
top: -5px;
width: 100px;
height: 110px;
background: inherit;
background-size: inherit;
border-radius: 50%/30%;
}
.main-div+.main-div {
background: gray;
}
<div class="main-div"></div>
<div class="main-div"></div>
As Justinas remarked in their answer, the border of your example image does not look like it can be recreated with border-radius alone. This is because the outline is not an ellipse.
It is possible to do this, with good browser support, using SVG as follows.
/* set size of and center SVG */
svg {
display: block;
width: 200px;
height: 200px;
margin: 0 auto;
}
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="outline">
<!-- use Bezier curves to define outline -->
<path d="M 0 100
C 0 0, 40 0, 100 0
C 160 0, 200 0, 200 100
C 200 200, 160 200, 100 200
C 40 200, 0 200, 0 100
Z" />
</clipPath>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="https://placehold.it/200"
clip-path="url(#outline)" />
</svg>
This uses clipping in SVG with the clipPath element. You can define any path to use for the clipping. I have used four Bezier curves here. You can tweak where the control points are, or change this to use something entirely different if you wish.
An extra bonus of this approach is that it is now easy to apply other (advanced) filters, for example blurring the image or applying a drop shadow.
/* set size of and center SVG */
svg {
display: block;
width: 204px;
height: 204px;
margin: 0 auto;
}
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="outline">
<!-- use Bezier curves to define outline -->
<path d="M 0 100
C 0 0, 40 0, 100 0
C 160 0, 200 0, 200 100
C 200 200, 160 200, 100 200
C 40 200, 0 200, 0 100
Z" />
</clipPath>
<filter id="dropshadow" x="-30%" y="-30%"
width="160%" height="160%"
color-interpolation-filters="sRGB">
<!-- define color of shadow here -->
<feComponentTransfer in="SourceAlpha">
<feFuncR type="linear" slope="0"
intercept="0.518"></feFuncR>
<feFuncG type="linear" slope="0"
intercept="0.698"></feFuncG>
<feFuncB type="linear" slope="0"
intercept="0.867"></feFuncB>
</feComponentTransfer>
<!-- define blur of shadow here -->
<feGaussianBlur stdDeviation="2" />
<!-- we can offset the shadow -->
<feOffset result="shadow" dx="1" dy="1" />
<!-- put shadow below original content -->
<feBlend in="SourceGraphic"
in2="shadow" mode="normal" />
</filter>
</defs>
<g transform="translate(2, 2)"
filter="url(#dropshadow)">
<image x="0" y="0" width="200" height="200"
xlink:href="https://placehold.it/200"
clip-path="url(#outline)" />
</g>
</svg>
Your image radius does not look like standard CSS border radius. If yes, than you need to use image preprocessing (in back-end side, e.g. GD or stand-alone tool like Photoshop) or use Clipping Mask with limited support. Using border radius you can have similar effect.
.main-div {
width: 100px;
height: 100px;
background-color: red;
border-radius: 40%;
overflow: hidden;
position: relative;
}
.main-div img {
width: 100%;
position: absolute;
left: -50px;
top: -50px;
margin-top: 50%;
margin-left: 50%;
}
<div class="main-div">
<img src="http://lorempixel.com/200/200/"/>
</div>
Add this style. You can change border-radius as per your requirements:
div {
border: 2px solid #a1a1a1;
padding: 10px 15px; `enter code here`
background: #dddddd;
width: 100px;
border-radius: 55px;
}
.element {
border-radius: 50px;
overflow: hidden;
}
<img src="https://image.ibb.co/irvmO5/html5.png" alt="html5" border="0" class="element"><br /><a target='_blank' href='https://imgbb.com/'>Rounded rectangle clip mask</a>