HTML/CSS 물결

	<footer id="footer">
        <svg class="wrap-wave" viewBox="0 0 999.6 73.6"
                preserveAspectRatio="xMinYMin meet"
                style="z-index: -3;">
            <path d="M843.7,53.7c-50.2-8.1-97.6-36.9-159-38.9c-61.5-2-137,22.9-190.3,33.3c-53.2,10.5-84.2,6.5-136.1-4.9 c-52-11.4-125-30.2-188.2-32.6C106.9,8.3,53.5,22.3,0,36.4v37.2h999.6V36.4C946.7,49.1,893.8,61.8,843.7,53.7z"
                    style="stroke: none;
                    rgba(54, 56, 71, 1);">
            </path>
            <path d="M978,31.9c-37.9-3.9-75.7-8.6-113.9-9.2c-26-0.4-52,1-78,2.1c-37.7,1.4-75.4,2.3-113.2,2.1 c-7-0.1-14-0.1-20.9-0.3c-21.1-0.4-42.3-1.7-63.2-4.4c-43.2-5.6-86.4-10.1-130-10.2c-27.4-0.1-54.9,1.4-82.2,3.6 c-27,2.2-54.1,3.7-81.2,3.7c-0.4,0-0.8,0-1.2,0c-4,0-8-0.1-12-0.1c-1.9,0-3.9-0.1-5.8-0.1c-26.9-0.6-53.7-1.7-80.6-1.7 c-44,0-87.2-10.5-131.2-11.6c-9.9-0.2-19.8-0.1-29.8,0.4C31.7,6.4,0,8.7,0,10.3c0,0,0,63.2,0,63.2s981.1,0,999.6,0V35 C995.2,33.8,979.5,32.1,978,31.9z"
                    style="stroke: none;
                    fill: rgba(54, 56, 71, 1); opacity: 0.5;">
            </path>
            <path d="M993.9,29.1c-2.2,0.4-4.5,0.8-6.7,1.2c-9.5,1.6-19.2,3-28.8,4c-0.1,0-0.2,0-0.3,0c-9.8,1-19.6,1.6-29.4,2.4 c0,0-0.1,0-0.1,0c-5.4,0.4-10.9,0.5-16.4,0.6c-9.9,0.2-19.8,0.2-29.7-0.1c-4.5-0.1-8.9-0.3-13.4-0.5c-4.5-0.2-9-0.7-13.4-0.7 c-48.5-3.1-97.5-18.8-159.7-19.3S558.3,31.2,493.1,33.9c-65.3,2.7-120.5-6.8-170.8-12C271.9,16.7,226,1,173.1,0.1 C118-0.8,77.9,2,0,28.3v45.3h999.6V28.1C998.4,28.4,994.4,29,993.9,29.1z"
                    style="rgba(54, 56, 71, 1); opacity: 0.2;">
            </path>
        </svg>
	</footer>

.wrap-wave {
	fill: rgb(53 56 71) !important;
	height: 100%;
	margin-bottom: -10px;
	transform: rotate(0deg) scaleX(-1) !important;
	position: relative;
}

path {
	fill: rgb(53 56 71) !important;
}