波打つ境界線アニメーションのCSSジェネレーター

<!-- 1. セクション -->
<div class="box-section">
	<span class="section-title">Section Title</span>
</div>
<!-- 2. アニメーション波形境界線 -->
<div class="custom-shape-divider">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 25" preserveAspectRatio="none">
		<defs>
			<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
		</defs>
		<g class="wave-animation" transform="translate(0, 48) scale(1, -1)">
			<use xlink:href="#wave-path" x="48" y="0" />
			<use xlink:href="#wave-path" x="48" y="3" opacity="0.5" />
			<use xlink:href="#wave-path" x="48" y="5" opacity="0.3" />
		</g>
	</svg>
</div>

/* 1. セクションのスタイル */
.box-section {
	width: 100%;
	height: 300px;
	background: {{color}};
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-section .section-title {
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 2rem;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 2. アニメーション波形境界線のスタイル */
.custom-shape-divider {
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: {{flip_h_style}} {{invert_style}};
}

.custom-shape-divider svg {
	display: block;
	width: 100%;
	height: {{height}}px;
}

.wave-animation > use {
	fill: {{color}};
	animation: wave-move {{speed}}s cubic-bezier(.55,.5,.45,.5) infinite;
}

.wave-animation > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: {{speed}}s;
}

.wave-animation > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: calc({{speed}}s * 0.7);
}

.wave-animation > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: calc({{speed}}s * 0.5);
}

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

/* スマホ対応 */
@media (max-width: 768px) {
	.custom-shape-divider svg {
		height: 40px;
	}
}