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 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 want to draw these shapes using CSS and I'm having a bit of trouble
I'm trying the way above:
CSS:
.menu-animation{
border-radius: 50%;
display: inline-block;
height: 40px;
width: 40px;
background-color: #000000;
position: relative;
left: 0px;
}
.menu-animation2{
border-radius: 50%;
display: inline-block;
height: 29px;
width: 23px;
background-color: #000000;
position: absolute;
left: 9px;
top: 26px;
}
If you really want a CSS only solution, you can create black circles with your border-radius: 50%; approach, combine them with a black rectangle and simulate the round cut-out on both sides with white circles. This is how it works:
The single circle elements can be created using the pseudo elements ::before and ::after. With some positioning, the circles position can be adjusted properly.
This is a working example:
.drop {
background: black;
margin: 40px;
height: 20px;
width: 14px;
position: relative;
z-index: 10;
}
.drop::before,
.drop::after {
content: '';
position: absolute;
background: black;
border-radius: 50%;
}
.drop::before {
width: 30px;
height: 30px;
top: -25px;
left: -7px;
}
.drop::after {
width: 20px;
height: 20px;
top: 10px;
left: -3px;
}
.gaps::before,
.gaps::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
z-index: 10;
}
.gaps::before {
width: 22px;
height: 22px;
top: -3px;
left: -21px;
}
.gaps::after {
width: 22px;
height: 22px;
top: -2px;
left: 13px;
}
<div class="drop">
<div class="gaps"></div>
</div>
Although this is nearly perfect, I would recommend using SVG for this problem, as you can create a smooth outline and you don't have to bother with positioning, sizes and responsive design.
This would be extremely difficult using CSS but there are other solutions. You can attempt to draw them using JavaScript and the HTML5 Canvas element. Or the easier solution would be to create the illustration in a program like Adobe Illustrator, export the image as an SVG file. Get the SVG code from the file (Adobe Illustrator does that for you), it is basically contains the path of the vector. You can then add all the information in an SVG HTML tag and view the element. CSS then allows you to interact with the SVG element.
If you can live with SVG you can do it like this, even animated:
var circle2 = document.getElementById('circle2');
setInterval(function() {
circle2.style.transition="unset";
circle2.style.transform = "translate(0, 0)";
setTimeout(function() {
circle2.style.transition="transform 1400ms ease-in";
circle2.style.transform = "translate(0, 230px)";
}, 0);
}, 1400);
<div style="overflow: hidden">
<svg viewBox="0 0 200 200" width="200" height="200">
<defs>
<filter id="goo-filter">
<feGaussianBlur stdDeviation="8" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" />
</filter>
</defs>
<g fill="black" filter="url(#goo-filter)">
<circle id="circle1" cx="100" cy="40" r="20" />
<circle id="circle2" cx="100" cy="40" r="12" />
</g>
</svg>
<div>
I've been able to show a video with a text mask, so the video is only showing inside the text. Now, I would like to do the same thing, but instead of using a normal text as a mask, I'd like to use a SVG element as the mask.
.wrapper-video {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.wrapper-video-border {
width: 102%;
height: 102%;
position: absolute;
top: -1%;
left: -1%;
border: 10px solid #fff;
}
.project-initial {
position:relative;
margin-right: 0;
font-size: 500px;
letter-spacing: -10px;
font-weight: 900;
font-family: 'Arial', sans-serif;
width: 720px;
height: 405px;
overflow: hidden;
}
.project-initial .mask__shape {
fill: white;
}
.project-initial .shape--fill {
fill: #fff;
}
.project-initial .text--transparent {
fill: transparent;
}
.project-initial .box-with-text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.project-initial .text-fill {
position: absolute;
width: 720px;
height: 405px;
margin: auto;
}
.project-initial .video {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.project-initial .svg-defs {
width: 0;
height: 0;
}
.project-initial .svg-inverted-mask {
position: absolute;
width: 100%;
height: 100%;
}
<div class="wrapper-video">
<div class="project-initial">
<svg viewBox="0 0 720 405" class="svg-defs">
<!-- Symbol with text -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%"
y="50%"
dy=".35em"
class="text"
>
13
</text>
</symbol>
<!-- Mask with text -->
<mask id="m-text"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<rect
width="100%"
height="100%"
class="mask__shape">
</rect>
<use xlink:href="#s-text"
class="mask__text"
></use>
</mask>
</svg>
<div class="box-with-text">
<!-- Container for video -->
<div class="text-fill">
<video viewBox="0 0 720 405"
class="video" src="http://tympanus.net/codrops-playground/assets/images/posts/23145/bokeh2.mp4"
autoplay loop
></video>
</div>
<!-- Visible SVG -->
<svg viewBox="0 0 720 405"
class="svg-inverted-mask">
<rect
width="100%"
height="100%"
mask="url(#m-text)"
class="shape--fill"/>
<use xlink:href="#s-text"
class="text--transparent"
></use>
</svg>
</div>
</div>
<div class="wrapper-video-border"></div>
</div>
You can see it working in the JsFiddle above. Now, how could I edit this code to make it work with an SVG element instead of normal text?
Thank you!
Hi i have a HTML polygon, this is my code :
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="assets/img/downarrow.png" alt="" />
</div>
</div>
This produces :
I actually want this the other way around, so that the black section is blue and the blue section is transparent. I cant find a way at all to edit the color of the black section i have even tried changing the bodys bg-color.
Here is my css:
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
Can anyone help? Thanks.
Add fill property to polygon and change the background of svg to transparent.
Have a look at the snippet below (use full screen for better view, ignore placeholder image of arrow):
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: transparent;
}
svg polygon {
fill: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="http://placehold.it/10x10" alt="" />
</div>
</div>
Hope this helps!
Set the polygon fill to the blue color and set the svg background to black in css:
svg{
background: black;
}
and your svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="#38aae1"/>
</svg>