Dibuja tu patrón
Pista: dibuja una L
Dot pattern unlock
Join the dots by dragging: the line follows your finger, a wrong pattern shakes in red and the right one opens the lock.
Settings
Code
<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">Draw your pattern</p><div class="pad" role="group" aria-label="Unlock pattern"><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>Hint: draw an L</span><button type="button" class="ck" hidden>Check</button></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Pattern locks are a gesture people know from their phones, and this block rebuilds one with buttons and an SVG line. Dragging across the three by three grid links the dots, skipped middle dots join automatically, and on release the pattern is checked: wrong ones flash red and shake, the correct L turns green and the padlock opens.
The main color is the line and success state, the secondary one the error. With the keyboard, arrow keys move between dots, Enter adds them and Check submits. Change the expected sequence in the script; it uses dot indexes from zero to eight.