Would love to hear what you think of my WikiViewer app. I wanted to give an iFrame a try as I believed it enhanced the usability of the application. SVG animations were just an attempt to learn how to use SVG really. Didn’t think I could do fancy animations before I started, but I must say I am pleased with the way things have worked out. Any criticism will be appreciated too. Thank you.
WikiViewer --> https://codepen.io/BluecodeA/full/mrNMpQ/
Really cool! I especially like the animation when you press enter/search, really well done. And it is responsive as well!
The only thing I noticed: even for large screens the search input stays at the left. Maybe you could give that a margin on larger screens. But that is just a small subjective styling thing.
So well spotted. I did initially want that to be done, but somehow it slipped my mind. Thanks for bringing that up mate. Should work like that now 
Great work! I love it.
Thank you
Was this coded manually? Or did you use some kind of design tool to make the SVG? This looks amazing, really need some pointers to spice up my own portfolio.
Thanks,
James
Hi James, glad you like it. The SVG is purely done manually. I used the snap.svg library to do the animations. You really should give it a try. The syntax is easy to grasp. Other than that it’s mostly about working with basic shapes in a co-ordinate system, like plotting it on a graph sheet. I used w3schools to get started with SVG and if I needed to know more Mozilla Developer Network came in quite handy. Snap.svg has enough on their official site to help you get started. Good luck.