An SVG Animated Search Element
This project was to get to know the up and coming field of svg animations in web design. In the end, this simple little item implemented 3 separate ideas I had rattling around in my head. One being the animation itself, one being the color scheme (the dark gray/pink combination), and the animation that occurs when hitting enter or the search button.
I really like when things have double uses. In this case, the magnifying glass is both the idtentifier for a search bar (when a user is looking for it on a page) and the search input itself. So as the magnifying glass morphs into a search box, it removes the need for 2 distinct elements to exist on the screen (visually of course, HTML-wise it's just a normal search box). In the course of figuring out how to make the handle of the magnifying glass dissapear, I decided to keep it and make it the spawning point for an interesting button idea I also had. It looked much better above the search input than below, so I had the whole thing turn, which added a nice smoothness to the animation as a whole, I thought.
Have fun and use any parts of it you want—
(sorry for those on smartphones who can't se svg animation. The above gif is all you can get for now)