3 svg images overlap each other

user_11826485 0
Viewed 507

I have 3 SVG images that must make up a background, here's a screenshot:

enter image description here

I have exported all parameters from Figma: width, height, viewbox, path itself:

<svg width="487" height="849" viewBox="0 0 487 849">
  <defs>
    <pattern id="pattern" height="100%" width="100%">
      <image className="introImage" href={photos.blueLakes.background1} />
    </pattern>
  </defs>
  <path d="M323.138 0L0 130.089V848.497L487 763.022L385.264 458.647L487 130.089L323.138 0Z" fill="url(#pattern)" />
</svg>

<svg width="567" height="806" viewBox="0 0 567 806">
  <defs>
    <pattern id="pattern" patternUnits="userSpaceOnUse" height="100%" width="100%">
      <image className="introImage" href={photos.blueLakes.background2} />
    </pattern>
  </defs>
  <path d="M347.083 0.5L20.8333 40.0833L101.667 104.25L0 432.583L101.667 736.75L474.583 805.5L566.25 321.333L347.083 0.5Z" fill="url(#pattern)" />
</svg>

<svg width="861" height="869" viewBox="0 0 869 861">
  <defs>
    <pattern id="pattern" patternUnits="userSpaceOnUse" height="100%" width="100%">
      <image className="introImage" href={photos.blueLakes.background3} />
    </pattern>
  </defs>
  <path d="M535.551 84.258L0.5 0.5L219.688 321.364L128.012 805.577L300.112 784.742L868.5 860.999V124.262L766.407 136.763L535.551 84.258Z" fill="url(#pattern)" />
</svg>

But all I have is 3 small SVGs that, I think, overlap each other, it looks like this:

enter image description here

I don't know how to fix it, because in Figma it looks well, but when I just copy these parameters to HTML it doesn't work. Maybe you have suggestions for fixing this problem?

Edit: window width is 1600px, window height is 900px

svg css html
2 Answers

You can build this using CSS and clip-path. It would be easier to maintain:

.box {
  height: 400px;
  background: url(https://picsum.photos/id/1023/800/300) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 34% 11%, 57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 38% 88%, 0 97%);
  position: relative;
  z-index: 0;
  font-size: 60px;
  line-height: 400px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box::before {
  background: url(https://picsum.photos/id/12/800/300) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 40% 15%, 35% 50%, 38% 88%, 0 97%);
}

.box::after {
  background: url(https://picsum.photos/id/125/800/300) center/cover;
  clip-path: polygon(57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 63% 50%);
}
<div class="box">
  Blue Lakes
</div>

You can easily build the polygon here: https://bennettfeely.com/clippy/

Using CSS variables to easily adjust the images:

.box {
  height: 400px;
  background:var(--img1) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 34% 11%, 57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 38% 88%, 0 97%);
  position: relative;
  z-index: 0;
  font-size: 60px;
  line-height: 400px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box::before {
  background: var(--img2) center/cover;
  clip-path: polygon(0 18%, 23% 3%, 40% 15%, 35% 50%, 38% 88%, 0 97%);
}

.box::after {
  background: var(--img3) center/cover;
  clip-path: polygon(57% 4%, 86% 16%, 100% 11%, 100% 100%, 73% 90%, 55% 93%, 63% 50%);
}
<div class="box" 
 style="--img1:url(https://picsum.photos/id/1023/800/300);
        --img2:url(https://picsum.photos/id/12/800/300);
        --img3:url(https://picsum.photos/id/125/800/300);">
  Blue Lakes
</div>

user_86203330

I would transform your svg elements in symbols and put them all in one commun svg like so:

<svg viewBox="0 0 1601.5 887">

  <symbol id="a" viewBox="0 0 487 849">

    <path d="M323.138 0L0 130.089V848.497L487 763.022L385.264 458.647L487 130.089L323.138 0Z" />
  </symbol>
  <symbol id="b" viewBox="0 0 567 806">
    <path d="M347.083 0.5L20.8333 40.0833L101.667 104.25L0 432.583L101.667 736.75L474.583 805.5L566.25 321.333L347.083 0.5Z" />
  </symbol>
  <symbol id="c" viewBox="0 0 869 861">

    <path d="M535.551 84.258L0.5 0.5L219.688 321.364L128.012 805.577L300.112 784.742L868.5 860.999V124.262L766.407 136.763L535.551 84.258Z" />
  </symbol>
  <g id="g">
    <use xlink:href="#a" x="0" y="0" width="487" height="849" />
    <use xlink:href="#b" x="386" y="26" width="567" height="806" />
    <use xlink:href="#c" x="733" y="26" width="869" height="861" />
  </g>
</svg>

user_78973950
Related