My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

See the Pen CSS Self-signing Signature by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

A re-make of my original CSS self-signing signature demo.

I did this re-make a year after making the original. The primary reason being that when I made the original, I didn't have an actual signature at hand, so I made it with the pen tool in Illustrator based on memory - which isn't quite the same.

For the re-make, I wrote the signature by hand and did a proper trace (still with pen tool though) in order to inevitably achieve a much better and more natural-looking result.

The reason for doing the trace was actually not in order to do a re-make of the animation but rather because I needed the piece for my cv website - however, after seeing the result I realized that I couldn't leave it at that, as I'd always been unhappy with the initial signature demo.

In the meantime I had done plenty of such animations using both Velocity and GSAP though, so I was a bit doubtful about doing the re-make in CSS. I stuck to the original plan though, albeit with updated code. However, on my cv it is done with Velocity - and I have a feeling that I'l do a simple GSAP demo as well in the near future, if for no other reason then at least because it, contrary to the pure CSS version, is properly cross-browser compatible.

Back to homepage