Simple Search

An SVG Animated Search Element

Software/Skill — CodePen, HTML, CSS3, JavaScript


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)

See the Pen Simple Search (with SVG Animation) by Phillip Mullen (@tectix) on CodePen.