Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Huddle Landing Page With Animated Wave SVGs

#sass/scss
P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (10)
error

Duplicate id attribute value `a` found on the web page.

<linearGradient x1="170.649%" y1="50%" x2="-44.317%" y2="170.246%" id="a"><stop stop-color="#FF52C1" offs...</linearGradient>
error

Duplicate id attribute value `a` found on the web page.

<linearGradient id="a" x1="352.43" y1="317.15" x2="352.43" y2="135.71" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gr...</linearGradient>
error

Duplicate id attribute value `b` found on the web page.

<linearGradient id="b" x1="569.83" y1="551.49" x2="569.83" y2="380.82" xlink:href="#a"></linearGradient>
error

Duplicate id attribute value `c` found on the web page.

<linearGradient id="c" x1="171.5" y1="319.2" x2="171.5" y2="319.02" xlink:href="#a"></linearGradient>
error

Duplicate id attribute value `d` found on the web page.

<linearGradient id="d" x1="228.01" y1="853.75" x2="228.01" y2="250.26" xlink:href="#a"></linearGradient>
error

Duplicate id attribute value `e` found on the web page.

<linearGradient id="e" x1="944.05" y1="849.94" x2="944.05" y2="268.42" xlink:href="#a"></linearGradient>
error

Duplicate id attribute value `a` found on the web page.

<linearGradient id="a" x1="652.58" y1="850.47" x2="652.58" y2="265.49" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gr...</linearGradient>
error

Duplicate id attribute value `b` found on the web page.

<linearGradient id="b" x1="1069.38" y1="751.23" x2="1069.38" y2="686.58" xlink:href="#a"></linearGradient>
error

Duplicate id attribute value `a` found on the web page.

<linearGradient id="a" x1="975.77" y1="484.92" x2="975.77" y2="87.89" gradientTransform="translate(-77.03)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gr...</linearGradient>
error

Duplicate id attribute value `b` found on the web page.

<linearGradient id="b" x1="649.11" y1="832.85" x2="649.11" y2="382.11" xlink:href="#a"></linearGradient>

ApplePieGiraffe’s questions for the community

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

@gianback

Posted

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

1


P
ApplePieGiraffeβ€’ 30,105

@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. πŸ˜€

0

Mark Mitchellβ€’ 1,800

@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:

  • 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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!