JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
	<div class="list">
		<div class="list__item">Некий текст</div>
		<div class="list__splitter">
			<div class="list__splitter__content">
				<svg viewBox="0 0 517 123" fill="none" preserveAspectRatio="none">
					<path d="M1.5.9v30.3a30 30 0 0030 30h454a30 30 0 0130 30v31.1" stroke="#000"/>
				</svg>
			</div>
		</div>
		
		<div class="list__item">Некий more text more text more text  more text текст</div>
		<div class="list__splitter list__splitter--revert">
			<div class="list__splitter__content">
				<svg viewBox="0 0 517 123" fill="none" preserveAspectRatio="none">
					<path d="M1.5.9v30.3a30 30 0 0030 30h454a30 30 0 0130 30v31.1" stroke="#000"/>
				</svg>
			</div>
		</div>
		
		<div class="list__item">Некий текст</div>
	</div>
</div>

SCSS

.list {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 400px;
	background: #f9f9f9;
  height: 100%;
  
  &__item {
    max-width: 50px;
		padding: 1em;
		height: 80px;
    overflow: hidden;
	}
	&__splitter {
		position: relative;
		&--revert {
			transform: scale(-1, 1);
		}
		&__content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			transform: translatey(-50%);
			
			svg {
				width: 100%;
				height: 123px;
				path {
					vector-effect: non-scaling-stroke;
				}
			}
			&::before, &::after {
				width: 10px;
				height: 10px;
				position: absolute;
				background: #f00;
			}
			&::after {
				content: "";
				bottom: -4px;
				right: -4px;
			}
		}
		
	}
	&>*:nth-child(2) {
		.list__splitter__content::before {
			content: "";
			top: -4px;
			left: -4px;
		}
	}
}

.pathAnima {
	stroke-dasharray: var(--path-length);
	stroke-dashoffset: var(--path-length);
	animation-name: pathAnima;
	animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes pathAnima {
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

// Добываем длну пути
let svgPath = [...document.querySelectorAll(".list__splitter path")]
svgPath.forEach(path => {
	let length = path.getTotalLength()
	path.style.setProperty('--path-length', length);
	
})

// Запуск анимации
svgPath.forEach(path => {
	path.classList.add("pathAnima")
})