{"id":1029,"date":"2018-02-25T12:03:24","date_gmt":"2018-02-25T12:03:24","guid":{"rendered":"http:\/\/stackofcodes.in\/?p=1029"},"modified":"2018-02-25T12:03:24","modified_gmt":"2018-02-25T12:03:24","slug":"awsome-login-animations","status":"publish","type":"post","link":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/","title":{"rendered":"Awsome Login Animations"},"content":{"rendered":"<p>Awesome login Animation..<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-1031 aligncenter\" src=\"http:\/\/stackofcodes.in\/wp-content\/uploads\/2018\/02\/FireShot-Capture-16-https___dms.licdn_.com_playback_C5105AQESXkpMopsFtg_46c92d5e8f814328980cd-217x300.png\" alt=\"\" width=\"217\" height=\"300\" \/><\/p>\n<p>HTML CODES:<\/p>\n<pre>&lt;form&gt; \n&lt;div class=\"svgContainer\"&gt; \n&lt;div&gt; &lt;svg class=\"mySVG\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 200 200\"&gt; &lt;defs&gt; &lt;circle id=\"armMaskPath\" cx=\"100\" cy=\"100\" r=\"100\"\/&gt; &lt;\/defs&gt; &lt;clipPath id=\"armMask\"&gt; &lt;use xlink:href=\"#armMaskPath\" overflow=\"visible\"\/&gt; &lt;\/clipPath&gt; \n&lt;circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"#a9ddf3\"\/&gt; &lt;g class=\"body\"&gt; &lt;path fill=\"#FFFFFF\" d=\"M193.3,135.9c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1 c-10.6,0-20,5.1-25.8,13l0,78h187L193.3,135.9z\"\/&gt; &lt;path fill=\"none\" stroke=\"#3A5E77\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoinn=\"round\" d=\"M193.3,135.9 c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1c-10.6,0-20,5.1-25.8,13\"\/&gt; &lt;path fill=\"#DDF1FA\" d=\"M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z\"\/&gt; &lt;\/g&gt; &lt;g class=\"earL\"&gt; &lt;g class=\"outerEar\" fill=\"#ddf1fa\" stroke=\"#3a5e77\" stroke-width=\"2.5\"&gt; &lt;circle cx=\"47\" cy=\"83\" r=\"11.5\"\/&gt; &lt;path d=\"M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/&gt; &lt;\/g&gt; &lt;g class=\"earHair\"&gt; &lt;rect x=\"51\" y=\"64\" fill=\"#FFFFFF\" width=\"15\" height=\"35\"\/&gt; &lt;path d=\"M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9\" fill=\"#fff\" stroke=\"#3a5e77\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/&gt; &lt;\/g&gt; &lt;\/g&gt; &lt;g class=\"earR\"&gt; &lt;g class=\"outerEar\" fill=\"#ddf1fa\" stroke=\"#3a5e77\" stroke-width=\"2.5\"&gt; &lt;circle cx=\"155\" cy=\"83\" r=\"11.5\"\/&gt; &lt;path d=\"M155.7 78.9c2.3 0 4.1 1.9 4.1 4.1 0 2.3-1.9 4.1-4.1 4.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/&gt; &lt;\/g&gt; &lt;g class=\"earHair\"&gt; &lt;rect x=\"131\" y=\"64\" fill=\"#FFFFFF\" width=\"20\" height=\"35\"\/&gt; &lt;path d=\"M148.6 62.8c4.9 4.6 8.4 9.4 10.6 14.2-3.4-.1-6.8-.1-10.1.1 4 3.7 6.8 7.6 8.2 11.6-2.1 0-4.2 0-6.3.2 2.6 4.1 3.8 8.3 3.7 12.5-1.2-.7-3.4-1.4-5.2-1.9\" fill=\"#fff\" stroke=\"#3a5e77\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/&gt; &lt;\/g&gt; &lt;\/g&gt; &lt;path class=\"chin\" d=\"M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1\" fill=\"none\" stroke=\"#3a5e77\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/&gt; &lt;path class=\"face\" fill=\"#DDF1FA\" d=\"M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46\"\/&gt; &lt;path class=\"hair\" fill=\"#FFFFFF\" stroke=\"#3A5E77\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474\"\/&gt; &lt;g class=\"eyebrow\"&gt; &lt;path fill=\"#FFFFFF\" d=\"M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z\"\/&gt; &lt;path fill=\"#FFFFFF\" stroke=\"#3A5E77\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599\"\/&gt; &lt;\/g&gt; &lt;g class=\"eyeL\"&gt; &lt;circle cx=\"85.5\" cy=\"78.5\" r=\"3.5\" fill=\"#3a5e77\"\/&gt; &lt;circle cx=\"84\" cy=\"76\" r=\"1\" fill=\"#fff\"\/&gt; &lt;\/g&gt; &lt;g class=\"eyeR\"&gt; &lt;circle cx=\"114.5\" cy=\"78.5\" r=\"3.5\" fill=\"#3a5e77\"\/&gt; &lt;circle cx=\"113\" cy=\"76\" r=\"1\" fill=\"#fff\"\/&gt; &lt;\/g&gt; &lt;g class=\"mouth\"&gt; &lt;path class=\"mouthBG\" fill=\"#617E92\" d=\"M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z\"\/&gt; &lt;path style=\"display: none;\" class=\"mouthSmallBG\" fill=\"#617E92\" d=\"M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z\"\/&gt; &lt;path style=\"display: none;\" class=\"mouthMediumBG\" d=\"M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z\"\/&gt; &lt;path style=\"display: none;\" class=\"mouthLargeBG\" d=\"M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z\" fill=\"#617e92\" stroke=\"#3a5e77\" stroke-linejoin=\"round\" stroke-width=\"2.5\"\/&gt; &lt;defs&gt; &lt;path id=\"mouthMaskPath\" d=\"M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z\"\/&gt; &lt;\/defs&gt; &lt;clipPath id=\"mouthMask\"&gt; &lt;use xlink:href=\"#mouthMaskPath\" overflow=\"visible\"\/&gt; &lt;\/clipPath&gt; &lt;g clip-path=\"url(#mouthMask)\"&gt; &lt;g class=\"tongue\"&gt; &lt;circle cx=\"100\" cy=\"107\" r=\"8\" fill=\"#cc4a6c\"\/&gt; &lt;ellipse class=\"tongueHighlight\" cx=\"100\" cy=\"100.5\" rx=\"3\" ry=\"1.5\" opacity=\".1\" fill=\"#fff\"\/&gt; &lt;\/g&gt; &lt;\/g&gt; &lt;path clip-path=\"url(#mouthMask)\" class=\"tooth\" style=\"fill:#FFFFFF;\" d=\"M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z\"\/&gt; &lt;path class=\"mouthOutline\" fill=\"none\" stroke=\"#3A5E77\" stroke-width=\"2.5\" stroke-linejoin=\"round\" d=\"M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z\"\/&gt; &lt;\/g&gt; &lt;path class=\"nose\" d=\"M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z\" fill=\"#3a5e77\"\/&gt; &lt;g class=\"arms\" clip-path=\"url(#armMask)\"&gt; &lt;g class=\"armL\"&gt; &lt;path fill=\"#ddf1fa\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2.5\" d=\"M121.3 97.4L111 58.7l38.8-10.4 20 36.1z\"\/&gt; &lt;path fill=\"#ddf1fa\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2.5\" d=\"M134.4 52.5l19.3-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1L146 59.7M160.8 76.5l19.4-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-18.3 4.9M158.3 66.8l23.1-6.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-23.1 6.2M150.9 58.4l26-7c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-21.3 5.7\"\/&gt; &lt;path fill=\"#a9ddf3\" d=\"M178.8 74.7l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM180.1 64l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM175.5 54.9l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM152.1 49.4l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8z\"\/&gt; &lt;path fill=\"#fff\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M123.5 96.8c-41.4 14.9-84.1 30.7-108.2 35.5L1.2 80c33.5-9.9 71.9-16.5 111.9-21.8\"\/&gt; &lt;path fill=\"#fff\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M108.5 59.4c7.7-5.3 14.3-8.4 22.8-13.2-2.4 5.3-4.7 10.3-6.7 15.1 4.3.3 8.4.7 12.3 1.3-4.2 5-8.1 9.6-11.5 13.9 3.1 1.1 6 2.4 8.7 3.8-1.4 2.9-2.7 5.8-3.9 8.5 2.5 3.5 4.6 7.2 6.3 11-4.9-.8-9-.7-16.2-2.7M94.5 102.8c-.6 4-3.8 8.9-9.4 14.7-2.6-1.8-5-3.7-7.2-5.7-2.5 4.1-6.6 8.8-12.2 14-1.9-2.2-3.4-4.5-4.5-6.9-4.4 3.3-9.5 6.9-15.4 10.8-.2-3.4.1-7.1 1.1-10.9M97.5 62.9c-1.7-2.4-5.9-4.1-12.4-5.2-.9 2.2-1.8 4.3-2.5 6.5-3.8-1.8-9.4-3.1-17-3.8.5 2.3 1.2 4.5 1.9 6.8-5-.6-11.2-.9-18.4-1 2 2.9.9 3.5 3.9 6.2\"\/&gt; &lt;\/g&gt; &lt;g class=\"armR\"&gt; &lt;path fill=\"#ddf1fa\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2.5\" d=\"M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z\"\/&gt; &lt;path fill=\"#ddf1fa\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2.5\" d=\"M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7\"\/&gt; &lt;path fill=\"#a9ddf3\" d=\"M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z\"\/&gt; &lt;path fill=\"#fff\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1\"\/&gt; &lt;path fill=\"#fff\" stroke=\"#3a5e77\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4\"\/&gt; &lt;\/g&gt; &lt;\/g&gt; &lt;\/svg&gt; &lt;\/div&gt; &lt;\/div&gt; \n\n&lt;div class=\"inputGroup inputGroup1\"&gt; &lt;label for=\"email1\"&gt;Email&lt;\/label&gt;\n &lt;input type=\"text\" id=\"email\" class=\"email\" maxlength=\"256\"\/&gt; &lt;p class=\"helper helper1\"&gt;email@domain.com&lt;\/p&gt; &lt;span class=\"indicator\"&gt;&lt;\/span&gt; &lt;\/div&gt; \n\n&lt;div class=\"inputGroup inputGroup2\"&gt; &lt;label for=\"password\"&gt;Password&lt;\/label&gt; \n&lt;input type=\"password\" id=\"password\" class=\"password\" \/&gt; &lt;\/div&gt; \n\n&lt;div class=\"inputGroup inputGroup3\"&gt; &lt;button id=\"login\"&gt;Log in&lt;\/button&gt; \n&lt;\/div&gt; \n&lt;\/form&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>CSS CODES::<\/p>\n<pre>\/* colors *\/\/* colors *\/\n\n$darkBlue: #217093;\n$medBlue: #4eb8dd;\n$lightBlue: #ddf1fa;\n$inputBG: #f3fafd;\n\nhtml {width: 100%; height: 100%;}\nbody { background-color: #eff3f4; position: relative; width: 100%; height: 100%; font-size: 16px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased;}form { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 100%; max-width: 400px; background-color: #FFF; margin: 0; padding: 2.25em; box-sizing: border-box; border: solid 1px #DDD; border-radius: .5em; font-family: 'Source Sans Pro', sans-serif; .svgContainer { position: relative; width: 200px; height: 200px; margin: 0 auto 1em; border-radius: 50%; background: none; border: solid 2.5px #3A5E77; overflow: hidden; pointer-events: none; div { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 100%; } .mySVG { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } } .inputGroup { margin: 0 0 2em; padding: 0; position: relative; &amp;:last-of-type { margin-bottom: 0; } } label { margin: 0 0 12px; display: block; font-size: 1.25em; color: #217093; font-weight: 700; font-family: inherit; } input[type='email'], input[type=\"text\"], input[type='password'] { display: block; margin: 0; padding: 0 1em 0; background-color: $inputBG; border: solid 2px $darkBlue; border-radius: 4px; -webkit-appearance: none; box-sizing: border-box; width: 100%; height: 65px; font-size: 1.55em; color: #353538; font-weight: 600; font-family: inherit; transition: box-shadow .2s linear, border-color .25s ease-out; &amp;:focus { outline: none; box-shadow: 0px 2px 10px rgba(0,0,0,.1); border: solid 2px #4eb8dd; } } input[type='email'], input[type=\"text\"] { padding: 14px 1em 0px; } button { display: block; margin: 0; padding: .65em 1em 1em; background-color: $medBlue; border: none; border-radius: 4px; box-sizing: border-box; box-shadow: none; width: 100%; height: 65px; font-size: 1.55em; color: #FFF; font-weight: 600; font-family: inherit; transition: background-color .2s ease-out; &amp;:hover, &amp;:active { background-color: $darkBlue; } }\n .inputGroup1 { .helper { position: absolute; z-index: 1; font-family: inherit; } .helper1 { top: 0; left: 0; transform: translate(1.4em, 2.6em) scale(1); transform-origin: 0 0; color: $darkBlue; font-size: 1.25em; font-weight: 400; opacity: .65; pointer-events: none; transition: transform .2s ease-out, opacity .2s linear; } &amp;.focusWithText .helper { \/*input[type='email']:focus + .helper {*\/ transform: translate(1.4em, 2.0em) scale(.65); opacity: 1; } }}<\/pre>\n<p>JAVASCRIPT CODES::<\/p>\n<pre>var email = document.querySelector('#email'), password = document.querySelector('#password'), mySVG = document.querySelector('.svgContainer'), armL = document.querySelector('.armL'), armR = document.querySelector('.armR'), eyeL = document.querySelector('.eyeL'), eyeR = document.querySelector('.eyeR'), nose = document.querySelector('.nose'), mouth = document.querySelector('.mouth'), mouthBG = document.querySelector('.mouthBG'), mouthSmallBG = document.querySelector('.mouthSmallBG'), mouthMediumBG = document.querySelector('.mouthMediumBG'), mouthLargeBG = document.querySelector('.mouthLargeBG'), mouthMaskPath = document.querySelector('#mouthMaskPath'), mouthOutline = document.querySelector('.mouthOutline'), tooth = document.querySelector('.tooth'), tongue = document.querySelector('.tongue'), chin = document.querySelector('.chin'), face = document.querySelector('.face'), eyebrow = document.querySelector('.eyebrow'), outerEarL = document.querySelector('.earL .outerEar'), outerEarR = document.querySelector('.earR .outerEar'), earHairL = document.querySelector('.earL .earHair'), earHairR = document.querySelector('.earR .earHair'), hair = document.querySelector('.hair');var email = document.querySelector('#email'), password = document.querySelector('#password'), mySVG = document.querySelector('.svgContainer'), armL = document.querySelector('.armL'), armR = document.querySelector('.armR'), eyeL = document.querySelector('.eyeL'), eyeR = document.querySelector('.eyeR'), nose = document.querySelector('.nose'), mouth = document.querySelector('.mouth'), mouthBG = document.querySelector('.mouthBG'), mouthSmallBG = document.querySelector('.mouthSmallBG'), mouthMediumBG = document.querySelector('.mouthMediumBG'), mouthLargeBG = document.querySelector('.mouthLargeBG'), mouthMaskPath = document.querySelector('#mouthMaskPath'), mouthOutline = document.querySelector('.mouthOutline'), tooth = document.querySelector('.tooth'), tongue = document.querySelector('.tongue'), chin = document.querySelector('.chin'), face = document.querySelector('.face'), eyebrow = document.querySelector('.eyebrow'), outerEarL = document.querySelector('.earL .outerEar'), outerEarR = document.querySelector('.earR .outerEar'), earHairL = document.querySelector('.earL .earHair'), earHairR = document.querySelector('.earR .earHair'), hair = document.querySelector('.hair');var caretPos, curEmailIndex, screenCenter, svgCoords, eyeMaxHorizD = 20, eyeMaxVertD = 10, noseMaxHorizD = 23, noseMaxVertD = 10, dFromC, eyeDistH, eyeLDistV, eyeRDistV, eyeDistR, mouthStatus = \"small\";\nfunction getCoord(e) { var carPos = email.selectionEnd, div = document.createElement('div'), span = document.createElement('span'), copyStyle = getComputedStyle(email), emailCoords = {}, caretCoords = {}, centerCoords = {} ; [].forEach.call(copyStyle, function(prop){ div.style[prop] = copyStyle[prop]; }); div.style.position = 'absolute'; document.body.appendChild(div); div.textContent = email.value.substr(0, carPos); span.textContent = email.value.substr(carPos) || '.'; div.appendChild(span); emailCoords = getPosition(email); \/\/console.log(\"emailCoords.x: \" + emailCoords.x + \", emailCoords.y: \" + emailCoords.y); caretCoords = getPosition(span); \/\/console.log(\"caretCoords.x \" + caretCoords.x + \", caretCoords.y: \" + caretCoords.y); centerCoords = getPosition(mySVG); \/\/console.log(\"centerCoords.x: \" + centerCoords.x); svgCoords = getPosition(mySVG); screenCenter = centerCoords.x + (mySVG.offsetWidth \/ 2); \/\/console.log(\"screenCenter: \" + screenCenter); caretPos = caretCoords.x + emailCoords.x; \/\/console.log(\"caretPos: \" + caretPos); dFromC = screenCenter - caretPos; \/\/console.log(\"dFromC: \" + dFromC); var pFromC = Math.round((caretPos \/ screenCenter) * 100) \/ 100; if(pFromC &lt; 1) { } else if(pFromC &gt; 1) { pFromC -= 2; pFromC = Math.abs(pFromC); }\n eyeDistH = -dFromC * .05; if(eyeDistH &gt; eyeMaxHorizD) { eyeDistH = eyeMaxHorizD; } else if(eyeDistH &lt; -eyeMaxHorizD) { eyeDistH = -eyeMaxHorizD; } var eyeLCoords = {x: svgCoords.x + 84, y: svgCoords.y + 76}; var eyeRCoords = {x: svgCoords.x + 113, y: svgCoords.y + 76}; var noseCoords = {x: svgCoords.x + 97, y: svgCoords.y + 81}; var mouthCoords = {x: svgCoords.x + 100, y: svgCoords.y + 100}; var eyeLAngle = getAngle(eyeLCoords.x, eyeLCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); var eyeLX = Math.cos(eyeLAngle) * eyeMaxHorizD; var eyeLY = Math.sin(eyeLAngle) * eyeMaxVertD; var eyeRAngle = getAngle(eyeRCoords.x, eyeRCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); var eyeRX = Math.cos(eyeRAngle) * eyeMaxHorizD; var eyeRY = Math.sin(eyeRAngle) * eyeMaxVertD; var noseAngle = getAngle(noseCoords.x, noseCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); var noseX = Math.cos(noseAngle) * noseMaxHorizD; var noseY = Math.sin(noseAngle) * noseMaxVertD; var mouthAngle = getAngle(mouthCoords.x, mouthCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25); var mouthX = Math.cos(mouthAngle) * noseMaxHorizD; var mouthY = Math.sin(mouthAngle) * noseMaxVertD; var mouthR = Math.cos(mouthAngle) * 6; var chinX = mouthX * .8; var chinY = mouthY * .5; var chinS = 1 - ((dFromC * .15) \/ 100); if(chinS &gt; 1) {chinS = 1 - (chinS - 1);} var faceX = mouthX * .3; var faceY = mouthY * .4; var faceSkew = Math.cos(mouthAngle) * 5; var eyebrowSkew = Math.cos(mouthAngle) * 25; var outerEarX = Math.cos(mouthAngle) * 4; var outerEarY = Math.cos(mouthAngle) * 5; var hairX = Math.cos(mouthAngle) * 6; var hairS = 1.2; TweenMax.to(eyeL, 1, {x: -eyeLX , y: -eyeLY, ease: Expo.easeOut}); TweenMax.to(eyeR, 1, {x: -eyeRX , y: -eyeRY, ease: Expo.easeOut}); TweenMax.to(nose, 1, {x: -noseX, y: -noseY, rotation: mouthR, transformOrigin: \"center center\", ease: Expo.easeOut}); TweenMax.to(mouth, 1, {x: -mouthX , y: -mouthY, rotation: mouthR, transformOrigin: \"center center\", ease: Expo.easeOut}); TweenMax.to(chin, 1, {x: -chinX, y: -chinY, scaleY: chinS, ease: Expo.easeOut}); TweenMax.to(face, 1, {x: -faceX, y: -faceY, skewX: -faceSkew, transformOrigin: \"center top\", ease: Expo.easeOut}); TweenMax.to(eyebrow, 1, {x: -faceX, y: -faceY, skewX: -eyebrowSkew, transformOrigin: \"center top\", ease: Expo.easeOut}); TweenMax.to(outerEarL, 1, {x: outerEarX, y: -outerEarY, ease: Expo.easeOut}); TweenMax.to(outerEarR, 1, {x: outerEarX, y: outerEarY, ease: Expo.easeOut}); TweenMax.to(earHairL, 1, {x: -outerEarX, y: -outerEarY, ease: Expo.easeOut}); TweenMax.to(earHairR, 1, {x: -outerEarX, y: outerEarY, ease: Expo.easeOut}); TweenMax.to(hair, 1, {x: hairX, scaleY: hairS, transformOrigin: \"center bottom\", ease: Expo.easeOut}); document.body.removeChild(div);};\nfunction onEmailInput(e) { getCoord(e); var value = e.target.value; curEmailIndex = value.length; \/\/ very crude email validation for now to trigger effects if(curEmailIndex &gt; 0) { if(mouthStatus == \"small\") { mouthStatus = \"medium\"; TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, {morphSVG: mouthMediumBG, shapeIndex: 8, ease: Expo.easeOut}); TweenMax.to(tooth, 1, {x: 0, y: 0, ease: Expo.easeOut}); TweenMax.to(tongue, 1, {x: 0, y: 1, ease: Expo.easeOut}); TweenMax.to([eyeL, eyeR], 1, {scaleX: .85, scaleY: .85, ease: Expo.easeOut}); } if(value.includes(\"@\")) { mouthStatus = \"large\"; TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, {morphSVG: mouthLargeBG, ease: Expo.easeOut}); TweenMax.to(tooth, 1, {x: 3, y: -2, ease: Expo.easeOut}); TweenMax.to(tongue, 1, {y: 2, ease: Expo.easeOut}); TweenMax.to([eyeL, eyeR], 1, {scaleX: .65, scaleY: .65, ease: Expo.easeOut, transformOrigin: \"center center\"}); } else { mouthStatus = \"medium\"; TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, {morphSVG: mouthMediumBG, ease: Expo.easeOut}); TweenMax.to(tooth, 1, {x: 0, y: 0, ease: Expo.easeOut}); TweenMax.to(tongue, 1, {x: 0, y: 1, ease: Expo.easeOut}); TweenMax.to([eyeL, eyeR], 1, {scaleX: .85, scaleY: .85, ease: Expo.easeOut}); } } else { mouthStatus = \"small\"; TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, {morphSVG: mouthSmallBG, shapeIndex: 9, ease: Expo.easeOut}); TweenMax.to(tooth, 1, {x: 0, y: 0, ease: Expo.easeOut}); TweenMax.to(tongue, 1, {y: 0, ease: Expo.easeOut}); TweenMax.to([eyeL, eyeR], 1, {scaleX: 1, scaleY: 1, ease: Expo.easeOut}); }}\nfunction onEmailFocus(e) { e.target.parentElement.classList.add(\"focusWithText\"); getCoord();}\nfunction onEmailBlur(e) { if(e.target.value == \"\") { e.target.parentElement.classList.remove(\"focusWithText\"); } resetFace();}\nfunction onPasswordFocus(e) { coverEyes();}\nfunction onPasswordBlur(e) { uncoverEyes();}\nfunction coverEyes() { TweenMax.to(armL, .45, {x: -93, y: 2, rotation: 0, ease: Quad.easeOut}); TweenMax.to(armR, .45, {x: -93, y: 2, rotation: 0, ease: Quad.easeOut, delay: .1});}\nfunction uncoverEyes() { TweenMax.to(armL, 1.35, {y: 220, ease: Quad.easeOut}); TweenMax.to(armL, 1.35, {rotation: 105, ease: Quad.easeOut, delay: .1}); TweenMax.to(armR, 1.35, {y: 220, ease: Quad.easeOut}); TweenMax.to(armR, 1.35, {rotation: -105, ease: Quad.easeOut, delay: .1});}\nfunction resetFace() { TweenMax.to([eyeL, eyeR], 1, {x: 0, y: 0, ease: Expo.easeOut}); TweenMax.to(nose, 1, {x: 0, y: 0, scaleX: 1, scaleY: 1, ease: Expo.easeOut}); TweenMax.to(mouth, 1, {x: 0, y: 0, rotation: 0, ease: Expo.easeOut}); TweenMax.to(chin, 1, {x: 0, y: 0, scaleY: 1, ease: Expo.easeOut}); TweenMax.to([face, eyebrow], 1, {x: 0, y: 0, skewX: 0, ease: Expo.easeOut}); TweenMax.to([outerEarL, outerEarR, earHairL, earHairR, hair], 1, {x: 0, y: 0, scaleY: 1, ease: Expo.easeOut});}\nfunction getAngle(x1, y1, x2, y2) { var angle = Math.atan2(y1 - y2, x1 - x2); return angle;}\nfunction getPosition(el) { var xPos = 0; var yPos = 0;\n while (el) { if (el.tagName == \"BODY\") { \/\/ deal with browser quirks with body\/window\/document and page scroll var xScroll = el.scrollLeft || document.documentElement.scrollLeft; var yScroll = el.scrollTop || document.documentElement.scrollTop;\n xPos += (el.offsetLeft - xScroll + el.clientLeft); yPos += (el.offsetTop - yScroll + el.clientTop); } else { \/\/ for all other non-BODY elements xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft); yPos += (el.offsetTop - el.scrollTop + el.clientTop); }\n el = el.offsetParent; } return { x: xPos, y: yPos };}\nemail.addEventListener('focus', onEmailFocus);email.addEventListener('blur', onEmailBlur);email.addEventListener('input', onEmailInput);password.addEventListener('focus', onPasswordFocus);password.addEventListener('blur', onPasswordBlur);TweenMax.set(armL, {x: -93, y: 220, rotation: 105, transformOrigin: \"top left\"});TweenMax.set(armR, {x: -93, y: 220, rotation: -105, transformOrigin: \"top right\"});<\/pre>\n<p>&nbsp;<\/p>\n<p>Source code:\u00a0<a href=\"https:\/\/codepen.io\/dsenneff\/pen\/QajVxO\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/dsenneff\/pen\/QajVxO<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Awesome login Animation.. HTML CODES: &lt;form&gt; &lt;div class=&#8221;svgContainer&#8221;&gt; &lt;div&gt; &lt;svg class=&#8221;mySVG&#8221; xmlns=&#8221;http:\/\/www.w3.org\/2000\/svg&#8221; xmlns:xlink=&#8221;http:\/\/www.w3.org\/1999\/xlink&#8221; viewBox=&#8221;0 0 200 200&#8243;&gt; &lt;defs&gt; &lt;circle id=&#8221;armMaskPath&#8221; cx=&#8221;100&#8243; cy=&#8221;100&#8243; r=&#8221;100&#8243;\/&gt; &lt;\/defs&gt; &lt;clipPath &hellip; <\/p>\n<div class='heateor_sss_sharing_container heateor_sss_vertical_sharing heateor_sss_bottom_sharing' style='width:44px;left: -10px;top: 120px;-webkit-box-shadow:none;box-shadow:none;' data-heateor-sss-href='https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/posts\/1029'><div class=\"heateor_sss_sharing_ul\"><a aria-label=\"Facebook\" class=\"heateor_sss_facebook\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.chandansharma.co.in%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1029\" title=\"Facebook\" rel=\"nofollow noopener\" target=\"_blank\" style=\"font-size:32px!important;box-shadow:none;display:inline-block;vertical-align:middle\"><span class=\"heateor_sss_svg\" style=\"background-color:#3c589a;width:40px;height:40px;margin:0;display:inline-block;opacity:1;float:left;font-size:32px;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle;background-repeat:repeat;overflow:hidden;padding:0;cursor:pointer;box-sizing:content-box\"><svg style=\"display:block;\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" height=\"100%\" viewBox=\"-5 -5 42 42\"><path d=\"M17.78 27.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99 2.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123 0-5.26 1.905-5.26 5.405v3.016h-3.53v4.09h3.53V27.5h4.223z\" fill=\"#fff\"><\/path><\/svg><\/span><\/a><a aria-label=\"Twitter\" class=\"heateor_sss_button_twitter\" href=\"http:\/\/twitter.com\/intent\/tweet?text=Logic%20Bytes%20-%20Spread%20Your%20Knowledge&url=https%3A%2F%2Fwww.chandansharma.co.in%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1029\" title=\"Twitter\" rel=\"nofollow noopener\" target=\"_blank\" style=\"font-size:32px!important;box-shadow:none;display:inline-block;vertical-align:middle\"><span class=\"heateor_sss_svg heateor_sss_s__default heateor_sss_s_twitter\" style=\"background-color:#55acee;width:40px;height:40px;margin:0;display:inline-block;opacity:1;float:left;font-size:32px;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle;background-repeat:repeat;overflow:hidden;padding:0;cursor:pointer;box-sizing:content-box\"><svg style=\"display:block;\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" height=\"100%\" viewBox=\"-4 -4 39 39\"><path d=\"M28 8.557a9.913 9.913 0 0 1-2.828.775 4.93 4.93 0 0 0 2.166-2.725 9.738 9.738 0 0 1-3.13 1.194 4.92 4.92 0 0 0-3.593-1.55 4.924 4.924 0 0 0-4.794 6.049c-4.09-.21-7.72-2.17-10.15-5.15a4.942 4.942 0 0 0-.665 2.477c0 1.71.87 3.214 2.19 4.1a4.968 4.968 0 0 1-2.23-.616v.06c0 2.39 1.7 4.38 3.952 4.83-.414.115-.85.174-1.297.174-.318 0-.626-.03-.928-.086a4.935 4.935 0 0 0 4.6 3.42 9.893 9.893 0 0 1-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.953 13.953 0 0 0 7.55 2.213c9.056 0 14.01-7.507 14.01-14.013 0-.213-.005-.426-.015-.637.96-.695 1.795-1.56 2.455-2.55z\" fill=\"#fff\"><\/path><\/svg><\/span><\/a><a aria-label=\"Linkedin\" class=\"heateor_sss_button_linkedin\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.chandansharma.co.in%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1029\" title=\"Linkedin\" rel=\"nofollow noopener\" target=\"_blank\" style=\"font-size:32px!important;box-shadow:none;display:inline-block;vertical-align:middle\"><span class=\"heateor_sss_svg heateor_sss_s__default heateor_sss_s_linkedin\" style=\"background-color:#0077b5;width:40px;height:40px;margin:0;display:inline-block;opacity:1;float:left;font-size:32px;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle;background-repeat:repeat;overflow:hidden;padding:0;cursor:pointer;box-sizing:content-box\"><svg style=\"display:block;\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 32 32\"><path d=\"M6.227 12.61h4.19v13.48h-4.19V12.61zm2.095-6.7a2.43 2.43 0 0 1 0 4.86c-1.344 0-2.428-1.09-2.428-2.43s1.084-2.43 2.428-2.43m4.72 6.7h4.02v1.84h.058c.56-1.058 1.927-2.176 3.965-2.176 4.238 0 5.02 2.792 5.02 6.42v7.395h-4.183v-6.56c0-1.564-.03-3.574-2.178-3.574-2.18 0-2.514 1.7-2.514 3.46v6.668h-4.187V12.61z\" fill=\"#fff\"><\/path><\/svg><\/span><\/a><a aria-label=\"Pinterest\" class=\"heateor_sss_button_pinterest\" href=\"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/posts\/1029\" onclick=\"event.preventDefault();javascript:void( (function() {var e=document.createElement('script' );e.setAttribute('type','text\/javascript' );e.setAttribute('charset','UTF-8' );e.setAttribute('src','\/\/assets.pinterest.com\/js\/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());\" title=\"Pinterest\" rel=\"nofollow noopener\" style=\"font-size:32px!important;box-shadow:none;display:inline-block;vertical-align:middle\"><span class=\"heateor_sss_svg heateor_sss_s__default heateor_sss_s_pinterest\" style=\"background-color:#cc2329;width:40px;height:40px;margin:0;display:inline-block;opacity:1;float:left;font-size:32px;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle;background-repeat:repeat;overflow:hidden;padding:0;cursor:pointer;box-sizing:content-box\"><svg style=\"display:block;\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" height=\"100%\" viewBox=\"-2 -2 35 35\"><path fill=\"#fff\" d=\"M16.539 4.5c-6.277 0-9.442 4.5-9.442 8.253 0 2.272.86 4.293 2.705 5.046.303.125.574.005.662-.33.061-.231.205-.816.27-1.06.088-.331.053-.447-.191-.736-.532-.627-.873-1.439-.873-2.591 0-3.338 2.498-6.327 6.505-6.327 3.548 0 5.497 2.168 5.497 5.062 0 3.81-1.686 7.025-4.188 7.025-1.382 0-2.416-1.142-2.085-2.545.397-1.674 1.166-3.48 1.166-4.689 0-1.081-.581-1.983-1.782-1.983-1.413 0-2.548 1.462-2.548 3.419 0 1.247.421 2.091.421 2.091l-1.699 7.199c-.505 2.137-.076 4.755-.039 5.019.021.158.223.196.314.077.13-.17 1.813-2.247 2.384-4.324.162-.587.929-3.631.929-3.631.46.876 1.801 1.646 3.227 1.646 4.247 0 7.128-3.871 7.128-9.053.003-3.918-3.317-7.568-8.361-7.568z\"\/><\/svg><\/span><\/a><a aria-label=\"Whatsapp\" class=\"heateor_sss_whatsapp\" href=\"https:\/\/api.whatsapp.com\/send?text=Logic%20Bytes%20-%20Spread%20Your%20Knowledge https%3A%2F%2Fwww.chandansharma.co.in%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1029\" title=\"Whatsapp\" rel=\"nofollow noopener\" target=\"_blank\" style=\"font-size:32px!important;box-shadow:none;display:inline-block;vertical-align:middle\"><span class=\"heateor_sss_svg\" style=\"background-color:#55eb4c;width:40px;height:40px;margin:0;display:inline-block;opacity:1;float:left;font-size:32px;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle;background-repeat:repeat;overflow:hidden;padding:0;cursor:pointer;box-sizing:content-box\"><svg style=\"display:block;\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" height=\"100%\" viewBox=\"-6 -5 40 40\"><path class=\"heateor_sss_svg_stroke heateor_sss_no_fill\" stroke=\"#fff\" stroke-width=\"2\" fill=\"none\" d=\"M 11.579798566743314 24.396926207859085 A 10 10 0 1 0 6.808479557110079 20.73576436351046\"><\/path><path d=\"M 7 19 l -1 6 l 6 -1\" class=\"heateor_sss_no_fill heateor_sss_svg_stroke\" stroke=\"#fff\" stroke-width=\"2\" fill=\"none\"><\/path><path d=\"M 10 10 q -1 8 8 11 c 5 -1 0 -6 -1 -3 q -4 -3 -5 -5 c 4 -2 -1 -5 -1 -4\" fill=\"#fff\"><\/path><\/svg><\/span><\/a><\/div><div class=\"heateorSssClear\"><\/div><\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[16,147],"tags":[848],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Awsome Login Animations - Logic Bytes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Awsome Login Animations - Logic Bytes\" \/>\n<meta property=\"og:description\" content=\"Awesome login Animation.. HTML CODES: &lt;form&gt; &lt;div class=&quot;svgContainer&quot;&gt; &lt;div&gt; &lt;svg class=&quot;mySVG&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; xmlns:xlink=&quot;http:\/\/www.w3.org\/1999\/xlink&quot; viewBox=&quot;0 0 200 200&quot;&gt; &lt;defs&gt; &lt;circle id=&quot;armMaskPath&quot; cx=&quot;100&quot; cy=&quot;100&quot; r=&quot;100&quot;\/&gt; &lt;\/defs&gt; &lt;clipPath &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Logic Bytes\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-25T12:03:24+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/stackofcodes.in\/wp-content\/uploads\/2018\/02\/FireShot-Capture-16-https___dms.licdn_.com_playback_C5105AQESXkpMopsFtg_46c92d5e8f814328980cd-217x300.png\" \/>\n<meta name=\"author\" content=\"Chandan Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chandan Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/\",\"url\":\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/\",\"name\":\"Awsome Login Animations - Logic Bytes\",\"isPartOf\":{\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/#website\"},\"datePublished\":\"2018-02-25T12:03:24+00:00\",\"dateModified\":\"2018-02-25T12:03:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/#\/schema\/person\/0c7e3da957c6e1375f6b4c899d491b49\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.chandansharma.co.in\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Awsome Login Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/#website\",\"url\":\"https:\/\/www.chandansharma.co.in\/blog\/\",\"name\":\"Logic Bytes\",\"description\":\"Spread Your Knowledge\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.chandansharma.co.in\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/#\/schema\/person\/0c7e3da957c6e1375f6b4c899d491b49\",\"name\":\"Chandan Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.chandansharma.co.in\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/42af2b8ad482f08d8902257fec963abc?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/42af2b8ad482f08d8902257fec963abc?s=96&d=identicon&r=g\",\"caption\":\"Chandan Sharma\"},\"url\":\"https:\/\/www.chandansharma.co.in\/blog\/author\/chandan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Awsome Login Animations - Logic Bytes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/","og_locale":"en_US","og_type":"article","og_title":"Awsome Login Animations - Logic Bytes","og_description":"Awesome login Animation.. HTML CODES: &lt;form&gt; &lt;div class=\"svgContainer\"&gt; &lt;div&gt; &lt;svg class=\"mySVG\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 200 200\"&gt; &lt;defs&gt; &lt;circle id=\"armMaskPath\" cx=\"100\" cy=\"100\" r=\"100\"\/&gt; &lt;\/defs&gt; &lt;clipPath &hellip;","og_url":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/","og_site_name":"Logic Bytes","article_published_time":"2018-02-25T12:03:24+00:00","og_image":[{"url":"http:\/\/stackofcodes.in\/wp-content\/uploads\/2018\/02\/FireShot-Capture-16-https___dms.licdn_.com_playback_C5105AQESXkpMopsFtg_46c92d5e8f814328980cd-217x300.png"}],"author":"Chandan Sharma","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chandan Sharma","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/","url":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/","name":"Awsome Login Animations - Logic Bytes","isPartOf":{"@id":"https:\/\/www.chandansharma.co.in\/blog\/#website"},"datePublished":"2018-02-25T12:03:24+00:00","dateModified":"2018-02-25T12:03:24+00:00","author":{"@id":"https:\/\/www.chandansharma.co.in\/blog\/#\/schema\/person\/0c7e3da957c6e1375f6b4c899d491b49"},"breadcrumb":{"@id":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.chandansharma.co.in\/blog\/awsome-login-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.chandansharma.co.in\/blog\/"},{"@type":"ListItem","position":2,"name":"Awsome Login Animations"}]},{"@type":"WebSite","@id":"https:\/\/www.chandansharma.co.in\/blog\/#website","url":"https:\/\/www.chandansharma.co.in\/blog\/","name":"Logic Bytes","description":"Spread Your Knowledge","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.chandansharma.co.in\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.chandansharma.co.in\/blog\/#\/schema\/person\/0c7e3da957c6e1375f6b4c899d491b49","name":"Chandan Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.chandansharma.co.in\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/42af2b8ad482f08d8902257fec963abc?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/42af2b8ad482f08d8902257fec963abc?s=96&d=identicon&r=g","caption":"Chandan Sharma"},"url":"https:\/\/www.chandansharma.co.in\/blog\/author\/chandan\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pajmea-gB","_links":{"self":[{"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/posts\/1029"}],"collection":[{"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/comments?post=1029"}],"version-history":[{"count":0,"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/media?parent=1029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/categories?post=1029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chandansharma.co.in\/blog\/wp-json\/wp\/v2\/tags?post=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}