Looking to hire developers?
Submitted
@ApplePieGiraffe
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! 🎉
@gianback
Posted
Hello, I really liked your work, one question, where did you get the svg of the waves?
@ApplePieGiraffe
Posted
@gianback
Hey, thanks, Gian!
The SVGs should be included in the free downloadable starter files for this challenge. Simply look under the images folder. 😀
@markup-mitchell
Posted
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:
Big, illustrative SVGs can just be referenced in an img's src attribute like any other kind of image file.
@ApplePieGiraffe
Posted
@markup-mitchell
Thank you very much!
That information is definitely helpful.
Happy coding! 😃
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
