SVG fill transparent - html

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/

Related

CSS svg background covers div content

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.

fixed div wrapper on bottom right with a circlecss animation and text centered inside

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>

Change SVG text filled with video for SVG element filled with video

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!

Why are pseudo elements not appearing on divs?

I've added after pseudo element to divs, but from debugger view no pseudo elements are attached.
There are related posts, but I still cannot figure out why.
Any comments are appreciated.
Operations happen here:
.col > div:nth-child(1) {
background:url("http://gdurl.com/hZIP");
background-size:cover;
}
.col > div:nth-child(1):after{
position:absolute;
top:0; left:0;
width:100%;height:100%;
background-color:black;
}
demo,
https://jsfiddle.net/Debra321/432574uc/62/
html {
box-sizing: border-box;
}
body {
background: #fcfca4;
background: linear-gradient(to top right, #F3E9D2, #EC9192);
background-repeat: no-repeat;
background-attachment: fixed;
}
#phoneContent {
position: absolute;
top: 17.7%;
left: 50px;
width: 253px;
height: 455px;
display: block;
margin: auto;
overflow: auto;
}
#phoneContent .col {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.col>div {
flex: 1;
display: flex;
flex-direction: column;
}
.col>div:nth-child(1) {
background: url("http://gdurl.com/hZIP");
background-size: cover;
//filter: brightness(50%);
}
.col>div:nth-child(1):after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
//opacity:0;
//transition: opacity 0.5s;
//background:rgba(0,0,0,0.6);
}
.col>div:nth-child(1) :hover:after {
opacity: 1;
}
.col>div:nth-child(2) {
background-color: red;
}
.col>div:nth-child(3) {
background-color: blue;
}
.col>div:nth-child(4) {
background-color: red;
}
.st0 {
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #DBDDDD;
stroke-miterlimit: 10;
}
.st2 {
fill: #FFFFFF;
}
.st3 {
fill: none;
stroke: #E5E5E5;
stroke-miterlimit: 10;
}
.st4 {
opacity: 0.3;
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
#myPhone {
position: relative;
width: 350px;
height: 700px;
display: block;
margin: auto;
}
Apply local draft version or discard it
<body>
<div id="myPhone">
<div id="phonediv">
<svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 500" style="enable-background:new 0 0 250 500;" xml:space="preserve">
<g>
<path class="st0" d="M21,104.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
c1.4,0,2.5,1.1,2.5,2.5V104.5z"/>
<path class="st0" d="M21,143.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
c1.4,0,2.5,1.1,2.5,2.5V143.5z"/>
<path class="st0" d="M21,182.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
c1.4,0,2.5,1.1,2.5,2.5V182.5z"/>
</g>
<path class="st0" d="M200.5,23.3H53.7c-22.6,0-35.1,15.2-35.1,34.4v387.9c0,21.4,16.6,35.1,35.1,35.1h146.8
c19.7,0,34.4-15.9,34.4-35.1V57.7C234.9,38.5,221.9,23.3,200.5,23.3z M217.6,414.6H35.1V87.2h182.5V414.6z"/>
<path class="st0" d="M200.5,476.2H53.7c-14.7,0-30.6-11.7-30.6-30.6V57.7c0-17,13.2-29.9,30.6-29.9h146.8
c16.7,0,29.9,13.1,29.9,29.9v387.9C230.4,461.6,216.1,476.2,200.5,476.2z M53.7,28.6c-17,0-29.9,12.5-29.9,29.1v387.9
c0,20.4,17.8,29.9,29.9,29.9h146.8c15.2,0,29.1-14.2,29.1-29.9V57.7c0-16.3-12.8-29.1-29.1-29.1H53.7z"/>
<circle class="st1" cx="127.1" cy="445.2" r="19.9"/>
<g>
<path class="st2" d="M127.1,427.1c10.4,0,18.9,8.5,18.9,18.9c0,10.4-8.5,18.9-18.9,18.9c-10.4,0-18.9-8.5-18.9-18.9
C108.2,435.6,116.7,427.1,127.1,427.1 M127.1,426.1c-11,0-19.9,8.9-19.9,19.9c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9
C147,435,138.1,426.1,127.1,426.1L127.1,426.1z"/>
</g>
<path class="st3" d="M131.2,453.6h-9c-1.7,0-3-1.4-3-3v-9c0-1.7,1.4-3,3-3h9c1.7,0,3,1.4,3,3v9C134.2,452.3,132.9,453.6,131.2,453.6
z M122.2,439.4c-1.2,0-2.3,1-2.3,2.3v9c0,1.2,1,2.3,2.3,2.3h9c1.2,0,2.3-1,2.3-2.3v-9c0-1.2-1-2.3-2.3-2.3H122.2z"/>
<path class="st0" d="M146,50.5c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5l0,0c0-1.4,1.1-2.5,2.5-2.5h35
C144.9,48,146,49.1,146,50.5L146,50.5z"/>
<line class="st4" x1="34.5" y1="87" x2="217" y2="87"/>
</svg>
</div>
<div id="phoneContent">
<div class="col">
<div>
</div>
<div>
<h1>
TWO
</h1>
</div>
<div>
<h1>
THREE
</h1>
</div>
<div>
<h1>
FOUR
</h1>
</div>
</div>
</div>
</div>
</body>

Keep in mind that ::after and ::before pseudo-elements must always have the content property, even if the property is empty (content: "").
.col > div:nth-child(1) {
background: url("http://gdurl.com/hZIP");
background-size: cover;
filter: brightness(50%);
position: relative; /* establish nearest positioned ancestor for absolute positioning */
}
.col > div:nth-child(1):hover::after {
content: ""; /* necessary for pseudo-elements to work */
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer; /* optional */
}
revised fiddle

HTML Polygon flip it around the other way

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>