Waving line in css

Question

I need to do a wavy line animation in css.

I would like it to look something like this:

My code:

<div class="wrapper">
    <div class="line"></div>
</div>

.wrapper {
  width: 100%;
  height: 500px;
  background: #fff;
  float: left;
  position: relative;
}

.line {
  width: 100%;
  height: 2px;
  background: url('http://tiny .pl/gjhxv') left top repeat-x;
  position: absolute;
  top: 50%;
  left: 0;
}

https://jsfiddle.net/agxx3ysk/

I'm looking for tips on how to get started. How can I change the line shape? — Lidia K., Jul 25 '17 at 07:52
Asking for tutorial or book recommendations is off-topic on stackoverflow. Try google — Salketer, Jul 25 '17 at 07:53
https://greensock.com/forums/topic/11376-creating-animated-wavy-lines/ — Nimish, Jul 25 '17 at 08:03

the_mishra · Answer 1 · 2017-07-25T09:34:50.387

2

Check this answer already on StackOverflow Link to the wave

one more link

Just change fill:none and stroke:red properties. and you could further play around with this.

edited Jul 25 '17 at 09:34

answered Jul 25 '17 at 09:06

the_mishra

813
9
24

Waving line in css

1 Answers1