JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<div class="video-clip">
	<video loop autoplay muted src=""></video>
</div>

<svg width="0" height="0">
	<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
		<path d="M99.774 241.432c13.144-7.767 23.9-37.639 23.9-59.147 0-20.911-1.195-85.435-1.195-122.477S100.371.064 69.9.064H0v35.249h12.546v411.044H.6v34.652h65.119c46.6 0 59.745-43.016 59.745-72.291v-109.93s0-35.25-25.69-57.356Zm-21.508 187.6s0 22.106-17.923 19.716V260.551c17.923-4.182 17.923 14.936 17.923 14.936Zm0-225.238s0 22.7-17.923 19.716V35.91c17.923-4.78 17.923 14.339 17.923 14.339ZM150.557.064v34.652l13.144 2.987 21.508 214.484-3.585 190.585-13.144 2.987.6 35.249h69.3l-.6-35.249-11.352-3.585 1.195-188.2 32.86-216.276 12.546-2.39-.6-34.652-51.978-.6v34.652H233.6l-19.116 124.277-8.962-121.282 7.767-3.585L214.484.661Zm287.97 72.291c0-50.783-20.313-72.291-51.381-72.291-40.626 0-54.368 31.067-54.368 109.333s1.195 199.548 1.195 271.839c0 72.889 14.339 99.774 51.38 99.774s53.77-35.249 53.77-97.981c.001-62.136-.596-259.891-.596-310.674ZM397.9 423.654c0 7.767-3.585 16.729-10.754 16.729s-11.352-11.352-11.352-16.729V54.432c0-10.754 4.182-17.923 10.157-17.923 7.767 0 11.949 10.754 11.949 17.326Zm185.209 16.131c0-5.377 1.195-81.85 1.195-135.023 0-33.457-14.339-52.575-25.093-62.732 13.144-11.949 24.5-32.86 24.5-66.914 0-12.546-.6-73.486-.6-106.943s-14.936-69.9-60.94-68.109c0 0-45.406 0-57.952 1.792v34.652l9.559.6v405.664l-10.157 2.39 1.195 35.847h63.927v-35.847l-7.169-2.987V259.953h2.39c10.154 2.988 14.336 11.352 14.336 25.093 0 18.521-.6 110.528-.6 150.557 0 0 0 40.626 12.546 44.211h43.614v-32.86c-10.751-1.792-10.751-7.169-10.751-7.169Zm-46.6-230.615s0 13.741-17.923 16.729V36.508c18.521-4.78 18.521 16.729 18.521 16.729-.001 21.508-.599 142.195-.599 155.933ZM737.251 59.808c0-37.042-22.106-59.745-52.575-59.745h-69.9v35.249h12.544v411.045h-11.949v34.652h65.122c46.6 0 59.745-43.016 59.745-72.291s-2.987-311.868-2.987-348.91Zm-48.394 369.224s0 22.106-17.923 19.716V35.91c17.923-4.78 17.923 14.339 17.923...

SCSS

/* .video-clip {
    clip-path: path('M99.774 241.432c13.144-7.767 23.9-37.639 23.9-59.147 0-20.911-1.195-85.435-1.195-122.477S100.371.064 69.9.064H0v35.249h12.546v411.044H.6v34.652h65.119c46.6 0 59.745-43.016 59.745-72.291v-109.93s0-35.25-25.69-57.356Zm-21.508 187.6s0 22.106-17.923 19.716V260.551c17.923-4.182 17.923 14.936 17.923 14.936Zm0-225.238s0 22.7-17.923 19.716V35.91c17.923-4.78 17.923 14.339 17.923 14.339ZM150.557.064v34.652l13.144 2.987 21.508 214.484-3.585 190.585-13.144 2.987.6 35.249h69.3l-.6-35.249-11.352-3.585 1.195-188.2 32.86-216.276 12.546-2.39-.6-34.652-51.978-.6v34.652H233.6l-19.116 124.277-8.962-121.282 7.767-3.585L214.484.661Zm287.97 72.291c0-50.783-20.313-72.291-51.381-72.291-40.626 0-54.368 31.067-54.368 109.333s1.195 199.548 1.195 271.839c0 72.889 14.339 99.774 51.38 99.774s53.77-35.249 53.77-97.981c.001-62.136-.596-259.891-.596-310.674ZM397.9 423.654c0 7.767-3.585 16.729-10.754 16.729s-11.352-11.352-11.352-16.729V54.432c0-10.754 4.182-17.923 10.157-17.923 7.767 0 11.949 10.754 11.949 17.326Zm185.209 16.131c0-5.377 1.195-81.85 1.195-135.023 0-33.457-14.339-52.575-25.093-62.732 13.144-11.949 24.5-32.86 24.5-66.914 0-12.546-.6-73.486-.6-106.943s-14.936-69.9-60.94-68.109c0 0-45.406 0-57.952 1.792v34.652l9.559.6v405.664l-10.157 2.39 1.195 35.847h63.927v-35.847l-7.169-2.987V259.953h2.39c10.154 2.988 14.336 11.352 14.336 25.093 0 18.521-.6 110.528-.6 150.557 0 0 0 40.626 12.546 44.211h43.614v-32.86c-10.751-1.792-10.751-7.169-10.751-7.169Zm-46.6-230.615s0 13.741-17.923 16.729V36.508c18.521-4.78 18.521 16.729 18.521 16.729-.001 21.508-.599 142.195-.599 155.933ZM737.251 59.808c0-37.042-22.106-59.745-52.575-59.745h-69.9v35.249h12.544v411.045h-11.949v34.652h65.122c46.6 0 59.745-43.016 59.745-72.291s-2.987-311.868-2.987-348.91Zm-48.394 369.224s0 22.106-17.923 19.716V35.91c17.923-4.78 17.923 14.339 17.923 14.339ZM768.318...