This animated shape divider WordPress technique breaks up the straight line between two sections without adding a hard edge, and animating it in on page load gives the whole page a bit more life the moment it appears.
Add the SVG shape
Download a divider shape as an SVG first, then add an Icon element from the Add panel and upload that SVG through the advanced options.
Set the icon’s color to currentColor so it automatically picks up whatever text color you assign later, instead of staying a fixed color.
In the Style panel, set the width to 100% and the height to Auto so the shape spans the full width of the section, then switch to absolute positioning so it floats instead of pushing the surrounding content around.
Position and color it
Adjust the shape’s position value, then set a Z-index on the section so its content stays above the shape instead of the shape covering everything.
Since the icon uses currentColor, its color comes from the section’s color field. Set that to one of your color variables, for example Accent 1, to tone it down and keep it consistent with the rest of the site.
Animate it on page load
Change the shape’s transform origin on the Y-axis to 0%, so later when it scales, it scales from its base instead of from the center.
Add an interaction that runs on page load. Choose the Scale Y action, set its initial value to 70% and its end value to 100%, then extend the tween’s duration if the default feels too fast.
Duplicate the tween and change its end value back to 70%, then turn on looping in the Interaction tab so the animation replays each time it finishes.
Result
The section now has a shape divider that scales gently into place on page load and loops indefinitely, colored to match the rest of your site instead of sticking out as a fixed color.