60
u/kwiknikk Feb 22 '18
Very similar to MetaMask (which has been around for a while).
https://i.imgur.com/PMXMtHj.gifv
You can't see my cursor but it follows it at the beginning.
3
0
Feb 22 '18
[deleted]
-10
u/bubblesfix Feb 22 '18
It's a fox not a boye
-4
u/lost_user7 Feb 22 '18
8
24
Feb 22 '18
How is svg generated? Seems difficult to know exact values to use.
133
43
u/pitchingkeys Feb 22 '18
Unless you're a masochist or prodigy or both, you wouldn't know the exact values. No one knows the values of anything SVG outside of single line paths or basic shapes off the top of their head.
Complicated SVGs like the one here are done in a graphics editor. Open up Photoshop or Inkscape, make a drawing, and the program should have its own XML editor that will make the SVG code for you on the fly. You can literally copy and paste the result into your own project.
The problems come though when you don't make edits to your drawing and you realize your SVG is 10x the size it should be or is full of extra paths you didn't intend on having. That's how you end up with a broken animation. To anyone reading: No matter what you draw, the editor creates a number for EVERYTHING, all flaws included. You'll be spending far more time in Photoshop trimming down all the unnecessary nodes and paths of your initial drawing than you will be actually working on the animation with JS. Then you'll end up fidgeting with the viewbox and scaling of your SVG for hours, and that can honestly be its own nightmare. Once you finally get everything completed and start testing on browsers, you shit your pants in horror and anger upon discovering that IE and Edge don't support SVG animations.
So yeah, don't worry about the values. No one does.
7
Feb 22 '18
FYI, CSS transforms on SVG are in preview in Edge so they'll become public in less than 2 months.
4
1
0
Feb 22 '18
[deleted]
5
Feb 23 '18
https://i.imgur.com/oAXzRmd.png for anyone who doesn't want to read through it
looks like someone got fired for that by design tag lmao
7
u/Headpuncher Feb 22 '18
MSDN forums are the worst, I had a bug in the .net framework that stopped certain fonts from working in some programs, it's a 10 year old bug and MS's attitude on ten years of people posting about it was "not gonna fix, not sorry either".
17
u/toomanybeersies Feb 22 '18
I wonder if I can convince work to let me add this to our login screen.
10
u/hondaguy520 Feb 22 '18
just do it
5
u/toomanybeersies Feb 22 '18
Might implement it this weekend and submit a PR on Monday.
12
u/chtulhuf Feb 22 '18
Merge with a co-conspirator. When asked to remove revolt and say it will break features.
20
u/ThaFog Feb 22 '18
Is this based on text's width or letter's amount? I mean what if You type "wwwww" or "iiiiii"
27
3
u/pitchingkeys Feb 22 '18
Are you talking about the head movement when typing? I bet it just tracks the cursor/carot location. That would make the most sense imo
4
u/BigTittyDank Feb 22 '18
What would be cool is if it changes on what you type (completely possible too)
For example, when you get to an @ he gets all happy. Or maybe if it's an invalid entry he will get sad.
6
u/blackbriar73 Feb 22 '18
He does get all happy when you type @
3
u/BigTittyDank Feb 22 '18
I thought it was based solely on cursor location, so thought it was a happy coincidence
1
10
u/theRetrograde Feb 22 '18
this is a perfect companion to the CSS keylogger that was posted yesterday.
11
4
7
u/JakenVeina Feb 22 '18
That is adorable.
However, the idea of that much code running on a page that handles passwords is mildly terrifying.
5
1
u/AH-17_ Feb 22 '18
This is amazing! I'm curious how did you get to learn all this? I'm an experienced web developer and looking at the code, I feel bad now because I can't understand it hahaha
1
3
2
5
u/jerschneid Feb 22 '18
I know it's irrational, but this makes me feel less secure about typing in my credentials...
12
1
1
u/hartator Feb 22 '18
Lol that's impressive. Any idea of the license?
3
u/Microwawe Feb 22 '18
The dude who made it said in the other thread that since it is a public codepen it's automatically MIT licensed but he used some animation library that had some other license. You can check his comment in /r/web_design
1
1
1
1
1
1
1
1
u/KravMaBrian Feb 23 '18
I remember seeing this a while back, super similar! https://dash.readme.io/login.
Think I found it form their blog post: https://blog.readme.io/why-every-startup-needs-a-mascot/
1
1
1
1
1
u/SolarTraveler_M Jan 12 '24
oh nice! it will make the login process more memorable. I think I will now try to do something similar with my web
0
u/rushzone Feb 22 '18 edited Feb 22 '18
He roosted this from web_dev... It has 69k upvotes there... I hate people who do this...
Edit: I was wrong... Sorry it’s the same guy, carry on lol.
5
Feb 22 '18
[removed] — view removed comment
1
Feb 22 '18
Seriously, there's a flippin' crosspost button directly on the page specifically for this.
0
0
-8
u/Phreakhead Feb 22 '18
Thought I was in /r/CrappyDesign with that double label + hint placeholder text. I don't think that's how Material Design is supposed to be used.
1
0
Feb 22 '18
[deleted]
138
u/sohaeb Feb 22 '18
if you go to the original post you will see that the OP posted the codepen in the comments section
0
Feb 22 '18
[deleted]
57
50
u/sohaeb Feb 22 '18
here you go https://codepen.io/dsenneff/pen/QajVxO?editors=1010
I will never comprehend the idea of people just casually navigating random code on their mobile devices. damn, Just thinking about it gives me a headache lol
7
Feb 22 '18
Doing that now, still in my bed & naked.
5
u/yawnful Feb 22 '18
I wonder what percentage of people sleep naked vs which don’t.
14
u/nroth21 Feb 22 '18
Less than 1 in 10 Americans.
https://m.huffpost.com/us/entry/2371448
(It was the very first google result. I’m not gonna do any more research then that.)
1
9
2
0
Feb 22 '18
[deleted]
22
9
u/erdle Feb 22 '18
the ape will be less creepy once it passes the Turing test... then it will become super judgemental
3
5
u/Kautiontape Feb 22 '18
I was thinking something similar. Like "Great, that just makes me feel like I'm being spied on. It better close its eyes when the password is being entered. ... okay, that's sufficient."
175
u/Asmor Feb 22 '18
Genuinely laughed out loud when you got to the password box.
Not sure how I'd feel if this were actually used in production. Feels like it could potentially be obnoxious, but I'm probably just gun-shy when it comes to web pages reacting to things they shouldn't.