index.html
<!DOCTYPE html>
<html>
<head>
<title>W2 pseudo joyplot</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!--
practice Figma
-->
</head>
<body>
<svg width="960" height="500">
<!-- overlapping circles -->
<svg xmlns="http://www.w3.org/2000/svg" x= 220 y= 100 width="500" height="300" viewBox="0 0 537 294" fill="none">
<path d="M1 0V293H535" stroke="black"/>
<path d="M16 49.0147C79.5024 49.9658 142.974 50 206.481 50C220.295 50 229.62 47.3144 240.95 40.2017C245.529 37.3265 250.526 32.2955 256.063 31.3887C263.748 30.13 271.741 32.0264 278.383 35.6583C284.328 38.909 287.772 43.6413 294.542 45.8398C302.22 48.3329 310.336 48.0294 318.316 48.0294C326.878 48.0294 335.216 49.0147 343.717 49.0147C350.464 49.0147 359.551 50.5037 366.038 48.4673C376.967 45.0365 394.637 26.6774 407.075 37.9574C411.738 42.1854 415.912 46.5872 422.537 47.8104C431.66 49.4951 440.92 49.0147 450.205 49.0147C464.193 49.0147 477.769 46.0588 491.824 46.0588C506.549 46.0588 521.275 46.0588 536 46.0588" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 75.7655C36.8642 75.7655 57.7284 75.7655 78.5926 75.7655C84.8067 75.7655 91.0697 75.9936 97.2787 75.7655C100.254 75.6561 99.7754 73.9881 101.062 72.1132C103.032 69.2419 105.039 66.3473 107.252 63.6807C109.063 61.4992 110.297 59.3264 113.041 57.8799C118.8 54.8445 121.391 60.3152 124.333 64.3789C126.206 66.9655 129.103 71.8983 132.817 71.8983C137.53 71.8983 141.429 64.4229 144.452 68.5146C148.822 74.429 151.02 66.0334 157.808 67.5478C161.202 68.3051 163.372 69.9759 165.603 72.328C168.913 75.8173 166.448 76.7323 172.711 76.7323C181.844 76.7323 190.976 76.7323 200.109 76.7323C216.251 76.7323 231.928 77.7391 247.512 73.2948C253.796 71.5028 256.94 66.8677 264.078 67.0644C268.038 67.1736 272.268 69.9051 274.968 72.4354C278.367 75.6204 283.493 77.7306 287.808 79.5789C299.843 84.7342 316.88 82.533 329.651 82.533C343.694 82.533 357.737 82.533 371.78 82.533C377.517 82.533 381.981 82.3487 386.913 79.1492C390.237 76.9925 389.656 75.005 391.556 72.1132C397.076 63.707 407.248 60.9173 412.592 70.9315C413.237 72.141 413.086 73.6874 414.541 74.369C417.334 75.6776 422.013 75.7026 424.801 75.9803C432.587 76.7559 440.416 77.2979 448.13 78.6121C463.772 81.2771 479.916 81.4456 495.877 81.5662C509.249 81.6672 522.627 81.5662 536 81.5662" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 22.1886C30.1506 22.1886 44.2211 22.9483 58.3016 23.1991C66.143 23.3387 73.6356 22.7354 81.4012 22.2447C85.8822 21.9616 89.6614 22.8582 90.2284 17.3046C90.4466 15.1679 91.5664 13.2861 92.9224 11.5786C95.114 8.81885 100.368 6.14546 103.928 6.02096C105.707 5.95871 109.132 5.43144 110.691 6.47006C112.767 7.85247 112.269 12.0725 114.933 12.8698C117.135 13.5288 119.551 12.6709 121.754 13.1504C123.608 13.554 124.162 15.6325 125.537 16.5748C128.168 18.3787 132.725 15.6003 134.937 17.9221C137.38 20.4849 139.054 16.0756 142 22.2447C142 22.2447 175.799 22.1886 191.5 22.1886C202.67 22.1886 220.585 24.3985 229.5 17.3046C235.83 12.2678 231.87 12.6295 238.857 8.82784C247.125 4.32936 255.554 4 264.88 4C267.888 4 270.539 7.12236 272.905 9.10853C277.326 12.8199 279.385 13.2793 285.286 14.1048C294.113 15.3399 305.825 16.9775 314.404 13.6557C319.26 11.7754 323.748 9.05239 329.078 9.05239C333.732 9.05239 334.086 9.73048 335.841 13.5995C337.798 17.9118 360.719 22.3226 367 22.2447C375.655 22.1374 382.803 11.0733 391.326 11.0733C400.802 11.0733 409.844 9.247 419.183 9.05239C423.834 8.95548 430.893 7.97809 434.66 11.2979C448.304 23.3243 462.97 23.1991 480.5 23.1991C490.569 23.1991 502.5 24.2096 512.041 22.1886C520.236 22.1886 527.919 24.2096 536 24.2096" stroke="green" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 102.179C43.4132 102.179 69.3086 100.764 95.2042 91.9303C99.5812 90.4373 104.176 89.3543 108.829 89.3543C119.242 89.3543 129.437 87.3813 139.866 87.3813C152.078 87.3813 163.157 84.8727 175.143 83.5447C178.044 83.2233 184.183 82.4434 186.959 83.6543C189.109 84.5924 190.785 87.3539 192.556 88.8063C207.148 100.776 231.322 100.007 248.92 102.673C258.565 104.134 268.529 104.615 278.035 106.619C280.221 107.079 284.544 107.931 286.685 106.893C289.696 105.433 291.254 102.949 294.826 102.179C298.884 101.305 302.582 101.193 306.755 101.193C312.534 101.193 322.561 99.1619 327.955 101.631C330.816 102.941 332.476 106.487 335.7 107.112C342.925 108.513 350.367 108.099 357.692 108.099C367.431 108.099 379.899 104.442 389.125 108.318C402.108 113.772 412.031 116.166 426.324 115.991C462.994 115.541 499.343 110.072 536 110.072" stroke="green" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 126.77C32.7852 126.77 49.5705 126.77 66.3557 126.77C70.3613 126.77 77.181 128.006 80.7431 125.73C83.9253 123.697 87.0847 119.739 91.0198 119.11C95.287 118.429 97.2252 126.421 99.6978 128.575C105.343 133.492 109.878 123.631 111.801 120.314C113.476 117.426 122.179 117.754 124.876 117.414C130.563 116.697 136.32 117.311 141.946 116.156C148.657 114.778 166.208 110.19 171.749 115.5C175.379 118.978 176.752 124.085 180.941 127.207C184.332 129.735 192.065 128.739 196.07 128.739C199.51 128.739 202.813 128.876 206.176 128.192C219.943 125.394 234.312 126.303 248.253 125.019C262.446 123.711 273.114 113.763 287.704 120.916C295.986 124.976 298.628 131.693 308.885 131.693C318.805 131.693 328.936 130.709 339.03 130.709C343.151 130.709 345.613 132.209 349.535 133.116C356.495 134.726 364.228 134.863 371.345 135.414C386.538 136.59 402.173 135.633 417.419 135.633C436.107 135.633 454.795 135.633 473.484 135.633C481.653 135.633 489.766 135.841 497.862 134.648C502.314 133.991 506.577 132.821 511.108 132.678C518.6 132.443 529.327 132.282 536 129.724" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 152.588C30.4238 152.588 55.5 152.588 71 153C75 151 71.7047 149.271 76.0606 146.422C84.8367 140.682 94.901 135.33 105.168 133.263C111.195 132.05 112.197 132.145 115.673 137.392C119.015 142.436 122.878 147.527 128.586 149.615C137.337 152.817 138.751 137.521 147.189 135.961C158.023 133.958 171.37 134.114 180.236 141.136C184.384 144.422 188.478 150.268 193.258 145.651C196.059 142.944 197.687 138.027 201.136 136.291C205.338 134.178 212.988 135.741 217.441 135.741C223.534 135.741 229.736 136.726 235.059 133.318C242.166 128.767 256.099 129.859 263.948 131.006C268.612 131.687 274.385 133.499 277.955 136.732C280.41 138.956 281.412 141.476 283.645 143.889C286.856 147.36 288.598 151.231 293.165 153.359C298.684 155.93 306.527 154.57 312.479 154.57C318.149 154.57 323.416 152.588 329.221 152.588C336.067 152.588 343.066 150.533 349.739 149.064C359.129 146.997 367.557 145.651 377.205 145.651C389.344 145.651 397.56 152.93 408.939 155.341C417.787 157.215 426.935 154.595 435.53 153.634C468.757 149.919 501.149 142.678 535 142.678" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 179C32.8724 178.041 50.58 178.003 68.4812 178.003C74.6191 178.003 80.4553 177.278 86.2329 175.235C96.7795 171.504 109.137 170.319 118.57 164.049C122.42 161.491 123.837 158.21 128.746 157.294C134.315 156.255 139.692 159.737 142.428 164.271C144.672 167.991 145.555 173.756 150.342 174.016C153.46 174.186 156.411 176.01 159.727 176.01C163.458 176.01 167.19 176.01 170.921 176.01C181.586 176.01 194.752 178.508 204.728 174.792C217.816 169.917 228.93 160.46 242.154 156.297C247.371 154.655 254.452 160.167 257.192 164.271C258.11 165.647 257.943 167.168 258.718 168.535C260.102 170.973 264.381 171.868 266.803 173.02C278.39 178.532 292.396 177.007 305.02 177.007C315.066 177.007 326.88 176.983 335.548 171.525C339.681 168.922 343.104 161.281 348.833 161.281C356.392 161.281 356.744 172.125 365.511 168.036C372.443 164.803 380.035 169.402 386.655 171.414C389.493 172.277 391.991 172.226 394.343 170.251C397.149 167.896 402.204 168.055 405.707 167.593C411.142 166.877 420.191 165.224 424.646 169.587C429.924 174.757 442.085 172.023 449.068 172.023C456.361 172.023 463.654 172.023 470.947 172.023C475.093 172.023 479.563 172.472 483.667 171.802C486.451 171.347 488.802 170.03 491.695 170.03C498.623 170.03 502.978 166.571 506.959 161.558C509.06 158.912 511.336 157.549 515.157 158.125C519.955 158.848 519.536 165.761 521.206 169.033C523.576 173.677 530.052 172.023 535 172.023" stroke="green" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 200.657C25.7642 200.657 38.3455 202.155 48.3726 197.888C52.9907 195.923 56.4647 192.001 61.086 190.248C67.4757 187.823 68.773 191.135 71.9832 195.231C75.1631 199.287 84.2054 192.684 88.7263 192.684C95.5961 192.684 100.048 197.888 107.172 197.667C114.2 197.449 118.765 193.362 125.845 193.736C129.527 193.93 133.271 194.851 136.855 195.674C138.586 196.071 139.184 198.006 140.658 198.885C143.675 200.684 142.868 201.653 146.845 201.653C155.755 201.653 164.666 201.653 173.577 201.653C181.193 201.653 189.847 202.485 197.301 200.546C204.89 198.572 214.076 197.679 221.365 194.123C226.826 191.46 233.666 192.684 239.754 192.684C246.218 192.684 250.06 196.435 255.703 198.11C266.11 201.2 276.612 200.657 287.373 200.657C314.597 200.657 341.821 200.657 369.045 200.657C380.093 200.657 391.142 200.657 402.191 200.657C418.639 200.657 436.43 201.99 452.477 197.445C461.724 194.826 467.9 189.756 476.201 185.707C485.519 181.162 494.802 183.714 504.919 183.714C512.801 183.714 514.453 195.949 518.2 201.432C521.717 206.579 529.14 204.643 535 204.643" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 226C17.5718 226 30.8696 226 31.5 225.236C34.2321 221.926 36.3705 219.582 40 216.975C43.9771 214.118 49.4977 211.709 54.2222 210.256C60.3211 208.379 63.5827 217.395 69 218.737C73.719 219.907 80.7294 219.599 84.7778 216.975C87.0695 215.49 89.9175 215.1 92.5556 214.497C96.3058 213.639 100.443 211.277 104.222 211.027C108.997 210.711 112.254 214.001 117 214.001C121.63 214.001 125.086 215.742 127 220.169C130.031 227.181 135.791 228.337 143.278 228.816C153.447 229.466 162.623 228.403 172.389 225.456C176.873 224.103 181.046 222.314 185.444 220.445C190.447 218.319 193.977 213.955 199.056 212.018C203.806 210.207 209.915 210.872 212.944 215.378C215.118 218.61 226.301 214.496 230.056 216.589C232.329 217.857 233.683 220.342 236 221.491C239.586 223.268 244.051 223.914 248 223.914C257.074 223.914 266.148 223.914 275.222 223.914C288.688 223.914 303.912 226.476 316 220.169C320.533 217.804 324.584 215.984 330 215.984C331.398 215.984 332.761 214.997 334.056 215.157C336.983 215.52 337.974 219.857 339.778 221.711C344.569 226.637 351.715 221.506 357.444 221.932C363.475 222.38 368.043 227.748 373.778 227.88C379.105 228.003 384.449 227.88 389.778 227.88C398.093 227.88 409.712 230.353 417.5 227.384C422.429 225.505 429.713 226.888 435 226.888C437.594 226.888 447.363 228.295 449.056 226.338C451.119 223.951 454.417 224.162 456.556 221.436C459.14 218.142 460.665 216.363 464 214.001C468.518 210.801 471.973 217.966 476.5 217.966C483.55 217.966 484.883 224.521 491.167 226.338C499.171 228.652 509.572 226.888 517.944 226.888C523.63 226.888 529.315 226.888 535 226.888" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 249.623C32 249.623 51.5 250.746 70.5 249.623C89.5 249.623 76.9346 243.932 80.8306 241.721C86.4104 238.555 91.6634 235.333 97.5558 232.541C103.43 229.758 106.515 226.26 110.339 232.425C112.729 236.278 115.511 241.52 120.419 242.244C128.335 243.411 136.224 241.281 143.733 239.397C153.826 236.864 158.626 244.38 167.554 246.427C174.354 247.986 181.635 240.353 188.784 242.767C196.034 245.215 202.637 249.623 210.465 249.623C215.383 249.623 220.301 249.623 225.219 249.623C252.812 249.623 280.406 249.623 308 249.623C317.888 249.623 327.79 249.781 337.677 249.623C344.906 249.507 351.382 246.361 358.4 244.859C366.742 243.072 375.183 240.486 383.742 240.21C388.112 240.069 392.299 238.107 396.356 240.443C403.208 244.389 407.603 247.531 415.897 247.531C424.293 247.531 435.014 244.558 442.984 247.299C461.537 253.68 480.877 251.715 500.311 251.715C511.979 251.715 523.615 250.669 535 250.669" stroke="green" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 272.808C34.2973 272.808 55.2046 273.035 75.5 272.808C81.3239 272.743 86.7793 263.97 91.0704 260.207C95.2635 256.529 97.4911 262.466 103.396 262.078C118.3 261.097 132.439 264.279 147.175 265.875C174.81 268.868 160.755 268.076 188.5 268.076C237.503 268.076 328 269.066 378.286 267.085C381.879 267.085 385.511 267.206 389.105 267.085C392.772 266.963 396.382 263.037 399.535 265.214C405.64 269.432 414.706 270.342 422.121 269.011C429.569 267.675 433.003 270.481 440.079 272.808C442.534 273.616 448.078 271.921 450.843 272.148C456.86 272.643 457.539 262.078 463.5 262.078C466.541 262.078 470 267.085 476.5 272.808C491.5 274 493.537 272.808 498.5 272.808C504.077 272.808 499.921 269.066 505.498 269.066C515.332 269.066 525.166 269.066 535 269.066" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</svg>
</body>
</html>
