< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title > test < / title >
< style >

body {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

-sharpc {
    margin: 0 auto;
    margin-top:10px;
    margin-bottom: 10px;
    margin-top: 20px;   
    position: absolute;
    left: -32px;
    top:-51px;

}
.ball{
    width:120px;
    height:120px;
    background:rgba(124,68,209,1);
    box-shadow:0px 1px 8px 0px rgba(0,0,0,0.2),0px 0px 13px 0px rgba(255,255,255,0.3);
    border-radius: 50%;
    position: relative;
}

< / style >
< / head >
< body >

<div class="ball">
        <canvas id="c">canvas </canvas>
</div>

< / body >

< script >
canvas = document.getElementById ("c");
ctx = canvas.getContext ("2d");

M = Math;
Sin = M.sin;
Cos = M.Cos;
Sqrt = M.sqrt;
Pow = M.Q.;
PI = M.PI;
Round = M.C.;

oW = canvas.width = 184;
oH = canvas.height = 184;

/ / Lineweight
lineWidth = 2

/ / large radius
r = (oW / 2);
console.log ("r", r)

cR = r-8 linewidth;
console.log ("cr", cR)

ctx.beginPath ();

ctx.lineWidth = lineWidth;

/ / initial parameters of water wave animation
axisLength = 2 r-16 lineWidth; / / Sin figure length
unit = axisLength / 9; / / Wave width
range = .4 / / Wave amplitude
nowrange = range;
xoffset = 8 * lineWidth; / / x axis offset
data = 55 / 100; / / data
sp = 0; / / Periodic offset
nowdata = 0;
waveupsp = 0.009; / Water Wave rising Speed

/ / the initial parameters of circle animation
arcStack = []; / / circle stack
bR = rMui 8lines width;
soffset =-(PI/2); / / start position of circle animation
circleLock = true; / start animation lock

cStartPoint = arcStack.shift (); / / starting point of the circle

ctx.strokeStyle = "- sharp1c86d1";

render (); / / start rendering

function drawSine () {
ctx.beginPath ();
ctx.save ();
var Stack = []; / / record the starting and ending coordinates
for (var I = xoffset; I < = xoffset + axisLength; i+=20/axisLength) {

var x = sp + (xoffset + i) / unit;
var y = Sin(x) * nowrange;

var dx = i;

var dy = 2*cR*(1-nowdata) + (r - cR) - (unit * y);

ctx.lineTo(dx, dy);
Stack.push([dx,dy])

}

/ / get the starting and ending points
var startP = Stack [0]
var endP = Stack [Stack.length-1]

ctx.lineTo (xoffset + axisLength,oW);
ctx.lineTo (xoffset,oW);
ctx.lineTo (startP [0], startP [1])
var grd = ctx.createLinearGradient (0,0,200,0);
grd.addColorStop (0, "- sharpFAD961");
grd.addColorStop (1, "- sharpF76B1C");
ctx.fillStyle = grd
ctx.fill ()
ctx.restore ();
}

function render () {
ctx.clearRect;

if (circleLock) {

if (arcStack.length) {
  var temp = arcStack.shift();
  ctx.lineTo(temp[0],temp[1])
  ctx.stroke();
} else {
  circleLock = false;
  ctx.stroke();
  arcStack = null;

  ctx.globalCompositeOperation = "destination-over";
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.arc(r,r, bR, 0, 2*PI, 1);

  ctx.beginPath();  
  ctx.save();
  ctx.arc(r,r, r-16*lineWidth, 0, 2*PI, 1);
  ctx.restore()
  ctx.clip();

}

} else {

// 
// 
if (data >= 0.85) {
  if (nowrange > range/4) {
    var t = range * 0.01;
    nowrange -= t;   
  }
} else if (data <= 0.1) {
  if (nowrange < range*1.5) {
    var t = range * 0.01;
    nowrange += t;   
  }
} else {
  if (nowrange <= range) {
    var t = range * 0.01;
    nowrange += t;   
  }      

  if (nowrange >= range) {
    var t = range * 0.01;
    nowrange -= t;
  }
}

if((data - nowdata) > 0) {
  nowdata += waveupsp;      
}

if((data - nowdata) < 0){
  nowdata -= waveupsp
}

sp += 0.07;
drawSine();

}
requestAnimationFrame (render)
}
< / script >