Skip to content

An android inspired pattern lock in scalable vector graphics and pure javascript


Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



36 Commits

Repository files navigation


A passcode mechanism built with scalable vector graphics (SVG) and javascript for modern web application with mobile and tablet support


Install using npm:

npm i pattern-lock-js --save

... or install using yarn:

yarn add pattern-lock-js

Getting started

Import dependecies:

<script src="jquery.js" charset="utf-8"></script>

Import the module:

<link rel="stylesheet" href="patternlock.min.css">
<script src="patternlock.min.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"/>

Initialise the component

var lock = new PatternLock("#lock", {
  onPattern: function(pattern) {
    // Context is the pattern lock instance


The returned object from new PatternLock(...) has the following utility functions:

  • clear() Clears the current pattern
  • success() Validates the pattern as correct
  • error() Validates the pattern as incorrect
  • getPattern() Returnes the currently active pattern or NaN

The pattern lock constructor accepts a second argument - an object literal with the following properties:

  • onPattern: function Called when a pattern is drawn with the pattern as argument. Returning true/false validates/invalidates the pattern - the same as calling success() and error(). The context is set to the pattern lock instance itself.
  • vibrate: boolean Defines if there should be vibrations while using the PatternLock (if available). Default: true