Android inspired pattern lock jQuery Plugin – patternlock.js

Today I am going to share simple jQuery library which help you to add An android inspired pattern lock in scalable vector graphics and pure javascript. A passcode mechanism built with scalable vector graphics (SVG) and javascript for modern web application with mobile and tablet support.


Include latest jQuery core library after that add plugin’s JS+CSS library.

     <link rel="stylesheet" href="patternlock.css">
     <script src="//"></script>
     <script src="patternlock.js" charset="utf-8"></script>


Design your desired svg pattern (or use the default one below). Your svg graphics must as a minimum have the patternlock class and three groups <g> with the classes lock-actives, lock-lines and lock-dots

<svg class="patternlock" id="lock" viewBox="0 0 100 100" xmlns="">
    <g class="lock-actives"></g>
    <g class="lock-lines"></g>
    <g class="lock-dots">
        <circle cx="20" cy="20" r="2"/>
        <circle cx="50" cy="20" r="2"/>
        <circle cx="80" cy="20" r="2"/>
        <circle cx="20" cy="50" r="2"/>
        <circle cx="50" cy="50" r="2"/>
        <circle cx="80" cy="50" r="2"/>
        <circle cx="20" cy="80" r="2"/>
        <circle cx="50" cy="80" r="2"/>
        <circle cx="80" cy="80" r="2"/>


Initialize the pattern lock and do something after a patten has been drawn. also you can Enable/disable the ‘vibrate’ effect. Default: true (enable).

var lock = new PatternLock("#lock", {
    onPattern: function() {
    vibrate: false

See live demo and download source code.


This awesome plugin is developed by tympanix. Visit their official github repository for more information and follow for future updates.