JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
<video loop muted autoplay width="640" height="360" id="video-bg">
    <source src="https://www.videvo.net/videvo_files/converted/2014_07/preview/Saint_Barthelemy_2.mov44817.mp4" type="video/mp4" />
  </video>
  
<svg width="640" height="360" viewBox="0 0 640 360">
<defs>
  <mask id="mymask">
    <rect fill="#fff" x="0" y="0" width="640" height="360"></rect>
    <path id="svg_2" fill="#000" d="m156.233,112c-5.923,0 -12.262,0 -18.186,0c-0.035,24.729 -0.07,40.747 -0.105,65.477c-7.815,-24.133 -15.637,-40.11 -23.479,-65.477c-6.65,0 -10.812,0 -17.463,0c0,38.644 0,77.288 0,115.932c5.895,-0.839 12.207,-1.643 18.108,-2.413c0.017,-24.23 0.034,-39.126 0.05,-63.357c8.122,23.85 13.114,37.918 21.212,60.584c6.348,-0.725 13.321,-1.617 19.675,-2.262c0.063,-36.161 0.125,-72.323 0.188,-108.484" class="txt txt01"/>
   <path class="txt txt02" d="m224.163,112c-16.863,0 -33.518,0 -50.381,0c-0.068,35.652 -0.136,71.305 -0.204,106.957c16.853,-1.533 33.724,-2.786 50.608,-3.759c0.009,-5.213 0.019,-12.706 0.028,-17.918c-10.979,0.675 -21.482,1.378 -32.422,2.113c0.019,-9.585 0.038,-17.512 0.057,-27.098c7.996,-0.138 16.44,-0.017 24.608,-0.156c0.01,-5.239 0.02,-12.76 0.029,-17.999c-8.094,0.144 -16.642,0.16 -24.606,0.312c0.019,-9.586 0.038,-14.844 0.057,-24.43c5.01,-0.061 9.92,-0.068 14.822,-0.068c0.861,0 1.721,0 2.582,0.001c0.856,0 1.712,0 2.569,0c4.088,0 8.192,-0.005 12.367,-0.041c0.01,-5.213 -0.123,-12.702 -0.114,-17.914" id="svg_3"/>
   <path class="txt txt03" fill="#ED2517" d="m292.071,112.08c-18.493,0 -37.607,0.001 -56.1,0.002c-0.009,5.179 -0.017,12.639 -0.025,17.817c0.805,-0.006 1.609,-0.008 2.414,-0.008c2.437,0 4.874,0.023 7.312,0.048c2.435,0.023 4.871,0.048 7.306,0.048c0.625,0 1.249,-0.002 1.874,-0.005c-0.038,28.742 -0.075,54.995 -0.112,83.737c5.936,-0.221 12.287,-0.406 18.224,-0.558c0.027,-28.585 0.054,-54.681 0.08,-83.265c6.271,-0.024 12.75,-0.043 19.021,-0.056c0.001,-5.089 0.004,-12.669 0.006,-17.76" id="svg_4"/>
   <path class="txt txt04" fill="#ED2517"...

CSS

body {
  padding: 40px;
  background-color: #000;
}
.wrap {
  position: relative;
}
video {
   width: 640px;
   height: 360px;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 640px;
  height: 360px;
  transform: scale(1.1, 1.5)
}
#masked {
  mask: url(#mymask);
}
#mymask .txt {
  opacity: 0;
  transform-origin: 50% 50%;
  fill: #000;
  stroke: #fff;
  stroke-width: 1px;
  stroke-dasharray: 0;
  animation-duration: 2s;
  animation-name: slidein;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-direction: alternate;
  animation-fill-mode: both;
}
#mymask .txt01 {
  animation-delay: 5s;
}
#mymask .txt02 {
  animation-delay: 5.2s;
}
#mymask .txt03 {
  animation-delay: 5.6s;
}
#mymask .txt04 {
  animation-delay: 5.8s;
}
#mymask .txt05 {
  animation-delay: 6s;
}
#mymask .txt06 {
  animation-delay: 6.2s;
}
#mymask .txt07 {
  animation-delay: 6.4s;
}
@keyframes slidein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#netflix path {
  stroke-width: 0;
  fill: #E50914;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation-duration: 6s;
  animation-name: dash;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-direction: alternate;
  animation-fill-mode: both;
}
#netflix .txt01 {animation-delay: .3s;}
#netflix .txt02 {animation-delay: .6s;}
#netflix .txt03 {animation-delay: .9s;}
#netflix .txt04 {animation-delay: 1.2s;}
#netflix .txt05 {animation-delay: 1.5s;}
#netflix .txt06 {animation-delay: 1.8s;}
#netflix .txt07 {animation-delay: 2.1s;}

@keyframes dash {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}