html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>bBalls</title>
</head>
<body>
<svg width="400" height="546" style="background-color:rgba(255,250,255,1);">
<ellipse id="1, жесткий, возврат на 50%" cx="45" cy="13" rx="42" ry="42" fill="rgba(255,255,255,1)" style="stroke:#00dd11; stroke-width:2; stroke-opacity:1;">
<!-- ну практически физическая модель -->
<animate 1 attributeName="cy" begin="1000ms" dur="1000ms" fill="freeze" values="13; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="2000ms" dur="707.11ms" fill="freeze" values="503; 258" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 2 attributeName="cy" begin="2707.11ms" dur="707.11ms" fill="freeze" values="258; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="3414.21ms" dur="500ms" fill="freeze" values="503; 380.5" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 3 attributeName="cy" begin="3914.21ms" dur="500ms" fill="freeze" values="380.5; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="4414.21ms" dur="353.55ms" fill="freeze" values="503; 441.75" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 4 attributeName="cy" begin="4767.77ms" dur="353.55ms" fill="freeze" values="441.75; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="5121.32ms" dur="250ms" fill="freeze" values="503; 472.375" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 5 attributeName="cy" begin="5371.32ms" dur="250ms" fill="freeze" values="472.375; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="5621.32ms" dur="176.78ms" fill="freeze" values="503; 487.6875" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 6 attributeName="cy" begin="5798.1ms" dur="176.78ms" fill="freeze" values="487.6875; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="5974.87ms" dur="125ms" fill="freeze" values="503; 495.34375" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 7 attributeName="cy" begin="6099.87ms" dur="125ms" fill="freeze" values="495.34375; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
<animate attributeName="cy" begin="6224.87ms" dur="88.39ms" fill="freeze" values="503; 499.1719" calcMode="spline" keySplines=".15, .25, .42, .94" repeatCount="1"/>
<animate 8 attributeName="cy" begin="6313.26ms" dur="88.39ms" fill="freeze" values="499.1719; 503" calcMode="spline" keySplines=".25, 0, .6, .2" repeatCount="1"/>
</ellipse>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
alert("which of the balls jumps most naturally?")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run