css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
user profile image

Comments

  1. How did you design these svg's? Did you just make them in adobe and output the the html for them?

  2. well, thats hell of a work! impressive :)

  3. @Anthony The SVG's were exported by Illustrator, as you can see in the comments. However, I had to specify the viewBox manually when creating the SVG; then, by removing the width and height, you can make it "responsive". This allows you to work in terms of percentages instead of pixels. Sadly, I didn't go the other way around, so if you zoom in or out the page, you will see it breaks. Probably fiddling with the preserveAspectRatio SVG property manually and some calculations it can be solved.

    @Szymon Thanks!

  4. Really awesome, great design! A tip: if you remove the -webkit prefixes and enable prefix free, you can get this working in Firefox as well.

  5. @noahblon Thanks! I had been trying to clear it up (it doesn't even have a description), but Codepen seems to refuse to update any details on the pen now :/

  6. Are the letters supposed to overlap? It's awesome btw. Love the little community of SVG animators we have here. ;)

  7. hi friend! can i buy this work from you?

  8. @creotip I'm afraid you can't! The graphics were made by an external author. After you purchase the graphics here https://creativemarket.com/Marish/4053-Travel-Infographics you can feel free to use the animation here. If you are kind enough to link the original or share where you going to use it, that would be swell as well :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...