SVG DIVIDERS

first: have a look at: https://webers-testseite.de/divider-on-sliders/

… next – soon

it is all well documented in the docu. You can download the child at docu too: https://kriesi.at/documentation/enfold/child-theme/
If you feel unsure about this, please ask a mod to help you.

Maybe backup your page first – to have a fallback option.
After that we can start to have our own custom svg shape dividers.

there are different ways to animate an svg – but you had to prepare the svg first.
my approach on that is to include everything inside the svg itself.

The basis of the Enfold separators (but Divi, Elementor etc are no different) is to have a cover area within the svg that forms the connection to the next/previous section. This is then filled with #000 by default, and then replaced with a different colour using the element option.

On your example page, it is set in motion from outside using keyframe animation.

by the way: you can animate your existing wave by:
but i recommend using my svg files from above – and as custom svg dividers!
because your replaced the mountains svg by your wave:

@keyframes move-forever {
  0% {
    transform: translate3d(-100px, 0, 0);
  }
  100% {
    transform: translate3d(100px, 0, 0);
  }
}

.avia-divider-svg.avia-divider-svg-mountains path:nth-of-type(1) {
  animation: move-forever 15s linear infinite;
}
.avia-divider-svg.avia-divider-svg-mountains path:nth-of-type(2) {
  animation: move-forever 25s linear infinite;
}
.avia-divider-svg.avia-divider-svg-mountains path:nth-of-type(3) {
  animation: move-forever 5s linear infinite;
}

by the way – with svg patterns you can create from f.e.:
_____________

this:

and use them as dividers.

look to svg filmstrip code:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 112 200" xml:space="preserve">
	<path d="M0,0v200h112V0H0z M72.57,157.5H39.43c-11.44,0-20.76-8.92-20.76-20.32V63.18c0-11.4,9.32-20.68,20.76-20.68h33.14
	c11.44,0,20.76,9.28,20.76,20.68v74.01C93.33,148.57,84.01,157.5,72.57,157.5z"/>
</svg>

just get rid of svg tag and put instead the content into a group:

<g>
	<path d="M0,0v200h112V0H0z M72.57,157.5H39.43c-11.44,0-20.76-8.92-20.76-20.32v-74c0-11.4,9.32-20.68,20.76-20.68h33.14
	c11.44,0,20.76,9.28,20.76,20.68v74.01C93.33,148.57,84.01,157.5,72.57,157.5z" />
</g>

now create your pattern like this:

<svg id="pattern" viewBox="0 0 6000 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
	<defs>
		<pattern id="film_strip" x="0" y="0" width="112" height="200" patternUnits="userSpaceOnUse">
			<g>
				<path d="M0,0v200h112V0H0z M72.57,157.5H39.43c-11.44,0-20.76-8.92-20.76-20.32v-74c0-11.4,9.32-20.68,20.76-20.68h33.14
				c11.44,0,20.76,9.28,20.76,20.68v74.01C93.33,148.57,84.01,157.5,72.57,157.5z" />
			</g>
		</pattern>
	</defs>
	<rect x="0" y="0" width="100%" height="100%" fill="url(#film_strip)"></rect>
</svg>

on the pattern tag – transfer the width/height and x/y values of the origin svg tag to it.
on the new svg tag viewport is then in height the same as the pattern – but much bigger in width.
The rect path is now width 100% and filled with the pattern url!

see: https://webers-testseite.de/divider-on-sliders/

this procedure is nearby the background-repeat method. because we do not have background images here – instead inline svg.
The “single SVG path” had to be designed in such a way that they could be joined together seamlessly.

PPS: the preserveAspectRatio defines how the svg reacts on screen-width reduction – play a bit on : Link