I have an image of a wave, and I want to make it animated.
How can I remove the stitches that connect the images?
this is what I made so far:
HTML
<div class="container">
<div class="wave"></div>
</div>
CSS (SCSS)
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1503455637927-730bce8583c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80");
background-size: cover;
background-attachment: fixed;
.wave {
position: absolute;
width: 100%;
height: 134px;
bottom: 0;
left: 0;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/938837/wave.svg");
animation: wave 10s linear infinite;
&::before {
content: '';
position: absolute;
width: 100%;
height: 134px;
}
}
}
#keyframes wave {
0% {
background-position: 0;
}
100% {
background-position: 760px;
}
}
SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg width="999px" height="134px" viewBox="0 0 999 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wave" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,134 L0,42.2253747 C17.4511761,28.1474908 42.9411378,28.9929687 61.2033313,42.0015294 L167.733031,117.88497 C181.802595,127.907028 200.048695,129.956904 215.991332,123.306596 L349.698927,67.5318352 C362.723379,62.0988175 377.437251,62.422763 390.209969,68.4237399 L500.138179,120.071059 C518.142964,128.530206 539.449556,125.511425 554.395844,112.383672 L667.77663,12.7980841 C686.560807,-3.700595 714.644244,-3.7888782 733.531778,12.5913759 L843.37411,107.85237 C861.00964,123.146821 886.88145,124.202875 905.704833,110.396629 L998.649267,42.2253747 L998.649267,134 L0,134 Z" id="Line"></path>
</g>
</g>
</svg>
The code on JSFiddle
Answer
Thank you #ksav for recommending me to round the values of the edges
(from L998.649267 to L999) in my SVG file.
Your solution was great!!!
If there is a way to mark your answer as most recommended, I will do that.
Related
I want to add waves for one of the divs. I used some website that generated svg with neccessary code. The problem is it covers all the content of my div. What seems to be the problem here?
.Upper-half-wrapper {
background-color: #0A2640;
height: 515px;
position: relative;
}
.custom-shape-divider-top-1655888002 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1655888002 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 266px;
transform: rotateY(180deg);
}
.custom-shape-divider-top-1655888002 .shape-fill {
fill: #1B3B5D;
}
<div className="Upper-half-wrapper">
<div className="custom-shape-divider-top-1655888002">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" className="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" className="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
className="shape-fill"></path>
</svg>
</div>
<div className="Upper-half-content">
Some text
</div>
</div>
It looks like the answer was to use position: relative; on content i wanted to be on top.
I'm trying to use wave SVG and I have a background image at the body
but I want the SVG to be filled with transparent so it shows the body background-image
but when I try to make it fill: transparent or fill-opacity: 0
it just hides all the wave shapes. So is there is a way to replace #000000 with something transparent that shows body background-image?
Here is an example code
https://jsfiddle.net/nLt2vu4k/
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</header>
</body>
</html>
Thank you for helping,
Best regards.
For transparent you can define "fill-opacity" to 0 in path:
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill" fill-opacity="0"></path>
</svg>
</div>
</header>
</body>
</html>
You can use clipPath with your svg
To have a nice result you might have to edit your SVG
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
clip-path: url(#myClip);
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<clipPath id="myClip">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</clipPath>
</svg>
</div>
</header>
</body>
</html>
Try creating a new svg to cover the header background, and remove the header background-color.
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
position: relative;
}
.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.shape svg {
position: relative;
display: block;
width: 100%;
height: auto;
}
<header>
<div class="shape">
<svg width="671" height="221" viewBox="0 0 671 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H671V195C375 304 282 14 0 195V0Z" fill="#0ff"/>
</svg>
</div>
</header>
https://jsfiddle.net/afelixj/7z1L5xdo/3/
I have a circle animation with a centered text inside.
Everything is wrapped into a div.
I'm trying to put this wrapper div on the bottom right of the page.
Any tips about how to archive this without let centered text going outside the circle?
here the code example https://codepen.io/D_s/pen/oNzQdJy
thank you!
html,
body {
height: 100%;
background: lightgrey;
}
.wrapper {
max-width: 50px;
max-height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.centered {
position: absolute;
color: white;
font: 3vw/3vw times;
height: 50px;
text-align: center;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
position: absolute;
top: calc(50% - 15vw);
left: calc(50% - 15vw);
overflow: hidden;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%" >SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
update the code like below:
.wrapper {
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font: 3vw/3vw times;
margin: 0;
}
body {
background:grey;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"></path>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%">SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
I have an svg element. How can i show it gradually (like an animation) from left to right?
You can use CSS #keyframes.
#keyframes stretchInFromLeft {
0% {
width: 100%;
}
100% {
width: 0;
}
}
img {
max-width: 100%;
width: 100%;
}
.wrapper {
position: relative;
}
.overlay {
animation: 1s ease-out 0s 1 stretchInFromLeft;
position: absolute;
top: 0;
right: 0;
background: #fff;
width: 0;
height: 100%;
}
<div class="wrapper">
<img src="https://i.stack.imgur.com/dta2g.jpg" />
<div class="overlay"></div>
</div>
Fiddle: https://jsfiddle.net/r034wcgp/1/
Source: css3 transition animation on load?
You could animate a SVG clipPath with jQuery animate() like this:
$("#cut-off-bottom rect").animate({width: "100%", duration:4000})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="0" height="320" />
</clipPath>
<path fill="#0099ff" fill-opacity="1" clip-path="url(#cut-off-bottom)" d="M0,32L48,32C96,32,192,32,288,58.7C384,85,480,139,576,154.7C672,171,768,149,864,165.3C960,181,1056,235,1152,240C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
I have one issue.
My svg backgound isn't full. Part of the background was gone.
It's must look like this
section {
padding: 20px;
width: 100%;
}
div {
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: cover;
}
<section>
<div></div>
</section>
I tried use background-size: 100% 100%;, some variation of background-position. But it didn't help me.
Code of svg file.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 32" enable-background="new 0 0 1000 32" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="0" y1="0" x2="484.8" y2="0"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="484.8" y1="0" x2="500" y2="32"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="500" y1="32" x2="1000" y2="32"/>
</svg>
Some really creative solution, but it works. I used before and after to fill up the empty space with borders. When the image gets too small.
section {
padding: 20px;
width: 100%;
}
div {
position: relative;
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
div:before{
content: "";
position: absolute;
border-top: 1px solid #8e8e8e;
width: 40%;
left: 0;
top: 0;
}
div:after{
content: "";
position: absolute;
border-bottom: 1px solid #8e8e8e;
width: 40%;
right: 0;
bottom: 0;
}
#media (max-width:937px) {
div:after{
display: none;
}
div:before{
display:none;
}
}
<section>
<div></div>
</section>