anup-a/svgwave

[React] Add button to invert waves upside down

anup-a opened this issue · 15 comments

anup-a commented
  • Add Button to invert svg waves upside down.
  • Wave should remain down initially, but should swap to top of container and invert on button press.
  • something similar which to getwaves.io
nbrown0000 commented

I would like to work on this, if that's okay with you.

anup-a commented

@nbrown0000 sure go ahead

ansh-saini commented

Can I take this up if there's no activity here?

anup-a commented

@ansh-saini I think we should wait till he responds.

@nbrown0000 are you working on this ?
PS- there's no hurry take your time?

nbrown0000 commented

@anup-a Yes I am working on it. I'm still fairly new to open source so bear with me. I think I'm getting close. PS - 8 month old daughter dictates when I can code haha.

  • 😄2
anup-a commented

@nbrown0000 Haha ... take your time No worries

nbrown0000 commented

Need some help. As far as I can tell the most straightforward ways to invert the waves would be to

  1. map the SVG paths to add in transform attributes, but tells me svg.props.children[0].props.map is not a function.
  2. set the transform attribute directly onto the SVG object, but tells me svg.setAttribute is not a function.
    Not sure what to do, keep thinking this should be simple enough. Any suggestions would be welcome.
anup-a commented

Haven't thought much but... we should be able to conditionally add transform attribute to path like...

<path transform={rotate ? : ( something ) : null }

anup-a commented

https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-center-in-svg

This should work transform="rotate(-180 ${w} ${h})" ... w=720 (1440/2) h=(viewbox height/2) dynamic add this for every path

Ex- in case of 2 waves height should be 500 so, this should work transform="rotate(-180 720 250)"

almera-vs commented

Well, it's February 2021 and this feature is not added yet

anup-a commented

@Rademenes16 I guess he (@nbrown0000) isn't working on it anymore.

Maybe in a week or so, I'll look it myself.

almera-vs commented

OK I found the solution which is very simple

Add this line of code to CSS file:

      svg {
        transform: rotate(180deg);
        }

It will rotate the SVG by 180 degrees
If you want to rotate the colors too, then add: linearGradient next to svg

@anup-a I know it's not in React but KISS rule fits here perfectly.

  • 👍1
anup-a commented

Ha yes . That would do. I will definitely use this one if transform attribute didn't work.

Initially, I thought it would be much better to add to svg element itself rather than css.

nbrown0000 commented

Apologies @anup-a, for some reason I have not been getting notifications on comments here. I did ask a question on my pull request but never heard a response so wasn't sure if anyone was still active on this at all.

I'm still happy to work on this project, with some guidance. Let me know if that works for you or not.

  • 🎉1
  • 🚀1
anup-a commented

@nbrown0000 no worries 😉. GO FOR IT !!

  • 👍1