Skip to content
Submitted about 4 years ago

Responsive Huddle Landing Page With Animated Wave SVGs

ApplePieGiraffe•30,545
@ApplePieGiraffe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey, everybody!

This was a fun project in which I learned a little more about scaling and animating SVGs.

I spiced up the page a little by animating the wavy SVG backgrounds to slowly move back and forth across the page!

(Since this was the first time I tried out something like this, my code was slightly messier than I would have liked, but I hope to improve with time. 😉)

Also, I seem to have a bunch of issues with my HTML in my solution report because I used inline SVGs that apparently have lots of duplicate IDs. Is there a better way to use inline SVGs to avoid this problem?

Any feedback is welcome and much appreciated!

Happy coding! 🎉

Community feedback

  • Gian Franco•290
    @gianbackPosted about 3 years ago

    Hello, I really liked your work, one question, where did you get the svg of the waves?

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 3 years ago

    @gianback

    Hey, thanks, Gian!

    The SVGs should be included in the free downloadable starter files for this challenge. Simply look under the images folder. 😀

    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted about 4 years ago

    Hey APG!

    The animated curve is a nice touch, thematically! I'd slow it down to make it a bit more subtle (personal opinion). Check out the prefers-reduced-motion media query which lets you deactivate it based on a users OS preferences (a11y concern).

    The easiest way to get rid of your HTML issues is to just assign the inline SVGs unique IDs, or delete the IDs if they're not serving any function.

    Here's an article about reusing SVGs defs, in case that's helpful.

    I'd suggest that inlining SVGs only really makes sense when:

    • they're very small and don't clutter your markup
    • you want to style/animate them (eg the icon hover states)

    Big, illustrative SVGs can just be referenced in an img's src attribute like any other kind of image file.

    5
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @markup-mitchell

    Thank you very much!

    That information is definitely helpful.

    Happy coding! 😃

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord