<div class="letter clip1"><div class="ripple"></div></div>
<div class="letter clip2"><div class="ripple"></div></div>
<div class="letter clip3"><div class="ripple"></div></div>
<div class="letter clip4"><div class="ripple"></div></div>

body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
.letter {
  background-color: #e0e0e0;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 160px;
}
@media (max-width: 767px) { 
  .letter {
    height: 150px;
    width: 120px;
  }
}
@media (max-width: 480px) { 
  .letter {
    height: 100px;
    width: 80px;
  }
}
.letter:hover {
  background-color: #d5d5d5;
}
.clip1 {
  clip-path: polygon(4.410323% 99.406372%, 3.5185515% 99.276987%, 2.6634454% 98.918265%, 1.8868376% 98.336464%, 1.2305611% 97.537844%, 0.73644851% 96.52866%, 0.44633327% 95.315172%, 0.40204777% 93.903637%, 0.64542508% 92.300313%, 3.3313292% 80.865309%, 5.9161522% 69.724585%, 8.4147493% 58.831012%, 10.841977% 48.137464%, 13.212691% 37.596813%, 15.541747% 27.161932%, 17.844001% 16.785694%, 20.13431% 6.4209704%, 20.674669% 5.1067356%, 21.624417% 3.9258395%, 22.887536% 2.892584%, 24.368012% 2.0212711%, 25.969827% 1.3262028%, 27.596965% 0.82168044%, 29.15341% 0.5220065%, 30.543146% 0.44148268%, 40.241826% 0.69737721%, 48.037871% 0.89806303%, 54.276155% 1.050063%, 59.301548% 1.1598999%, 63.458924% 1.2340967%, 67.093156% 1.2791761%, 70.549116% 1.301661%, 74.171676% 1.3080743%, 78.418539% 1.5589932%, 82.396793% 2.2494417%, 86.021612% 3.2878429%, 89.208168% 4.5826202%, 91.871632% 6.0421969%, 93.927178% 7.5749962%, 95.289977% 9.0894413%, 95.875202% 10.493956%, 95.908079% 12.033908%, 95.578614% 13.28046%, 94.895205% 14.276381%, 93.86625% 15.06444%, 92.500149% 15.687403%, 90.805301% 16.188039%, 88.790104% 16.609117%, 86.462959% 16.993405%, 82.098375% 17.658727%, 78.249805% 18.242551%, 74.824006% 18.766406%, 71.727735% 19.251822%, 68.867749% 19.72033%, 66.150804% 20.19346%, 63.483658% 20.692743%, 60.773067% 21.239709%, 60.089069% 21.280044%, 59.646982% 21.100829%, 59.34447% 20.778222%, 59.079198% 20.38838%, 58.748828% 20.007463%, 58.251025% 19.711628%, 57.483453% 19.577035%, 56.343776% 19.679841%, 55.032053% 20.035638%, 54.163199% 20.506847%, 53.633963% 21.053024%, 53.34109% 21.633724%, 53.181325% 22.208502%, 53.051415% 22.736912%, 52.848106% 23.178509%, 52.468145% 23.492849%, 52.039165% 23.674084%, 51.725711% 23.763022%, 51.479891% 23.789207%, 51.253814% 23.782181%, 50.999589% 23.771485%, 50.669323% 23.786662%, 50.215125% 23.857254%, 49.589105% 24.012803%, 48.400702% 24.398204%, 47.361752% 24.821994%, 46.430861% 25.279558%, 45.566639% 25.766282%, 44.727691% 26.27755%, 43.872626% 26.808748%, 42.960051% 27.355261%, 41.948573% 27.912473%, 40.019762% 28.830191%, 38.223621% 29.547658%, 36.59535% 30.117462%, 35.170152% 30.592189%, 33.983229% 31.024427%, 33.069782% 31.466763%, 32.465015% 31.971783%, 32.204128% 32.592074%, 32.105715% 33.747879%, 32.110201% 34.848718%, 32.271154% 35.911707%, 32.642143% 36.953962%, 33.276735% 37.992602%, 34.2285% 39.044743%, 35.551004% 40.127502%, 37.297816% 41.257997%, 40.718442% 42.357288%, 45.827446% 42.955814%, 52.199589% 43.290833%, 59.409629% 43.599601%, 67.032326% 44.119376%, 74.642439% 45.087415%, 81.814726% 46.740975%, 88.123946% 49.317315%, 90.628576% 50.91675%, 93.04193% 52.959639%, 95.245623% 55.405848%, 97.12127% 58.215243%, 98.550486% 61.347691%, 99.414888% 64.763058%, 99.59609% 68.421212%, 98.975707% 72.28202%, 97.276961% 77.047032%, 94.76904% 81.631336%, 91.454589% 85.913458%, 87.336253% 89.771925%, 82.416679% 93.085264%, 76.698512% 95.732001%, 70.184397% 97.590665%, 62.87698% 98.539781%, 55.574793% 98.918489%, 48.293437% 99.199352%, 41.021619% 99.392668%, 33.748046% 99.508731%, 26.461424% 99.557837%, 19.150458% 99.550283%, 11.803856% 99.496363%);
}
.clip2 {
  clip-path: polygon(0.48903848% 99.550938%, 1.2792754% 96.03835%, 21.539355% 3.0973647%, 21.809804% 2.2594208%, 22.255282% 1.6317889%, 22.844114% 1.1840829%, 23.544626% 0.88591664%, 24.32514% 0.70690392%, 25.153982% 0.61665864%, 25.999477% 0.58479465%, 26.829949% 0.58092579%, 97.024218% 0.44864119%, 99.570397% 0.44270188%, 94.89675% 21.76823%, 45.511856% 21.76823%, 41.772939% 39.025885%, 86.951545% 39.025885%, 81.966315% 60.228145%, 36.787711% 60.228145%, 36.696186% 60.617163%, 34.409022% 71.691178%, 34.139308% 73.5461%, 34.149904% 74.592612%, 34.417763% 75.521622%, 34.894766% 76.326339%, 35.532794% 76.999971%, 36.283728% 77.535728%, 37.099448% 77.926819%, 37.931835% 78.166454%, 38.732771% 78.247841%, 78.968537% 78.117095%, 79.92757% 78.193861%, 80.735585% 78.410208%, 81.393273% 78.745214%, 81.901324% 79.177954%, 82.260427% 79.687506%, 82.471274% 80.252945%, 82.534555% 80.853348%, 82.450959% 81.467791%, 82.090783% 82.882412%, 81.787478% 84.078796%, 81.524947% 85.117525%, 81.287091% 86.05918%, 81.057814% 86.964344%, 80.821018% 87.893599%, 80.560606% 88.907526%, 80.260479% 90.066707%, 79.824608% 91.085483%, 78.930074% 92.418376%, 77.560747% 93.926701%, 75.700495% 95.471775%, 73.333188% 96.914912%, 70.442697% 98.117429%, 67.01289% 98.940641%, 63.027637% 99.245864%, 2.5871647% 99.537829%);
}
.clip3 {
  clip-path: polygon(0.41560927% 99.480527%, 0.91498568% 98.580372%, 2.2646803% 96.140099%, 4.2420413% 92.549996%, 6.6244166% 88.200351%, 9.1891545% 83.481451%, 11.713603% 78.783583%, 13.97511% 74.497037%, 15.751024% 71.012099%, 17.218467% 68.673114%, 18.83954% 67.115562%, 20.545062% 66.221249%, 22.265848% 65.871977%, 23.932715% 65.949551%, 25.47648% 66.335774%, 26.82796% 66.91245%, 27.917972% 67.561383%, 31.407238% 69.749691%, 35.540092% 72.02501%, 39.974774% 74.270591%, 44.369522% 76.369685%, 48.382576% 78.205543%, 51.672176% 79.661416%, 53.89656% 80.620556%, 54.713968% 80.966213%, 56.721411% 79.868202%, 58.728854% 78.77019%, 60.736297% 77.672179%, 62.74374% 76.574168%, 64.751183% 75.476156%, 66.758626% 74.378145%, 68.766069% 73.280133%, 70.773512% 72.182122%, 70.725553% 71.503691%, 70.581969% 69.633581%, 70.343201% 66.819563%, 70.009693% 63.309409%, 69.581884% 59.350894%, 69.060216% 55.191788%, 68.44513% 51.079865%, 67.737069% 47.262896%, 65.834907% 40.23229%, 63.456161% 34.373069%, 60.766444% 29.588299%, 57.931366% 25.781051%, 55.116539% 22.854394%, 52.487575% 20.711396%, 50.210086% 19.255126%, 48.449682% 18.388654%, 47.498887% 17.908058%, 46.782784% 17.361932%, 46.290435% 16.751566%, 46.010899% 16.078248%, 45.933235% 15.343267%, 46.046504% 14.547911%, 46.339765% 13.693471%, 46.802077% 12.781234%, 47.857759% 10.919148%, 48.734089% 9.3131647%, 49.463855% 7.9262883%, 50.079844% 6.721523%, 50.61484% 5.6618731%, 51.101632% 4.7103431%, 51.573005% 3.8299371%, 52.061746% 2.9836594%, 52.4642% 2.3305696%, 52.834789% 1.7830394%, 53.200979% 1.3353726%, 53.590236% 0.98187306%, 54.030029% 0.71684453%, 54.547822% 0.53459085%, 55.171085% 0.42941584%, 55.927282% 0.39562332%, 58.7794% 0.39827118%, 62.631752% 0.40525188%, 67.058836% 0.41512116%, 71.635151% 0.42643473%, 75.935195% 0.43774829%, 79.533466% 0.44761757%, 82.004463% 0.45459827%, 82.922685% 0.45724613%, 82.914651% 0.54342336%, 82.899666% 0.80387746%, 82.891406% 1.2414921%, 82.903547% 1.8591508%, 82.949765% 2.6597374%, 83.043736% 3.6461353%, 83.199136% 4.8212283%, 83.42964% 6.1879%, 84.996362% 14.912838%, 87.218681% 27.671953%, 89.830146% 42.863275%, 92.564301% 58.884834%, 95.154693% 74.134661%, 97.334868% 87.010785%, 98.838373% 95.911237%, 99.398753% 99.334%, 96.317411% 99.334%, 93.23607% 99.334%, 90.154728% 99.334%, 87.073386% 99.334%, 83.992045% 99.334%, 80.910703% 99.334%, 77.829362% 99.334%, 74.74802% 99.334%, 74.251206% 95.852557%, 73.754393% 92.471067%, 73.257579% 89.089576%, 72.760766% 85.708085%, 72.263952% 82.326594%, 71.767139% 78.945104%, 71.270325% 75.563613%, 70.773512% 72.182122%, 70.29517% 72.44208%, 68.990093% 73.151836%, 67.053206% 74.206213%, 64.679432% 75.500034%, 62.063697% 76.928122%, 59.400926% 78.385299%, 56.886041% 79.766388%, 54.713968% 80.966213%, 55.515923% 81.464926%, 55.940619% 81.936894%, 56.049274% 82.369865%, 55.903105% 82.751588%, 55.563328% 83.06981%, 55.091159% 83.312281%, 54.547816% 83.466747%, 53.994516% 83.520959%, 52.553154% 83.526622%, 50.629688% 83.540135%, 48.376104% 83.556286%, 45.944387% 83.569862%, 43.486522% 83.575649%, 41.154494% 83.568435%, 39.100288% 83.543006%, 37.475889% 83.49415%, 36.176805% 83.488929%, 35.193502% 83.606587%, 34.46326% 83.843805%, 33.923356% 84.197265%, 33.51107% 84.663647%, 33.16368% 85.239635%, 32.818464% 85.921908%, 32.412701% 86.70715%, 31.775098% 87.890609%, 30.958004% 89.430884%, 30.042945% 91.169362%, 29.111447% 92.94743%, 28.245033% 94.606476%, 27.52523% 95.987887%, 27.033564% 96.93305%, 26.851558% 97.283%, 26.335322% 97.973%, 25.819086% 98.463%, 25.30285% 98.854%, 24.786614% 99.144%, 24.270378% 99.334%, 23.754142% 99.524%, 23.237906% 99.614%, 22.72167% 99.603769%, 19.933412% 99.588364%, 17.145155% 99.572958%, 14.356897% 99.557553%, 11.56864% 99.542148%, 8.780382% 99.526743%, 5.9921245% 99.511337%, 3.2038669% 99.495932%);
}
.clip4 {
  clip-path: polygon(0.51499355% 99.519059%, 3.0500157% 87.144516%, 5.5850379% 74.769973%, 8.1200601% 62.39543%, 10.655082% 50.020887%, 13.190104% 37.646344%, 15.725127% 25.271801%, 18.260149% 12.897258%, 20.795171% 0.52271554%, 21.96691% 0.51833001%, 25.184324% 0.50676816%, 30.000711% 0.4904221%, 35.969369% 0.47168393%, 42.643594% 0.45294577%, 49.576685% 0.43659971%, 56.321939% 0.42503786%, 62.432653% 0.42065233%, 70.139155% 0.9243038%, 77.215346% 2.4399108%, 83.538795% 4.9744524%, 88.987069% 8.5349074%, 93.437738% 13.128255%, 96.768368% 18.761474%, 98.85653% 25.441543%, 99.579791% 33.175441%, 98.987408% 37.393494%, 97.298153% 41.933244%, 94.643869% 46.574839%, 91.156397% 51.098424%, 86.967579% 55.284149%, 82.209257% 58.912158%, 77.013274% 61.7626%, 71.51147% 63.615621%, 74.088273% 68.971917%, 76.8883% 74.818509%, 79.736853% 80.784158%, 82.459233% 86.497623%, 84.880745% 91.587662%, 86.826688% 95.683036%, 88.122366% 98.412504%, 88.59308% 99.404824%, 85.826179% 99.404824%, 83.059277% 99.404824%, 80.292376% 99.404824%, 77.525475% 99.404824%, 74.758573% 99.404824%, 71.991672% 99.404824%, 69.22477% 99.404824%, 66.457869% 99.404824%, 65.32343% 99.392938%, 64.377773% 99.33918%, 63.594716% 99.216402%, 62.948075% 98.997457%, 62.411668% 98.655196%, 61.959311% 98.162471%, 61.564821% 97.492134%, 61.202016% 96.617037%, 60.060441% 93.684344%, 58.607374% 90.286324%, 56.941445% 86.593889%, 55.161286% 82.777952%, 53.365529% 79.009424%, 51.652806% 75.459218%, 50.121747% 72.298246%, 48.870985% 69.697421%, 48.41509% 68.791413%, 47.999732% 68.106567%, 47.586745% 67.611948%, 47.137963% 67.276626%, 46.615221% 67.069666%, 45.980354% 66.960135%, 45.195196% 66.917101%, 44.221582% 66.90963%, 42.544202% 66.913972%, 40.683226% 66.92542%, 38.764177% 66.941606%, 36.912575% 66.96016%, 35.25394% 66.978713%, 33.913795% 66.994899%, 33.017659% 67.006347%, 32.691053% 67.010689%, 33.228767% 64.546978%, 33.766481% 62.083267%, 34.304195% 59.619556%, 34.841909% 57.155845%, 35.379622% 54.692135%, 35.917336% 52.228424%, 36.45505% 49.764713%, 36.992764% 47.301002%, 37.481525% 47.297558%, 38.841198% 47.288478%, 40.911867% 47.275642%, 43.533617% 47.260926%, 46.546534% 47.246211%, 49.790701% 47.233375%, 53.106203% 47.224295%, 56.333126% 47.220851%, 59.155329% 46.99948%, 62.044946% 46.327163%, 64.872986% 45.191597%, 67.510462% 43.580479%, 69.828383% 41.481505%, 71.697759% 38.882371%, 72.989601% 35.770773%, 73.574919% 32.134408%, 73.443261% 29.658623%, 72.843406% 27.54072%, 71.854243% 25.772137%, 70.554662% 24.344312%, 69.023552% 23.248684%, 67.339802% 22.476693%, 65.582303% 22.019776%, 63.829944% 21.869373%, 60.831969% 21.873116%, 57.382519% 21.882985%, 53.743952% 21.896938%, 50.178626% 21.912932%, 46.948898% 21.928926%, 44.317126% 21.942879%, 42.545667% 21.952748%, 41.896879% 21.956491%, 41.283865% 25.124555%, 40.67085% 28.292619%, 40.057836% 31.460683%, 39.444822% 34.628747%, 38.831807% 37.79681%, 38.218793% 40.964874%, 37.605778% 44.132938%, 36.992764% 47.301002%, 36.45505% 49.764713%, 35.917336% 52.228424%, 35.379622% 54.692135%, 34.841909% 57.155845%, 34.304195% 59.619556%, 33.766481% 62.083267%, 33.228767% 64.546978%, 32.691053% 67.010689%, 31.858203% 71.081736%, 31.025353% 75.152782%, 30.192504% 79.223829%, 29.359654% 83.294876%, 28.526804% 87.365923%, 27.693954% 91.43697%, 26.861105% 95.508016%, 26.028255% 99.579063%, 22.839097% 99.571562%, 19.64994% 99.564062%, 16.460782% 99.556561%, 13.271624% 99.549061%, 10.082467% 99.541561%, 6.8933089% 99.53406%, 3.7041512% 99.52656%);
}
.ripple {
  background-color: #aaa;
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  transform: scale(0);
}
.start {
  transform: scale(0.2);
}
.active {
  transform: scale(2);
  transition: transform 700ms, opacity 700ms;
  opacity: 0.2;
}

const letters = Array.from(document.querySelectorAll('.letter'))
letters.forEach((letter) => {
  let timerId;
  letter.addEventListener('mousedown', (e) => {
    clearTimeout(timerId);
    const ripple = e.target.querySelector('.ripple')
    const size = letter.offsetWidth;
    const pos = letter.getBoundingClientRect();
    const x = e.pageX - pos.left - size;
    const y = e.pageY - pos.top - size;
    ripple.style = 'top:' + y + 'px; left:' + x + 'px; width: ' + size * 2 + 'px; height: ' + size * 2 + 'px;';
    ripple.classList.remove('active');
    ripple.classList.remove('start');
    setTimeout(() => {
      ripple.classList.add('start')
      setTimeout(() => {
        ripple.classList.add('active')
      });
    });
  })
  letter.addEventListener('mouseup', (e) => {
    const ripple = e.target.querySelector('.ripple')
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      ripple.classList.remove('active');
      ripple.classList.remove('start');
    }, 500);
  })
})