CODEWITHSUNDEEP
csssvgsvg-filters
JanuszO
JanuszO

Reputation: 1240

svg filter shadow path repair

How do I fix the gap between shadows? I would like the shadow to be continuous, not intermittent. Shadow should be in one black line without any spaces

This is my example:

.wave-container {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 8px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: #ccc;
}
.wave-container .wave {
    position: absolute;
    right: 0;
    background-size: 160px 50px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend>  </filter></defs><path d='M0,5 C25,0 35,10 60,5 v5 H0' filter='url(%23shadow)'/></svg>");
    height: 50px;
    left: -160px;
    
}
.wave-container .wave.w1 {
    bottom: 0;
}
.wave-container .wave.w2 {
    top: 0;
}
<div class="wave-container">
        <div class="wave w1"></div>
        <div class="wave w2"></div>
    </div>

Upvotes: 2

Views: 177

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101956

The discontinuity you are seeing is the fading of the shadow as it reaches the edge of the shape.

Instead of ending your path exactly at the edge of the SVG, try extending the shape a bit further off the left and right edges. In the example below I have extend the shape wider on each side with a five unit line segment.

.wave-container {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 8px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: #ccc;
}
.wave-container .wave {
    position: absolute;
    right: 0;
    background-size: 160px 50px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend>  </filter></defs><path d='M-5,5 L0,5 C25,0 35,10 60,5 H 65 v5 H-5' filter='url(%23shadow)'/></svg>");
    height: 50px;
    left: -160px;
    
}
.wave-container .wave.w1 {
    bottom: 0;
}
.wave-container .wave.w2 {
    top: 0;
}
<div class="wave-container">
        <div class="wave w1"></div>
        <div class="wave w2"></div>
    </div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274307

An idea is to keep the SVG simple and apply drop-shadow filter

.wave-container {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 8px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: #ccc;
}

.wave-container .wave {
  position: absolute;
  right: 0;
  background-size: 160px 50px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewbox='0 0 60 10' version='1.1'><path fill='white' d='M0,5 C25,0 35,10 60,5 v5 H0' /></svg>");
  height: 50px;
  left: -160px;
  filter:drop-shadow(0 -4px 3px #000);
}

.wave-container .wave.w1 {
  bottom: 0;
}

.wave-container .wave.w2 {
  top: 0;
}
<div class="wave-container">
  <div class="wave w1"></div>
  <div class="wave w2"></div>
</div>

Upvotes: 1

Related Questions