SVG patternlock

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>SVG Based Pattern Lock Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <style media="screen">
        * {
            box-sizing: border-box;
        }

        html,
        body {
            padding: 0;
            margin: 0;
            height: 100vh;
            max-height: 100vh;
            overflow: hidden;
        }

        body {
            font-family: 'Varela Round', sans-serif;
            background-color: #fafafa;
        }

        .container {
            margin: 150px auto;
            height: 100%;
        }

        h1 {
            text-align: center;
            margin: 0;
            height: 15vh;
            line-height: 15vh;
            text-align: center;
            font-size: 6vh;

        }

        #lock {
            width: 100%;
            height: calc(100% - 15vh);
            padding-bottom: 12vh;
            min-height: 120px;
        }

        .stars {
            margin: auto;
            display: block;
        }
    </style>

    <link rel="stylesheet" href="styles.css">

    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>

<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<!-- <li><a href="https://www.jqueryscript.net/other/SVG-Pattern-Lock.html">Download This Plugin</a></li> -->
<!--<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>-->
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>

    <div class="container">
        <h1>SVG Based Pattern Lock Example</h1>
        <svg class="patternlock" id="lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <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"/>
            </g>
        <svg>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="patternlock.js"></script>

    <script type="text/javascript">
    var e = document.getElementById('lock')
	var number=document.getElementById('lock').value;

    var p = new PatternLock(e, {
        onPattern: function() {
            this.success()
			alert(number);
			}
	}
	)


    </script>
</body>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</html>