Пошаговое решение:
Шаг #1.
Два изображения добавляются в SVG, одно поверх другого с помощью тега <image>
<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>
Шаг #2.
Для разделения двух изображений используется полоса с pattern
SVG
В паттерн добавлены фигуры svg для создания рисунка
Ниже добавлен код паттерна:
<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>
Шаг #3.
Добавляем маску, чтобы был виден фоновый рисунок сквозь прорези паттерна.
Как работает маска подробнее здесь
<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>

Шаг #4.
Добавляем анимацию перемещения изображения
<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>
Полный код ниже:
<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>
Шаг #5.
Анимация деталей изображений
Animating image details.
Анимируется SVG фильтр feTurbulence
для оживления деталей растровых изображений
Заметьте, что этот шаг не обязателен, так как применение анимации фильтра ресурсоемко
(Но выглядит, на мой взгляд красиво)
<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.