Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Snake highlight
<div class="page">
<div class="container">
<div class="left">
<div class="login">Login</div>
<div class="eula">By logging in you agree to the ridiculously long terms that you didn't bother to read</div>
</div>
<div class="right">
<svg viewBox="0 0 320 300">
<defs>
<linearGradient
inkscape:collect="always"
id="linearGradient"
x1="13"
y1="193.49992"
x2="307"
y2="193.49992"
gradientUnits="userSpaceOnUse">
<stop
style="stop-color:#ff00ff;"
offset="0"
id="stop876" />
<stop
style="stop-color:#ff0000;"
offset="1"
id="stop878" />
</linearGradient>
</defs>
<path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
</svg>
<div class="form">
<label for="email">Email</label>
<input type="email" id="email">
<label for="password">Password</label>
<input type="password" id="password">
<input type="submit" id="submit" value="Submit">
</div>
</div>
</div>
</div>
var current = null;
document.querySelector('#email').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: 0,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
document.querySelector('#password').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: -336,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
document.querySelector('#submit').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: -730,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '530 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
@import url('https://rsms.me/inter/inter-ui.css');
::selection {
background: #2D2F36;
}
::-webkit-selection {
background: #2D2F36;
}
::-moz-selection {
background: #2D2F36;
}
body {
background: white;
font-family: 'Inter UI', sans-serif;
margin: 0;
padding: 20px;
}
.page {
background: #e2e2e5;
display: flex;
flex-direction: column;
height: calc(100% - 40px);
position: absolute;
place-content: center;
width: calc(100% - 40px);
}
@media (max-width: 767px) {
.page {
height: auto;
margin-bottom: 20px;
padding-bottom: 20px;
}
}
.container {
display: flex;
height: 320px;
margin: 0 auto;
width: 640px;
}
@media (max-width: 767px) {
.container {
flex-direction: column;
height: 630px;
width: 320px;
}
}
.left {
background: white;
height: calc(100% - 40px);
top: 20px;
position: relative;
width: 50%;
}
@media (max-width: 767px) {
.left {
height: 100%;
left: 20px;
width: calc(100% - 40px);
max-height: 270px;
}
}
.login {
font-size: 50px;
font-weight: 900;
margin: 50px 40px 40px;
}
.eula {
color: #999;
font-size: 14px;
line-height: 1.5;
margin: 40px;
}
.right {
background: #474A59;
box-shadow: 0px 0px 40px 16px rgba(0,0,0,0.22);
color: #F1F1F2;
position: relative;
width: 50%;
}
@media (max-width: 767px) {
.right {
flex-shrink: 0;
height: 100%;
width: 100%;
max-height: 350px;
}
}
svg {
position: absolute;
width: 320px;
}
path {
fill: none;
stroke: url(#linearGradient);;
stroke-width: 4;
stroke-dasharray: 240 1386;
}
.form {
margin: 40px;
position: absolute;
}
label {
color: #c2c2c5;
display: block;
font-size: 14px;
margin-top: 20px;
margin-bottom: 5px;
}
input {
background: transparent;
border: 0;
color: #f2f2f2;
font-size: 20px;
height: 30px;
line-height: 30px;
outline: none !important;
width: 100%;
}
input::-moz-focus-inner {
border: 0;
}
#submit {
color: #707075;
margin-top: 40px;
transition: color 300ms;
}
#submit:focus {
color: #f2f2f2;
}
#submit:active {
color: #d0d0d2;
}
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Feb 4, 2019

Js is not working??
for me...

@Yangchanhyo

This comment has been minimized.

Copy link

@Yangchanhyo Yangchanhyo commented Apr 20, 2019

Js file is not working...
Is there a solution?
CSS not seen correctly....

@mrrobot1374

This comment has been minimized.

Copy link

@mrrobot1374 mrrobot1374 commented Jun 23, 2019

add this in head

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
@ToluDare

This comment has been minimized.

Copy link

@ToluDare ToluDare commented Aug 21, 2020

@manish1lohia

This comment has been minimized.

Copy link

@manish1lohia manish1lohia commented Sep 23, 2020

getting error --- Uncaught TypeError: Cannot read property 'addEventListener' of null

added <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

@ToluDare

This comment has been minimized.

Copy link

@ToluDare ToluDare commented Oct 5, 2020

@manish1lohia did you put "<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> " in the html or js file?

@ToluDare

This comment has been minimized.

Copy link

@ToluDare ToluDare commented Oct 5, 2020

also for everyone else try putting the link to the JavaScript in the header and at the last line of code before your close the tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment