1

I am trying to create an SVG divider that goes between two images. I have searched high and wide and the only thing close to what I need is this answer. However, the answer relies on using the body (not too much of a problem) as well as not accounting for dynamic content that can stretch the content's height of either section. Every other solution I have found relies on a solid color, usually white. Is this even possible?

Example of what I am trying to achieve.

enter image description here

Mechwd
  • 400
  • 1
  • 4
  • 10

1 Answers1

2

Step by step solution

Step 1.
Two images are added to SVG one on top of the other using the <image> tag

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1024 683" preserveAspectRatio="none" >  
 <image  transform="translate(0,0)"  xlink:href="https://i.stack.imgur.com/dHpEe.jpg"
     width="100%" height="100%" />
 <image   xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />   
</svg>
</div>

Step 2.

A strip with a pattern is used to separate two images.
Added svg shapes to the pattern to create a drawing
Below is the pattern code:

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1024 683" preserveAspectRatio="none" >  
<defs>

                 <!-- Shapes in SVG added to pattern -->
 <pattern id="patt" x="0" y="24" width="160" height="40"
             patternUnits="userSpaceOnUse" > 
              <g fill="black"  transform="translate(0,0)" >
  <g fill="black" stroke="black" stroke-width="4" >
  <path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
  <path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
  <path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
  <path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
  <path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
 </g> 
      </pattern> 
    
</defs>          
 
 <image  transform="translate(0,200)"  xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-160" width="100%" height="100%"/>

  <image  xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" /> 
                <!-- Stripe with a pattern              -->
 <rect fill="url(#patt)" x="0" y="380" width="100%" height="40" fill="black"  />

</svg>
</div>

Step 3.

Add a mask so that the background image is visible through the holes in the pattern

<style>
.container {
width:100vw;
height:100vh;
margin-left: -1em;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1024 683" preserveAspectRatio="none" >  
<defs>
 <pattern id="patt" x="0" y="24" width="160" height="40"
             patternUnits="userSpaceOnUse" > 
              <g fill="black"  transform="translate(0,0)" >
  <g fill="black" stroke="black" stroke-width="4" >
  <path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
  <path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
  <path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
  <path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
  <path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
 </g> 
      </pattern> 
    <mask id="mask" > 
       <rect width="100%" height="100%" fill="white" />
        <rect fill="url(#patt)" x="0" y="380" width="100%" height="40" fill="black"  />
    </mask> 
</defs>          
 
 <image  transform="translate(0,200)"  xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-200" width="100%" height="100%"  />
               <!-- Add a mask  -->
   <image   mask="url(#mask)" xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />  
</svg>
</div>

Step 4.

Add animation to move the image:

<image  transform="translate(0,200)"  xlink:href="https://i.stack.imgur.com/dHpEe.jpg"
  y="-160" width="100%" height="100%">
                <!-- Animation of moving the image -->
    <animateTransform  attributeName="transform" type="translate"
     begiin="0s" dur="8s" values="0,0;  0,140;0,140;0,0;0,0" repeatCount="indefinite" />
   </image>

Full code below:

<style>
.container {
width:100vw;
height:100vh;
margin-left: -1em;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1024 683" preserveAspectRatio="none" >  
<defs>
 <pattern id="patt" x="0" y="24" width="160" height="40"
             patternUnits="userSpaceOnUse" > 
              <g fill="black"  transform="translate(0,0)" >
  <g fill="black" stroke="black" stroke-width="4" >
  <path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
  <path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
  <path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
  <path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
  <path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
 </g> 
      </pattern> 
    <mask id="mask" > 
       <rect width="100%" height="100%" fill="white" />
        <rect fill="url(#patt)" x="0" y="382" width="100%" height="40" fill="black"  />
    </mask> 
</defs>          
 
 <image  transform="translate(0,200)"  xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-160" width="100%" height="100%">
                <!-- Animation of moving the image -->
    <animateTransform  attributeName="transform" type="translate" begiin="0s" dur="8s" values="0,0;  0,140;0,140;0,0;0,0" repeatCount="indefinite" />
   </image> 
               <!-- Add a mask  -->
   <image   mask="url(#mask)" xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" >
      
</svg>
</div>

Step 5.

Animating image details.

Animated SVG filter feTurbulence to animate bitmap details.

Note: that this step is optional, as applying filter animation is resource intensive.

<style>
.container {
width:100vw;
height:100vh;
margin-left: -1em;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1024 683" preserveAspectRatio="none" >  
<defs>
 <pattern id="patt" x="0" y="24" width="160" height="40"
             patternUnits="userSpaceOnUse" > 
              <g fill="black"  transform="translate(0,0)" >
  <g fill="black" stroke="black" stroke-width="4" >
  <path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
  <path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
  <path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
  <path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
  <path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
  <path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
 </g> 
      </pattern> 
    <mask id="mask" > 
       <rect width="100%" height="100%" fill="white" />
        <rect fill="url(#patt)" x="0" y="380" width="100%" height="40" fill="black"  />
    </mask> 
<filter id="fl">
      <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turbulence" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="10" in="SourceGraphic" in2="turbulence" />
    </filter>   
</defs>          
 
 <image filter="url(#fl)" transform="translate(0,200)"  xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-160" width="100%" height="100%" overflow:hidden; >
    <animateTransform  attributeName="transform" type="translate" begiin="0s" dur="8s" values="0,0;  0,140;0,140;0,0;0,0" repeatCount="indefinite" />
   </image> 
     
  <image  filter="url(#fl)" mask="url(#mask)" xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />  

</svg>
</div>   
<script>  
 // Animated SVG filter `feTurbulence` to animate bitmap details 
var img = document.querySelector("#fl feTurbulence");
var frames = 0;
var rad = Math.PI / 360;

function AnimateBaseFrequency() {
  bfx = .04;
  bfy = .04;
  frames += 3;
  bfx += 0.01 * Math.sin(frames * rad);
  bfy += 0.01 * Math.cos(frames * rad);
  bf = bfx.toString() + ' ' + bfy.toString();
  img.setAttributeNS(null, 'baseFrequency', bf);
  window.requestAnimationFrame(AnimateBaseFrequency);
}

window.requestAnimationFrame(AnimateBaseFrequency);
</script>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
  • Would the dynamic content (a bunch of HTML from a CMS) have to be added inside the SVG tags? – Mechwd Nov 23 '21 at 18:05
  • @Mechwd No, In this version, the raster images are inside the SVG. A possible solution is when the dividing strip will move. It is now static. Should I think about this option and give a second answer? – Alexandr_TT Nov 23 '21 at 18:19
  • With the intention I was wanting to use it, it would need to have the images controlled by a CMS (Statamic in this case), and would have all variable amounts of page content in each of the sections (images, text, video, whatever). So if you have an idea of how to do it then that would be most helpful. – Mechwd Nov 23 '21 at 23:00