Hello,
I am trying to create an animation like the red one here: https://1ucasvb.tumblr.com/post/42881722643/the-familiar-trigonometric-functions-can-be
I have tried to search for tutorials but without luck.
Is it possible to create something like that?
What you are seeing is a video in .gifv format.
Yes but I would like to create the same functionality (different colors), with CSS animations.
Is this possible?
You could draw the wave in svg and then animate it. The circle and rotating line could be done in basic css using transform rotate.
It depends on what you want exactly. Did you mean to copy the demo above completely?
Here’s an old demo of mine for a heart beat effect drawn with svg and animated with css.
I would consider JavaScript animation.
Not exactly, just the sine wave, this part:
But I want to move continuously. Is this possible with the SVG solution that you are saying?
Do you mean something like this?
Paul provided you a working example, but here is a new article over at css-tricks which explains css animations really well if you’re interested.
Yes!
Is it possible to create 2 sines together instead of one?
How are able to determine the path in order to make it?
If you just copy the previous row of co-ordinates and add increased amounts you should be able t get what you want.
e.g.
Basically the svg is twice as wide as you want and then you just animate it to half way to get the illusion of continuous movement. You can create your own svg in your favourite paint package and just make it twice as long as you need (i.e. 4 peaks instead of 2).
I removed the keyframes to make it simpler but added a linear gradient into the svg just for effect. (I don’y know a lot about svg either but it seems pretty straight forward to me.)
I am trying to make it the same way as yours but I am making something wrong obviously 
I added the co-ordinates for the sine wave that I created, but the movement is not continuous.
Also I am trying to make it with 100% width so it can be responsive. I am not sure if this has something to to do with it.
Here is my try:
should I make something different to get the fluent movement?
You’ve overcooked that a bit
Not sure why you made it over 3000 units wide?
You need the view box to be half the number of units because you slide it half way.
It should be something like this:
viewBox=“0 0 1583 500”>
To clarify the method being used you need to create the svg as 2 images side by side. If you want 2 peaks of the sign wave to show then the svg should have 4 peaks and the start and end must match exactly (both halves are exactly the same).
Next you set the svg viewbox to show only half the svg (2 peaks). Then you animate the svg to half way which drags the second half into view. Then it repeats its animation from the start giving a seamless join and what looks like an endless sine wave.
haha probably yes
you mean the points in the SVG?
a friend of mine draw an SVG cosine in a Figma file and I just downloaded, did not changed something. Not sure why this is happening.
I have puted the view box at this point, but the animation has a small flinch now, it’s not smoother.
Should I change the SVG?
Also I am trying to put a circle at the end of the animation that it will follow the end point of the line, like drawing out.
Like this image:
So I want this circle to always be at the end of the animation.
I am trying to make it the same way that you have animated the sine wave but it’s not what I am looking for as you can see 
is there a better way to make it?
here is the wave with the new viewbox points
That really complicates the simple technique as you have to attach the circle to the end of the svg but because we are pushing the end of the svg out of view then you can’t affix the circle to the end as it does out of sight.
I was thinking that perhaps he red circle could be animated backward along the path but I have been unable to achieve that properly.
The above codepen has the basic idea but there are some things going on that I can’t seem to resolve at the moment.
(Svg is not my strongpoint)
If you use your method of animating the circle up and down separately then you have the problem of creating a timing function that will match the speed of the sine wave which will be some complicated cubic bezier function. You might be able to get close but you have to slow the circle down at the peaks and accelerate it along the straights.
I will have to have a re-think and see if there is some other way.
In my post #5, I suggested considering JavaScript animation. That was before the goal posts moved: when we thought the aim was to achieve animation similar to that linked to in the opening post. In particular I thought JavaScript animation may be the only satisfactory way of drawing an animated horizontal line from the rotating vector to the start of the sinewave curve. Now the goal posts have moved again with the new requirement of an animated circle at the end of the sinewave curve. So I think JavaScript animation should again be considered. There would be no SVG: the curve would be drawn by a mathematical expression. The mathematics would give you the position of the end of the curve which could then be used as the centre of the required circle. By using JavaScript it would be possible to make the size of the animation responsive with more cycles shown on larger browser window widths. Also it would make it simple to introduce harmonic components.
A Google search leads to examples of JavaScript animated sinewave curves.
I think @Archibald is correct and you may need JS to do this properly so the following is just because I like playing around.
Eventually I managed to get something working using the coordinates you supplied and came up with this.
It can be scaled by scaling the wrapper or just open and close the window to see the effect.
The major caveat is that I had to rub out the far right side of the line with a background color otherwise you could see the end of the cyan sine wave. This means that if you placed it over a coloured background you’d have to change the color of the rect element to match your background. I couldn’t see any way to do it as the sine wave you created effectively means that the end of the wave is doing an elongated figure of eight effect and not just straight up and down at the edge.
It was fun anyway
Note that it seems to be very glitchy in codepen so will need forking and looking at in debug view or as a standalone page.
I was wondering whether you could animate the circle up and down a straight line using the ease-in-out timing function. If the circle does not cling to the end of the sinewave curve sufficiently, you could try resorting to a cubic BĂ©zier easing function.
Yes I think that’s possible but it could be quite hard to match the timings up (especially on the OPs wavy line as that seems to wobble a bit giving a figure of eight effect at the end).
I also found that mixing css animation with the svg animation was a bit hit and miss as the timings didn’t match. The css would start straight away and the svg started animating a fraction later. I think both horizontal and vertical animations need to be either svg or css only and not mixed.
Here is my attempt:
( it’s not perfectly responsive 
)
The circle is not moving, is there something wrong with it?
