用 CSS 动画记录宝宝0-280天的变化
用 CSS 动画记录宝宝0-280天的变化
用动画记录宝宝从0-280天在肚子里的变化~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 100 100" id="babyProgression">
<path
d="M 36 62.8 C 14 94 45 98 59 98 C 79 98 83 77 83 64 C 80 26 63 4 43 4 C 18 4 14 29 28 47 C 34 55 36.6 59.2 36 60.9 Z"
/>
<g
fill="#A020F0"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0.5"
>
<path class="umbilical" d="">
<animate
attributeName="d"
values="M 53.7 50.3 Q 52.2 50.3 50.2 49.7 C 47.6 49 42.9 55.3 36.5 60.9 V 62.8 C 49.1 50.3 50.8 51.5 52 53.1 Q 53.1 55.5 54.7 54.4 C 56.9 52.6 57 49.1 53.7 50.3; M 56 51 Q 53.7 50.8 50.7 53.2 C 48.8 53.3 46.8 53.4 36.5 60.9 V 62.8 C 47.2 55.6 48.5 54.9 52 56 Q 54 57 55.6 55.5 C 58 53 59 51 56 51; M 56 48 Q 53.4 53 54.1 55.7 C 51.4 57 50 53 36.5 60.9 V 62.8 C 50 55 50 58 55 57 Q 55 59 57.6 58.7 C 62 58 59 42 56 48; M 58 47 Q 53.4 53 55.5 57.7 C 51.4 57 51.8 55.7 36.5 60.9 V 62.8 C 50.2 56.3 52.3 60 56.2 59.3 Q 58 62 60.9 60.4 C 65 58 61 43 58 47; M 59 46 Q 54 53 54 59 C 48 56 42 59 36.5 60.9 V 62.8 C 42 61 49 58 54 61 Q 55 66 58 64 C 67 58 63 43 59 46; M 58 46 Q 55 52 58 60 C 55 58 45 63 36.5 60.9 V 62.8 C 46 65 51 60 58 62 Q 64 66 65 64 C 69 56 62 38 58 46; M 60 46 Q 56 49 55 61 C 46.3 58 41.3 59.5 36.5 60.9 V 62.8 C 49.4 60.7 55.5 63.8 56.6 69 Q 60 75 66 69 C 74 61 67 41 60 46; M 60 43 Q 55 47 53 58 C 42.5 64.4 41.2 60.7 36.5 60.9 V 62.8 C 47.2 63.5 50.9 64.2 54 65 Q 59 80 69 70 C 77 61 68 37 60 43; M 56 48 Q 47 57 46.5 63.3 C 44 63.8 43.6 62.7 36.5 60.9 V 62.8 C 42.2 63.5 43.8 66 46.5 66.3 Q 65 89 71 74 C 78 57 71 33 56 48; M 53 48 Q 45 57 44.6 69.2 C 40.4 67.9 46.8 63.9 36.5 60.9 V 62.8 C 44 64.5 37.6 69.7 44.4 71.7 Q 63 99 71.1 79.6 C 84 46 62 37 53 48"
dur="100s"
begin="0"
repeatCount="none"
fill="freeze"
/>
</path>
<path class="bodyHead" d="">
<animate
attributeName="d"
values="M 55.1 53.6 Q 55.2 52 53.4 52.8 Q 52.4 54.3 52.2 54.1 Q 52.1 53.7 52.2 52.6 A 1 1 0 0 0 51.9 52.3 L 51.5 52.1 L 51.4 52 A 1 1 0 0 0 51.1 51.7 L 51 51.5 L 50.8 51.3 A 1 1 0 0 0 50.7 51.6 L 50.7 51.8 L 50.6 52 A 1 1 0 0 0 50.7 52.3 Q 50.5 52.3 50.7 52.4 Q 50.5 52.4 50.6 53.6 Q 50.7 54.7 51.6 55.4 Q 53 56.4 54.5 56.2 Q 55.7 55.8 56.3 54.9 Q 57.3 53.7 58.3 49.4 Q 59.4 46.9 56.4 45.8 Q 55.9 45.7 55.3 45.8 C 52.6 43.5 51.7 45.3 50.7 48.1 Q 50.8 48.7 51.4 49.4 Q 51.8 49.9 52.1 49.9 Q 52.3 50.1 52.5 49.9 A 1 1 0 0 0 52.9 49.8 A 1 1 0 0 0 53.5 49.9 Q 53.9 50.1 54 50.1 Q 54 50.7 55 49.2; M 55.1 53.6 Q 52.8 53.3 52 55.4 Q 51.7 56 51.6 55.7 Q 51.2 55.7 51.1 55.3 A 1 1 0 0 0 50.4 55.2 L 50.4 55.2 L 50.4 55.2 A 1 1 0 0 0 50 55.3 L 50 55.3 L 49.6 55.3 A 1 1 0 0 0 49.7 55.3 L 49.4 55.6 L 49.2 55.9 A 1 1 0 0 0 48.9 56.4 Q 48.5 57.5 48.8 58.5 Q 49.1 59.2 49.7 59.3 Q 50.8 59.7 52.4 59.2 Q 54.5 58.7 56.3 57.7 Q 57.6 57 58.2 56.1 Q 60.3 54.5 60.8 48.8 Q 61.1 44.2 56.5 43.2 Q 55.6 43.1 54.9 42.7 C 50.2 39.9 44.4 44.4 48.8 49.8 Q 49.4 50.6 50 50.7 Q 50.4 50.8 50.8 50.7 Q 51.2 51.1 51.5 50.9 A 1 1 0 0 0 52 50.8 A 1 1 0 0 0 52.8 50.9 Q 53.1 51.1 53.6 50.8 Q 54 50.7 55 49.2; M 56.9 57.6 Q 52.6 55.9 52 58.5 Q 51.5 59.6 51.6 61.6 Q 50.5 61.9 49.7 61.8 A 1 1 0 0 0 49.4 62.4 L 49.5 62.4 L 49.4 62.4 A 1 1 0 0 0 49.6 62.6 L 49.6 62.6 L 49.8 62.8 A 1 1 0 0 0 49.8 62.8 L 50.1 63 L 50.1 62.9 A 1 1 0 0 0 50.5 63.1 Q 51.1 62.8 51.8 62.9 Q 52.8 62.9 52.7 61.8 Q 52.8 60.7 53.1 59.1 Q 53.3 58.3 56.4 60.2 Q 59.1 61.2 60.1 58.1 Q 60.6 55.5 61.1 51.1 Q 61.9 47.9 58.7 43.6 Q 58.2 43 57.8 41.9 C 54.5 32.7 44.1 40.7 48.5 45.3 Q 49.5 46 50.2 46.3 Q 50.7 46.5 50.7 47 Q 50.7 47.9 51.9 48 A 1 1 0 0 0 52.2 48.1 A 1 1 0 0 0 52.6 48.3 Q 52.9 48.8 53.6 48.4 Q 55.6 47.3 56 45; M 58.7 59.3 Q 52.9 53.9 50.1 59.5 Q 48.7 64.3 48.1 64.6 Q 47.2 65.3 45.2 65.3 A 1 1 0 0 0 45.5 66.3 L 45.5 66.3 L 45.5 66.3 A 1 1 0 0 0 45.8 66.7 L 45.8 66.7 L 45.8 66.8 A 1 1 0 0 0 46 67.1 L 46 67.1 L 46.1 67.4 A 1 1 0 0 0 46.9 67.4 Q 48.2 66.9 49.2 66 Q 51.2 66.5 50.1 64 Q 51.5 62.4 52.8 59.5 Q 55.3 62.5 58.9 63.1 Q 61.4 63.4 62.2 61.3 Q 64.3 57.8 64 51.8 Q 64 46.8 60.4 44.1 Q 59.1 43.2 58.6 41.5 C 56.6 29.8 41.8 36.6 46.5 44.3 Q 47.2 45.6 48.6 46 Q 49 46 49.5 47.1 Q 49.3 48.1 50.8 48.1 A 1 1 0 0 0 51.5 48.6 A 1 1 0 0 0 52.2 48.8 Q 52.1 49.2 53.4 49 Q 55.6 47.3 56 45; M 56.8 62.7 Q 52.9 53.9 49.5 59.3 Q 47.8 62.4 45.7 65.5 Q 44.3 66.6 42.5 66.6 A 1 1 0 0 0 41.5 67.2 L 41.9 67.4 L 41.8 67.4 A 1 1 0 0 0 42.4 68 L 42.5 68.1 L 42.5 68.1 A 1 1 0 0 0 43 68.7 L 43.1 68.7 L 43.2 68.6 A 1 1 0 0 0 43.9 69 Q 45.9 68.3 46.5 67.9 Q 48.8 69 48 65.4 Q 51.5 62.4 51.9 60.7 Q 53.6 67.5 55 67.9 Q 56.7 68.3 58.9 66.2 Q 65.9 60.9 65 52.3 Q 64.5 46.7 62 44.4 Q 61.3 42.7 61.7 41.2 C 66.8 25.3 44.9 27.5 47.8 40.1 Q 48.3 41.8 49.4 42.2 Q 50 42.7 49.9 43.7 Q 49.6 45.2 50.9 44.9 A 1 1 0 0 0 51.9 46.1 A 1 1 0 0 0 52.8 47.1 Q 53.1 47.9 53.8 47.4 Q 57.4 45.1 58.5 43.5; M 63.6 63.2 Q 52.9 53.9 52.7 60.9 Q 52.2 66.9 51.8 70.1 Q 50.4 72.7 47.3 73 A 1 1 0 0 0 48.2 74.3 L 48.8 74.2 L 48.2 74.3 A 1 1 0 0 0 49.2 75.2 L 49.5 74.9 L 49.2 75.2 A 1 1 0 0 0 50 75.4 L 50.2 75.1 L 50 75.4 A 1 1 0 0 0 51.4 75.6 Q 53.3 73.7 54.1 72.7 Q 56 72.1 54.4 70 Q 55.7 67.9 56.7 64.4 Q 58.1 67.3 60.8 69.2 Q 62.2 70.5 64.8 68.4 Q 70.4 62.2 68.9 53.4 Q 67.6 45.4 61.8 40.8 Q 60.3 39.1 60.3 36.8 C 60.6 21.4 39.6 25.3 41.9 38.1 Q 42.6 41.9 46.3 43.2 Q 47.1 44 46.9 44.9 Q 47 46.1 48.6 45.5 A 1 1 0 0 0 50 46.5 A 1 1 0 0 0 51 46.9 Q 52.1 48.3 53.1 47.3 Q 56.1 44.8 56.4 41.5; M 59.7 67.7 Q 52.1 51.3 47.9 63 Q 47 70.1 48.1 72.5 Q 45.6 73.2 43.2 70.8 A 1 1 0 0 0 42.1 72.4 L 43 73.1 L 42.2 72.6 A 1 1 0 0 0 42 74.1 L 42.8 74.1 L 42 74.1 A 1 1 0 0 0 42.6 75.5 L 43 75.4 L 42.6 75.5 A 1 1 0 0 0 43 76.6 Q 45.1 76.5 48.5 77.1 Q 49.9 78 51 76.4 Q 51.3 72.4 52.6 69 Q 53.3 73 54.2 74.7 Q 55.5 78.1 60.8 76.5 Q 73.6 70 71.7 53 Q 70.2 43.8 63.2 39.8 Q 60.9 37.3 61.5 35.2 C 60.5 14.5 36.1 22.9 40.6 36.9 Q 42.3 41.8 46.9 42.2 Q 48.3 43 48 44 Q 48.1 45.6 49.9 45 A 1 1 0 0 0 51.4 46.1 A 1 1 0 0 0 52.7 46.9 Q 53.2 48.6 54.6 47.8 Q 59 45.4 59.4 40.2; M 64.3 71.3 Q 53.2 51.8 47.8 62.5 Q 45.5 68.9 49.1 75.7 Q 47.8 73.2 47.3 70.9 A 1 1 0 0 0 46.4 71.3 L 46.4 71.6 L 46.3 71.5 A 1 1 0 0 0 45.4 72.3 L 45.6 72.5 L 45.4 72.3 A 1 1 0 0 0 44.7 73.3 L 44.7 73.3 L 44.7 73.3 A 1 1 0 0 0 44.2 74.4 Q 45.6 75.6 48.4 79.2 Q 52.1 83.4 52.8 78.5 Q 53.5 76.5 52.6 69 Q 53.1 74.8 54 77.1 Q 57.7 83.2 63.8 79.9 Q 76.9 70.7 74.3 53.4 Q 72.5 44.1 67.6 41.4 Q 60.9 37.3 59.9 34.3 C 57.4 7.3 27.3 21.9 35.6 37 Q 38.9 42.2 43.9 42.8 Q 44.6 43 44.9 44.3 Q 45.6 46.6 47.5 45 A 1 1 0 0 0 49.2 46.3 A 1 1 0 0 0 50.8 47.2 Q 52 48.9 53.8 47.5 Q 58 43.2 57.2 37.5; M 64.3 71.3 Q 53.2 51.8 44 61.4 Q 40.7 65.3 46.8 79.8 Q 46 77.8 45.2 76 A 1 1 0 0 0 43 76.6 L 43.5 77.1 L 42.9 76.6 A 1 1 0 0 0 41.9 77.6 L 42.5 78.1 L 41.9 77.6 A 1 1 0 0 0 41.1 79 L 41.9 79.6 L 41.1 79 A 1 1 0 0 0 40.5 80.3 Q 43.3 84.1 47.9 85.3 Q 52.8 88.5 53.1 84.5 Q 49.9 79.1 49 70.8 Q 49.9 79.1 53.1 84.5 Q 60 89.6 66.2 87.9 Q 79.6 81 77.8 53.9 Q 76 42.9 67.6 37.4 Q 64.5 35.8 63.1 33.3 C 55.4 -1.1 26.5 15.1 28.2 30.9 Q 29.1 42.5 39.3 43.7 Q 41.7 43.3 42.2 45.4 Q 42.5 49 45.4 47.6 A 1 1 0 0 0 48 47.3 A 1 1 0 0 0 50.1 47.8 Q 51.4 49 52.1 48.4 Q 58 43.2 56.1 36.5; M 64.7 75.7 Q 50.8 52.3 41.3 62.7 Q 35.2 69.3 43.3 85.8 Q 41.1 81.9 40.4 81.4 A 1 1 0 0 0 38.9 82.5 L 39.5 83.2 L 38.9 82.4 A 1 1 0 0 0 37.4 83.6 L 38.4 84.6 L 37.4 83.6 A 1 1 0 0 0 36.1 85.1 L 37.2 86 L 36.7 85.6 A 1 1 0 0 0 35.6 87.2 Q 39.5 91.2 43.5 92.8 Q 50.2 97.6 51.7 92.7 Q 48.4 90.4 45.8 75 Q 48.4 90.3 51.7 92.7 Q 58.3 98.7 67.3 96.4 Q 85.9 87.5 81.9 54 Q 77.3 37.8 67.2 33.1 Q 64.4 31.6 63.2 27 C 57.7 -6.4 19.7 -0.2 20.6 27.2 Q 22.5 40.8 35 42 Q 37.7 42 37.5 45.5 Q 37.7 47.7 41.8 46.1 A 1 1 0 0 0 45.1 46.7 A 1 1 0 0 0 47.8 46.5 Q 48.2 48.3 50 47.7 Q 59.5 38.9 53.3 31.4"
dur="100s"
begin="0"
repeatCount="none"
fill="freeze"
/>
</path>
<path class="body" d="">
<animate
attributeName="d"
values="M 55.1 53.6 Q 55.2 52 53.4 52.8 Q 52.4 54.3 52.2 54.1 Q 52.1 53.7 52.2 52.6 A 1 1 0 0 0 51.9 52.3 L 51.5 52.1 L 51.4 52 A 1 1 0 0 0 51.1 51.7 L 51 51.5 L 50.8 51.3 A 1 1 0 0 0 50.7 51.6 L 50.7 51.8 L 50.6 52 A 1 1 0 0 0 50.7 52.3 Q 50.5 52.3 50.7 52.4 Q 50.5 52.4 50.6 53.6 Q 50.7 54.7 51.6 55.4 Q 53 56.4 54.5 56.2 Q 55.7 55.8 56.3 54.9 Q 57.3 53.7 58.3 49.4 Q 59.4 46.9 56.4 45.8 Q 55.9 45.7 55.3 45.8; M 55.1 53.6 Q 52.8 53.3 52 55.4 Q 51.7 56 51.6 55.7 Q 51.2 55.7 51.1 55.3 A 1 1 0 0 0 50.4 55.2 L 50.4 55.2 L 50.4 55.2 A 1 1 0 0 0 50 55.3 L 50 55.3 L 49.6 55.3 A 1 1 0 0 0 49.7 55.3 L 49.4 55.6 L 49.2 55.9 A 1 1 0 0 0 48.9 56.4 Q 48.5 57.5 48.8 58.5 Q 49.1 59.2 49.7 59.3 Q 50.8 59.7 52.4 59.2 Q 54.5 58.7 56.3 57.7 Q 57.6 57 58.2 56.1 Q 60.3 54.5 60.8 48.8 Q 61.1 44.2 56.5 43.2 Q 55.6 43.1 54.9 42.7; M 56.9 57.6 Q 52.6 55.9 52 58.5 Q 51.5 59.6 51.6 61.6 Q 50.5 61.9 49.7 61.8 A 1 1 0 0 0 49.4 62.4 L 49.5 62.4 L 49.4 62.4 A 1 1 0 0 0 49.6 62.6 L 49.6 62.6 L 49.8 62.8 A 1 1 0 0 0 49.8 62.8 L 50.1 63 L 50.1 62.9 A 1 1 0 0 0 50.5 63.1 Q 51.1 62.8 51.8 62.9 Q 52.8 62.9 52.7 61.8 Q 52.8 60.7 53.1 59.1 Q 53.3 58.3 56.4 60.2 Q 59.1 61.2 60.1 58.1 Q 60.6 55.5 61.1 51.1 Q 61.9 47.9 58.7 43.6 Q 58.2 43 57.8 41.9; M 58.7 59.3 Q 52.9 53.9 50.1 59.5 Q 48.7 64.3 48.1 64.6 Q 47.2 65.3 45.2 65.3 A 1 1 0 0 0 45.5 66.3 L 45.5 66.3 L 45.5 66.3 A 1 1 0 0 0 45.8 66.7 L 45.8 66.7 L 45.8 66.8 A 1 1 0 0 0 46 67.1 L 46 67.1 L 46.1 67.4 A 1 1 0 0 0 46.9 67.4 Q 48.2 66.9 49.2 66 Q 51.2 66.5 50.1 64 Q 51.5 62.4 52.8 59.5 Q 55.3 62.5 58.9 63.1 Q 61.4 63.4 62.2 61.3 Q 64.3 57.8 64 51.8 Q 64 46.8 60.4 44.1 Q 59.1 43.2 58.6 41.5; M 56.8 62.7 Q 52.9 53.9 49.5 59.3 Q 47.8 62.4 45.7 65.5 Q 44.3 66.6 42.5 66.6 A 1 1 0 0 0 41.5 67.2 L 41.9 67.4 L 41.8 67.4 A 1 1 0 0 0 42.4 68 L 42.5 68.1 L 42.5 68.1 A 1 1 0 0 0 43 68.7 L 43.1 68.7 L 43.2 68.6 A 1 1 0 0 0 43.9 69 Q 45.9 68.3 46.5 67.9 Q 48.8 69 48 65.4 Q 51.5 62.4 51.9 60.7 Q 53.6 67.5 55 67.9 Q 56.7 68.3 58.9 66.2 Q 65.9 60.9 65 52.3 Q 64.5 46.7 62 44.4 Q 61.3 42.7 61.7 41.2; M 63.6 63.2 Q 52.9 53.9 52.7 60.9 Q 52.2 66.9 51.8 70.1 Q 50.4 72.7 47.3 73 A 1 1 0 0 0 48.2 74.3 L 48.8 74.2 L 48.2 74.3 A 1 1 0 0 0 49.2 75.2 L 49.5 74.9 L 49.2 75.2 A 1 1 0 0 0 50 75.4 L 50.2 75.1 L 50 75.4 A 1 1 0 0 0 51.4 75.6 Q 53.3 73.7 54.1 72.7 Q 56 72.1 54.4 70 Q 55.7 67.9 56.7 64.4 Q 58.1 67.3 60.8 69.2 Q 62.2 70.5 64.8 68.4 Q 70.4 62.2 68.9 53.4 Q 67.6 45.4 61.8 40.8 Q 60.3 39.1 60.3 36.8; M 59.7 67.7 Q 52.1 51.3 47.9 63 Q 47 70.1 48.1 72.5 Q 45.6 73.2 43.2 70.8 A 1 1 0 0 0 42.1 72.4 L 43 73.1 L 42.2 72.6 A 1 1 0 0 0 42 74.1 L 42.8 74.1 L 42 74.1 A 1 1 0 0 0 42.6 75.5 L 43 75.4 L 42.6 75.5 A 1 1 0 0 0 43 76.6 Q 45.1 76.5 48.5 77.1 Q 49.9 78 51 76.4 Q 51.3 72.4 52.6 69 Q 53.3 73 54.2 74.7 Q 55.5 78.1 60.8 76.5 Q 73.6 70 71.7 53 Q 70.2 43.8 63.2 39.8 Q 60.9 37.3 61.5 35.2; M 64.3 71.3 Q 53.2 51.8 47.8 62.5 Q 45.5 68.9 49.1 75.7 Q 47.8 73.2 47.3 70.9 A 1 1 0 0 0 46.4 71.3 L 46.4 71.6 L 46.3 71.5 A 1 1 0 0 0 45.4 72.3 L 45.6 72.5 L 45.4 72.3 A 1 1 0 0 0 44.7 73.3 L 44.7 73.3 L 44.7 73.3 A 1 1 0 0 0 44.2 74.4 Q 45.6 75.6 48.4 79.2 Q 52.1 83.4 52.8 78.5 Q 53.5 76.5 52.6 69 Q 53.1 74.8 54 77.1 Q 57.7 83.2 63.8 79.9 Q 76.9 70.7 74.3 53.4 Q 72.5 44.1 67.6 41.4 Q 60.9 37.3 59.9 34.3; M 64.3 71.3 Q 53.2 51.8 44 61.4 Q 40.7 65.3 46.8 79.8 Q 46 77.8 45.2 76 A 1 1 0 0 0 43 76.6 L 43.5 77.1 L 42.9 76.6 A 1 1 0 0 0 41.9 77.6 L 42.5 78.1 L 41.9 77.6 A 1 1 0 0 0 41.1 79 L 41.9 79.6 L 41.1 79 A 1 1 0 0 0 40.5 80.3 Q 43.3 84.1 47.9 85.3 Q 52.8 88.5 53.1 84.5 Q 49.9 79.1 49 70.8 Q 49.9 79.1 53.1 84.5 Q 60 89.6 66.2 87.9 Q 79.6 81 77.8 53.9 Q 76 42.9 67.6 37.4 Q 64.5 35.8 63.1 33.3; M 64.7 75.7 Q 50.8 52.3 41.3 62.7 Q 35.2 69.3 43.3 85.8 Q 41.1 81.9 40.4 81.4 A 1 1 0 0 0 38.9 82.5 L 39.5 83.2 L 38.9 82.4 A 1 1 0 0 0 37.4 83.6 L 38.4 84.6 L 37.4 83.6 A 1 1 0 0 0 36.1 85.1 L 37.2 86 L 36.7 85.6 A 1 1 0 0 0 35.6 87.2 Q 39.5 91.2 43.5 92.8 Q 50.2 97.6 51.7 92.7 Q 48.4 90.4 45.8 75 Q 48.4 90.3 51.7 92.7 Q 58.3 98.7 67.3 96.4 Q 85.9 87.5 81.9 54 Q 77.3 37.8 67.2 33.1 Q 64.4 31.6 63.2 27"
dur="100s"
begin="0"
repeatCount="none"
fill="freeze"
/>
</path>
<path class="arm" d="">
<animate
attributeName="d"
values="M 55 48.8 Q 55.1 49 55 49.2 Q 54.7 49.5 54.3 50 Q 54.2 50.2 54.1 50.2 Q 53.7 49.9 50.9 48.5 A 1 1 0 0 0 50.8 48.4 Q 51.4 49.2 50.7 48.3 Q 49.9 47.1 49.2 48.8 Q 49.6 49.6 51.2 50 Q 52.2 51.5 53 52 Q 54.4 53.1 55.5 52.5 Q 56.5 51.9 56.9 50.9; M 56.9 48.2 Q 55.5 48.5 55.2 49.1 Q 54.7 49.5 54.3 50 Q 53.8 51 52.9 50.8 Q 52.5 50.9 51.9 50.9 A 1 1 0 0 0 51.2 51.3 Q 50.8 51.2 50.7 51.2 Q 49.3 51.6 49.7 53.5 Q 49.9 53.9 50.9 53.8 Q 52.6 53.7 53 52 Q 54.4 53.1 55.5 52.5 Q 56.5 51.9 56.9 50.9; M 57.3 46.7 Q 55.1 46.7 54.8 48.6 Q 54.7 49.6 54.3 50 Q 53.5 49.9 52.5 49.1 Q 52.2 48.9 52.3 48.6 A 1 1 0 0 0 51.8 48.1 Q 50.4 47.3 50.1 47.8 Q 49.6 48.6 50.1 50 Q 50.7 50.5 51.4 50.4 Q 52.3 50.9 53.2 51.9 Q 54.4 53.1 55.7 51.9 Q 56.4 51.1 57.2 50.3; M 58.2 46.7 Q 57.1 47.1 56.4 48.6 Q 55.5 50.2 55 53 Q 53.5 52 49.8 51.2 Q 49.2 50.7 49 50.2 A 1 1 0 0 0 48.1 50.6 Q 47.1 49.6 46.4 50.5 Q 45.3 51.7 46.6 53 Q 47.6 53.3 49.3 52.7 Q 51.3 54.2 53.2 54.8 Q 55.6 55.6 56.7 54.3 Q 58 52.1 59.5 50.9; M 59 46.2 Q 57.1 47.1 56.4 48.6 Q 55.5 50.2 55 52 Q 53.7 51.9 52.1 48.9 Q 51.8 48.4 52 47.3 A 1 1 0 0 0 50.8 46.2 Q 50.2 46.3 49.5 45.5 Q 47.3 46.2 47.8 47.8 Q 49.1 49.5 50.2 49.7 Q 52.2 53.5 53.7 54.7 Q 55.6 55.9 56.7 54.3 Q 58 52.1 59.5 50.9; M 58.8 43.6 Q 56.3 45.7 56.1 48.2 Q 55.9 50.8 56.1 52.4 Q 53.7 51.9 50.4 51.3 Q 49.1 50.5 48.3 50.8 A 1 1 0 0 0 47.4 51.6 Q 45.7 51 45.3 52.1 Q 45.3 55 48.3 55.2 Q 49.2 55.4 50.7 54.1 Q 52.5 54.9 55.2 55.6 Q 56.4 56.1 57.4 55.7 Q 61 53.7 62.1 49.2; M 60.3 43.3 Q 58.8 44.5 57.7 47.9 Q 56.7 50.9 56.6 53.3 Q 54.3 49.1 53.5 48.5 Q 53.4 47.9 53.6 47.5 A 1 1 0 0 0 51.9 46.3 Q 51.9 44.8 51.2 44.2 Q 45.6 44.6 48.1 47.3 Q 48.4 47.8 50.7 49.3 Q 51.2 52.3 52.1 56.1 Q 54.6 63.5 59.8 58.4 Q 63.8 54.5 65.8 48.9; M 60.5 40.4 Q 57.4 44 56.5 48.2 Q 56 51.2 56 52.6 Q 51.8 49.2 51.2 48.3 Q 50.2 48.3 50.6 47.5 A 1 1 0 0 0 48.7 46.4 Q 48.8 45.3 48.5 45.2 Q 42.4 45.7 44.7 49.9 Q 46 51.7 48 51.6 Q 49.3 52.9 50.9 56.8 Q 54.6 63.5 59.8 58.4 Q 63.8 54.5 65.8 48.9; M 59.2 41.6 Q 53.3 44 52.2 48.6 Q 52.5 51 49.9 54 Q 47.5 52.5 45.8 49.3 Q 44.9 48.4 44.3 47.3 A 1 1 0 0 0 42.4 46 Q 41.9 43.8 41.1 44 Q 37.9 43.7 37.1 48.5 Q 37.6 50.4 41.6 52.4 Q 41.8 55.7 44.2 60.6 Q 48.7 68.3 53.9 62.1 Q 59.4 56.3 61.4 52.4; M 56.7 39.6 Q 52 42 50 50 Q 49.2 53.1 47.7 54.6 Q 45 54.3 43.6 50.8 Q 42.4 49.1 43.9 44.9 A 1 1 0 0 0 42 44.4 Q 40.1 46.7 41.3 42.9 Q 35.6 40.1 32.5 44.6 Q 30.2 50.3 36.7 52.2 Q 38.1 57.2 41.2 62.7 Q 46 69.7 53.9 62.1 Q 59.4 56.3 62.6 50.1"
dur="100s"
begin="0"
repeatCount="none"
fill="freeze"
/>
</path>
<path class="head" d="">
<animate
attributeName="d"
values="M 55.3 45.8 C 52.6 43.5 51.7 45.3 50.7 48.1 Q 50.8 48.7 51.4 49.4 Q 51.8 49.9 52.1 49.9 Q 52.3 50.1 52.5 49.9 A 1 1 0 0 0 52.9 49.8 A 1 1 0 0 0 53.5 49.9 Q 53.9 50.1 54 50.1 Q 54 50.7 55 49.2; M 54.9 42.7 C 50.2 39.9 44.4 44.4 48.8 49.8 Q 49.4 50.6 50 50.7 Q 50.4 50.8 50.8 50.7 Q 51.2 51.1 51.5 50.9 A 1 1 0 0 0 52 50.8 A 1 1 0 0 0 52.8 50.9 Q 53.1 51.1 53.6 50.8 Q 54 50.7 55 49.2; M 57.8 41.9 C 54.5 32.7 44.1 40.7 48.5 45.3 Q 49.5 46 50.2 46.3 Q 50.7 46.5 50.7 47 Q 50.7 47.9 51.9 48 A 1 1 0 0 0 52.2 48.1 A 1 1 0 0 0 52.6 48.3 Q 52.9 48.8 53.6 48.4 Q 55.6 47.3 56 45; M 58.6 41.5 C 56.6 29.8 41.8 36.6 46.5 44.3 Q 47.2 45.6 48.6 46 Q 49 46 49.5 47.1 Q 49.3 48.1 50.8 48.1 A 1 1 0 0 0 51.5 48.6 A 1 1 0 0 0 52.2 48.8 Q 52.1 49.2 53.4 49 Q 55.6 47.3 56 45; M 61.7 41.2 C 66.8 25.3 44.9 27.5 47.8 40.1 Q 48.3 41.8 49.4 42.2 Q 50 42.7 49.9 43.7 Q 49.6 45.2 50.9 44.9 A 1 1 0 0 0 51.9 46.1 A 1 1 0 0 0 52.8 47.1 Q 53.1 47.9 53.8 47.4 Q 57.4 45.1 58.5 43.5; M 60.3 36.8 C 60.6 21.4 39.6 25.3 41.9 38.1 Q 42.6 41.9 46.3 43.2 Q 47.1 44 46.9 44.9 Q 47 46.1 48.6 45.5 A 1 1 0 0 0 50 46.5 A 1 1 0 0 0 51 46.9 Q 52.1 48.3 53.1 47.3 Q 56.1 44.8 56.4 41.5; M 61.5 35.2 C 60.5 14.5 36.1 22.9 40.6 36.9 Q 42.3 41.8 46.9 42.2 Q 48.3 43 48 44 Q 48.1 45.6 49.9 45 A 1 1 0 0 0 51.4 46.1 A 1 1 0 0 0 52.7 46.9 Q 53.2 48.6 54.6 47.8 Q 59 45.4 59.4 40.2; M 59.9 34.3 C 57.4 7.3 27.3 21.9 35.6 37 Q 38.9 42.2 43.9 42.8 Q 44.6 43 44.9 44.3 Q 45.6 46.6 47.5 45 A 1 1 0 0 0 49.2 46.3 A 1 1 0 0 0 50.8 47.2 Q 52 48.9 53.8 47.5 Q 58 43.2 57.2 37.5; M 63.2 33.3 C 55.4 -1.1 26.5 15.1 28.2 30.9 Q 29.1 42.5 39.3 43.7 Q 41.7 43.3 42.2 45.4 Q 42.5 49 45.4 47.6 A 1 1 0 0 0 48 47.3 A 1 1 0 0 0 50.1 47.8 Q 51.4 49 52.1 48.4 Q 58 43.2 56.1 36.5; M 63.2 27 C 57.7 -6.4 19.7 -0.2 20.6 27.2 Q 22.5 40.8 35 42 Q 37.7 42 37.5 45.5 Q 37.7 47.7 41.8 46.1 A 1 1 0 0 0 45.1 46.7 A 1 1 0 0 0 47.8 46.5 Q 48.2 48.3 50 47.7 Q 59.5 38.9 53.3 31.4"
dur="100s"
begin="0"
repeatCount="none"
fill="freeze"
/>
</path>
<path class="eyeEar" d="">
<animate
attributeName="d"
values="M 52.9 48.4 Q 52.3 48 52.5 48.7 M 53.6 47.3 C 53.6 47.3 53.6 47.3 53.6 47.3 M 53.6 47.3 C 53.6 47.3 53.6 47.3 53.6 47.3; M 51.1 47.8 Q 52 47.5 51 47.3M 53.6 45.3 C 53.6 45.3 53.6 45.3 53.6 45.3M 53.6 45.3 C 53.6 45.3 53.6 45.3 53.6 45.3; M 51.3 46.2 Q 52 46.2 52.1 45.6M 54.1 42.5 C 54.2 41.8 55.5 42.4 54.8 43.5M 54.3 42.6 C 54.6 42.5 54.8 42.7 54.7 43; M 50.3 45.9 Q 50.9 45.9 51.4 45.1M 53.6 42 C 54.3 40.7 55.6 42 55.2 43.7M 54.2 42.3 C 54.4 41.8 54.9 42.3 54.7 43; M 51.1 42.3 Q 52 42.3 52.6 41.4 M 56.6 38.9 C 57.4 37.4 61 38.8 58 41.9 M 57.1 39.7 C 57.6 38.6 59 39.4 58.1 40.6; M 48.5 41.5 Q 49.2 41.3 50 40.5M 52.5 36.1 C 53 33.8 57.2 35.5 55 38.8M 53.3 36.7 C 53.5 35.6 55.1 36.3 54.7 37.5; M 48.5 41.5 Q 49.2 41.3 50 40.5M 53.3 34.9 C 52.7 33.4 58.1 31.8 56.1 38M 54.1 35.6 C 54.1 34.5 55.9 34.6 55.5 36.1; M 45.1 41.6 Q 46 41.4 46.6 40.4M 49.8 33.3 C 50.1 29.9 56.7 31.4 53.6 36.1M 51 33.7 C 51.3 32.6 53.3 32.3 53.1 34.7; M 41.9 42.6 Q 43.5 41.3 44.1 39.7M 45.8 29.4 C 45.8 25.7 55.1 25.2 51.5 34.3M 47.5 29.6 C 48.6 27.2 51 28.8 50.5 31.1; M 38.2 40.5 Q 39.9 38.3 40.1 36.7M 42.9 25.6 C 44 17 55.1 25.2 49.9 29.8M 45.7 27.2 C 46.219 24.237 48.3 25.5 48.2 27.3"
dur="100s"
begin="0"
repeatCount="none"
fill="freeze"
/>
</path>
</g>
</svg>
<div class="daysSection" title="Day of pregnancy">
<span>Day:</span>
<br />
<span class="days"> </span>
</div>
<style>
body {
background: rgb(50, 0, 108);
font-family: "Roboto", sans-serif;
margin: 0, auto;
}
#babyProgression {
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
max-width: 100%;
max-height: calc(100% - 250px);
min-height: 100px;
}
.maskLine {
transition: d 310ms;
}
.maskLine:nth-of-type(2) {
transition: d 300ms;
}
.controls {
position: absolute;
top: 50%;
left: 15px;
transform: translate(0%, -50%);
height: calc(100vh - 6em);
max-height: 600px;
}
.slider {
position: absolute;
display: block;
top: 50%;
right: 15px;
transform: translate(0%, -50%);
width: 50px;
height: calc(100vh - 6em);
max-height: 600px;
}
#scaleSlider {
position: absolute;
width: calc(100vh - 6em);
max-width: 600px;
cursor: pointer;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
}
.container {
display: flex;
flex-direction: column;
width: 45px;
justify-content: space-between;
height: 100%;
}
.container > button {
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
background: none;
border: 1px solid rgba(255, 255, 255, 0.5);
flex: 1;
margin: 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 0px;
padding-right: 0px;
font-family: "Roboto", sans-serif;
font-weight: bold;
}
.container > button:hover,
.container > button:focus,
.container > button:active {
border: 1px solid #fff;
color: #fff;
}
.container > button > span {
font-weight: 100;
font-size: 0.8em;
}
.daysSection {
text-align: center;
font-family: "Roboto", sans-serif;
position: absolute;
bottom: 80px;
left: 50%;
transform: translate(-50%);
color: rgba(255, 255, 255, 0.8);
font-size: 50px;
}
.days {
font-size: 60px;
font-weight: 600;
}
.dateSection {
text-align: center;
font-family: "Roboto", sans-serif;
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%);
color: rgba(255, 255, 255, 0.8);
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 25px;
}
/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
height: 25px;
background: rgb(50, 0, 108);
border-radius: 25px;
}
/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
height: 25px;
background: rgb(50, 0, 108);
border-radius: 25px;
}
/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 25px;
background-color: #a020f0;
border-radius: 50%;
border: 1px solid #a020f0;
box-shadow: -407px 0 0 400px rgb(100, 0, 180);
}
/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
height: 25px;
width: 25px;
background-color: #a020f0;
border-radius: 50%;
border: 1px solid #a020f0;
box-shadow: -407px 0 0 400px rgb(100, 0, 180);
}
</style>
<script>
// Function to handle slider change
function handleScaleChangeScale(val) {
const percentage = val / 252;
const animations = document.querySelectorAll(
"#babyProgression animate"
);
document.querySelector(".days").textContent = parseInt(
parseInt(val) + 28
);
// Change baby animations
animations.forEach((animation) => {
const duration = parseFloat(animation.getAttribute("dur")) || 50;
// Calculate the target time
let targetTime = duration * percentage;
if (targetTime == 0) {
targetTime = 0.01;
}
if (targetTime == 100) {
targetTime = 99.9;
}
// Set the current time of the animation
animation.ownerSVGElement.setCurrentTime(targetTime);
// Freeze the animation
animation.beginElementAt(-targetTime);
animation.ownerSVGElement.pauseAnimations();
});
}
let i = 28;
setInterval(() => {
i++;
if (i > 252) {
i = 28;
}
handleScaleChangeScale(i);
}, 10);
function daysUntil(date) {
let targetDate;
if (typeof date === "string") {
const [year, month, day] = date.split("-").map(Number);
targetDate = new Date(year, month - 1, day);
} else if (date instanceof Date) {
targetDate = date;
} else {
throw new Error(
"Invalid date format. Please provide a Date object or a string in YYYY-MM-DD format."
);
}
const today = new Date();
today.setHours(0, 0, 0, 0);
const timeDiff = targetDate - today;
const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
return daysDiff;
}
</script>
</body>
</html>