Desbloqueo con patrón de puntos

<div class="uvq15-ptn"><span class="lk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path class="sh" d="M8 11V7a4 4 0 0 1 8 0v4"/><rect x="5" y="11" width="14" height="10" rx="2.5"/></svg></span><p class="msg" aria-live="polite">Dibuja tu patrón</p><div class="pad" role="group" aria-label="Patrón de desbloqueo"><svg viewBox="0 0 300 300" aria-hidden="true"><polyline class="ln" points=""/><line class="tl" x1="0" y1="0" x2="0" y2="0"/></svg><button type="button" class="dt" style="left:16.667%;top:16.667%" aria-label="1" aria-pressed="false"></button><button type="button" class="dt" style="left:50.000%;top:16.667%" aria-label="2" aria-pressed="false"></button><button type="button" class="dt" style="left:83.333%;top:16.667%" aria-label="3" aria-pressed="false"></button><button type="button" class="dt" style="left:16.667%;top:50.000%" aria-label="4" aria-pressed="false"></button><button type="button" class="dt" style="left:50.000%;top:50.000%" aria-label="5" aria-pressed="false"></button><button type="button" class="dt" style="left:83.333%;top:50.000%" aria-label="6" aria-pressed="false"></button><button type="button" class="dt" style="left:16.667%;top:83.333%" aria-label="7" aria-pressed="false"></button><button type="button" class="dt" style="left:50.000%;top:83.333%" aria-label="8" aria-pressed="false"></button><button type="button" class="dt" style="left:83.333%;top:83.333%" aria-label="9" aria-pressed="false"></button></div><p class="ht"><span>Pista: dibuja una L</span><button type="button" class="ck" hidden>Comprobar</button></p></div>