База знаний

Clipping mask. Как сделать маску для видео, изображений или любых других элементов

<svg   viewBox="0 0 1 1">

<clipPath clipPathUnits="objectBoundingBox" id="myClip" >

<path d="M0.163086 0.777778H0.116902V0.166667H0.0461835V0.777778H0V0H0.163086V0.777778Z" fill="currentColor"/>
<path d="M0.24827 1H0.204973V0.277778H0.24827V0.315556C0.257122 0.281481 0.269149 0.264444 0.284351 0.264444C0.301478 0.264444 0.315429 0.288519 0.326205 0.336667C0.336981 0.384815 0.342369 0.445926 0.342369 0.52C0.342369 0.597778 0.335923 0.662593 0.32303 0.714444C0.309945 0.765556 0.293107 0.791111 0.272517 0.791111C0.262895 0.791111 0.254813 0.785926 0.24827 0.775556V1ZM0.270785 0.42C0.262703 0.42 0.255198 0.434815 0.24827 0.464444V0.616667C0.253851 0.629259 0.260586 0.635556 0.268476 0.635556C0.277328 0.635556 0.284159 0.625556 0.28897 0.605556C0.29378 0.584815 0.296186 0.557407 0.296186 0.523333C0.296186 0.492222 0.293877 0.467407 0.289258 0.448889C0.284832 0.42963 0.278675 0.42 0.270785 0.42Z" fill="currentColor"/>
<path d="M0.456254 0.516667L0.410071 0.777778H0.366774V0.277778H0.410071V0.538889L0.456254 0.277778H0.499551V0.777778H0.456254V0.516667Z" fill="currentColor"/>
<path d="M0.57469 0.777778H0.531393V0.277778H0.57036L0.609327 0.447778L0.645408 0.277778H0.683221V0.777778H0.639924V0.532222L0.608461 0.671111H0.607595L0.57469 0.532222V0.777778Z" fill="currentColor"/>
<path d="M0.81679 0.616667L0.828625 0.734444C0.815539 0.772222 0.798702 0.791111 0.778112 0.791111C0.756944 0.791111 0.739818 0.767037 0.726732 0.718889C0.714032 0.670741 0.707682 0.607037 0.707682 0.527778C0.707682 0.452222 0.714128 0.38963 0.727021 0.34C0.740106 0.28963 0.757137 0.264444 0.778112 0.264444C0.795238 0.264444 0.810055 0.286667 0.822563 0.331111C0.834879 0.374074 0.841037 0.43037 0.841037 0.5C0.841037 0.533333 0.840171 0.561111 0.838439 0.583333H0.752422C0.756271 0.629259 0.766373 0.652222 0.78273 0.652222C0.79543 0.652222 0.806784 0.64037 0.81679 0.616667ZM0.776668 0.403333C0.763968 0.403333 0.755405 0.426296 0.750979 0.472222H0.79774C0.79774 0.452963 0.795815 0.436667 0.791967 0.423333C0.788118 0.41 0.783019 0.403333 0.776668 0.403333Z" fill="currentColor"/>
<path d="M0.905901 1H0.862604V0.277778H0.905901V0.315556C0.914753 0.281481 0.92678 0.264444 0.941982 0.264444C0.959108 0.264444 0.97306 0.288519 0.983836 0.336667C0.994612 0.384815 1 0.445926 1 0.52C1 0.597778 0.993554 0.662593 0.980661 0.714444C0.967575 0.765556 0.950738 0.791111 0.930147 0.791111C0.920526 0.791111 0.912444 0.785926 0.905901 0.775556V1ZM0.928416 0.42C0.920333 0.42 0.912829 0.434815 0.905901 0.464444V0.616667C0.911482 0.629259 0.918217 0.635556 0.926106 0.635556C0.934958 0.635556 0.94179 0.625556 0.9466 0.605556C0.951411 0.584815 0.953816 0.557407 0.953816 0.523333C0.953816 0.492222 0.951507 0.467407 0.946889 0.448889C0.942463 0.42963 0.936305 0.42 0.928416 0.42Z" fill="currentColor"/>

</clipPath>
</svg>


<style>
.video-container{
	clip-path: url(#myClip)
}
</style>