Loading video...

Video Failed to Load

Go Home

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

171,109 views • 5 months ago •via X (Twitter)

32 Comments

SerKo's profile picture
SerKo5 months ago

@ubugeeei made something similar 👇

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ5 months ago

@ubugeeei it misses the point though because it just has blanket timing, that's the point here, it matches the input

Tim Holman's profile picture
Tim Holman5 months ago

pop a tiny bit of easing on the lines of the actual/initital path, and the path'll make this look 10x hawt... over the top-ish eg of mine here that'll make it very visible but you know, classic web draw'y technique!

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ5 months ago

ahh - are you referring to the input ease for input smoothing? the output is a mirror with a custom linear(), but i didn't have the input "ease" configurable 🙇

Tim Holman's profile picture
Tim Holman5 months ago

Yea!

Ben Katz's profile picture
Ben Katz5 months ago

make this a little micro product pls!!!

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ5 months ago

will do! 🤙 jus' need to put together a design for it (will try throw something together tomorrow)

Mo's fav goat's profile picture
Mo's fav goat5 months ago

Take a picture of your signature on a white piece of paper and then use quiver AI to create it as a SVG.

herbst's profile picture
herbst5 months ago

Should use perfect-freehand by @steveruizok for better lines :)

Fatik's profile picture
Fatik5 months ago

do you even sleep

Matias Baldanza's profile picture
Matias Baldanza5 months ago

Do you ever stop having great ideas?

Carlito's profile picture
Carlito4 months ago

Can we use this to just draw easing curves by hand to apply to other objects?

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ4 months ago

you could! i have thought about how this might work perhaps you just draw within bounds and then close it off like the "z" in an svg path 🤔

Ayon's profile picture
Ayon4 months ago

Woah

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ4 months ago

i need to finish this – it's on my todo list this week 🤞

Ayon's profile picture
Ayon4 months ago

I’ll keep an eye out I feel like this could be cool on a welcome page or something post-newsletter signup

Wanjohi's profile picture
Wanjohi5 months ago

This is good... too good

Nischal's profile picture
Nischal5 months ago

Hey I had build something similar months ago

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ5 months ago

yeah - the point here is the timing there have been loads of "draw a signature" but usually they just have uniform timing which feels "not so great"

Nischal's profile picture
Nischal5 months ago

Yes! Had put a little more effort into solving that….

Daniel Green's profile picture
Daniel Green5 months ago

This feels like a completely new way to commit fraud

MMIK's profile picture
MMIK5 months ago

We need this 🔥

Adetunji | Software Engineer (Web & Mobile)'s profile picture
Adetunji | Software Engineer (Web & Mobile)5 months ago

This will be a cool animation to have in your portfolio @jh3yy

漫画番犬˗ˏˋ's profile picture
漫画番犬˗ˏˋ5 months ago

my signature is the motion itself, not the map. show me the SVG.

Arthur's profile picture
Arthur5 months ago

Lemme get first good one

emmett naughton's profile picture
emmett naughton5 months ago

GIVE ME

Mike Bacon's profile picture
Mike Bacon5 months ago

Thanks for your signature, just used it to buy a new car 🙏

RoversX's profile picture
RoversX4 months ago

The problem now is how to write beautiful letters 😂

ElastoUI - Ecommerce UI Icons's profile picture
ElastoUI - Ecommerce UI Icons5 months ago

👍Cool!

Kunologist's profile picture
Kunologist5 months ago

Like your work! I tried to make this tool as well previously, but target pressure-sensitive inputs. It never actually gets right, since smoothing is too hard for animated strokes with pressure, flickers are everywhere. Would love your idea on this.

thandi beer's profile picture
thandi beer5 months ago

let me do the good library for signature , i have a use case for add in my one of software

Utkarsh Singh's profile picture
Utkarsh Singh5 months ago

sounds neat. turning signatures into SVG animations could really add flair to a project. I like it.

Related Videos