Bookmark interaction [SVG animation]

Published on Dribbble RSS by Hittter / Views | Volorf Bookmark interaction [SVG animation]

Hi there!

Here is a part of my bookmark exploration. I explored non-classical approaches to mark binary states of bookmarking. I tried to figure out some things. Is it enough just to change a shape of a bookmark icon to show its different state? Is it recognizable? (Spoiler: from my point of view, it’s not enough, so I added a color animation to make some contrast in this version, but you can check out others as well).

What do you think guys?

Links for live interactive prototypes:

Dark firsthttps://codepen.io/Volorf/pen/MQxwmq

LIght firsthttps://codepen.io/Volorf/pen/xYMZWQ

Just shape animationhttps://codepen.io/Volorf/pen/BYbNmd

Tools: HTML, CSS (Stylus), JavaScript (CoffeScript), Codepen