Skip to content
Submitted over 2 years ago

Order summary - Bg wave animation + Subtle purchase animation

Alex McGonagle•260
@thevolcanomanishere
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What did I find most difficult? Getting SVGs to work when deployed using Vite + Vercel is always a bit off. They work locally and then don't when you upload them. Figured it out by inlining the SVGs. This required updating the XML of the SVGs to be compliant with how React works. Sizing the SVGs can be confusing due to viewbox/styling but I figured it out in the end.

I decided to switch out the static background and added a similar animated SVG wave to the background 🌊

Community feedback

  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    Hey!

    You can import images in your code like anything else in Vite. The imported thing returns an url for your imported image. You put it like this <img src={importedImage} alt="" /> (example in React.js) and Vite knows that it needs to import it in the build process. I had the same problem too, but I some how figured it out. If it's in your CSS / Tailwind CSS config, you can just use absolute paths like url(/assets/images/image.jpg), vite will import it as well.

    Have a nice day and keep coding!

    Marked as helpful
    0
    Alex McGonagle•260
    @thevolcanomanisherePosted over 2 years ago

    @GrzywN jpegs and pngs are fine, svgs are a different story though if you want to be able to change some of the styling values or viewbox on them

    1

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