hpo-react-visualizer 0.0.1

package/src/svg/Digestive.tsx

@@ -0,0 +1,28 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Digestive({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[200];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="digestive">
+      {/* Invisible outline for interaction  */}
+      <path d={OUTLINE_PATH} fill="transparent" />
+      {/* Digestive system */}
+      <path
+        d={DIGESTIVE_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const OUTLINE_PATH =
+  "M10.3631 34.821C10.2896 34.77 10.2087 34.7538 10.1453 34.7507C10.0651 34.7467 9.98982 34.7619 9.9432 34.7731L9.93148 34.777C9.13136 35.0133 7.33424 35.2736 5.74789 35.2936H5.73226L5.71761 35.2956C5.58409 35.3132 5.43649 35.3486 5.31918 35.444C5.18888 35.55 5.1334 35.6978 5.12289 35.8551L5.12191 35.8678L5.12289 35.8805C5.15764 36.8622 5.25577 38.669 5.32211 39.8454V39.8493C5.32662 39.9138 5.33374 39.9966 5.34847 40.0778C5.36221 40.1535 5.38698 40.2543 5.43929 40.3395L5.46078 40.3757C5.45373 40.3773 5.44634 40.3788 5.43929 40.3805L5.42757 40.3835L5.41586 40.3874L5.37484 40.402C4.17599 40.8137 3.67489 42.1776 3.8475 43.3385C3.86698 43.5967 3.87072 43.8366 3.82015 44.0456C3.12725 45.4568 2.69468 46.9689 2.74007 48.6198C2.78585 50.2832 3.31675 52.0691 4.52523 54.0173L4.53695 54.0368L4.55257 54.0544C4.72123 54.2396 4.91365 54.3261 5.10726 54.3551C3.67344 55.2316 3.3722 56.9084 3.58675 58.5915C3.82231 60.4389 4.68385 62.4029 5.51351 63.6491L5.51839 63.6559L5.5223 63.6618C5.65876 63.8414 5.84071 63.9212 6.03695 63.9069C6.10257 63.9021 6.16518 63.8839 6.22543 63.863L6.22224 63.8705C6.21322 63.8917 6.2041 63.9131 6.19711 63.9352C6.08211 64.2991 6.25564 64.636 6.61703 64.9811L6.61898 64.9831C7.2001 65.5242 7.8045 65.798 8.40609 65.9831C8.69513 66.072 8.98587 66.1411 9.26898 66.2084L9.29476 66.2145L9.30727 66.2175C9.59691 66.2864 9.87962 66.3536 10.161 66.4421C10.3891 66.5284 10.6043 66.5445 10.7957 66.4528C10.8366 66.4332 10.8731 66.4085 10.9071 66.3825C10.8962 66.4138 10.8851 66.4413 10.8719 66.4665C10.8378 66.5316 10.7911 66.5839 10.6815 66.6296C10.5586 66.6807 10.3613 66.7221 10.0321 66.7438L10.0203 66.7448C7.91841 66.9812 6.77946 68.2385 6.72054 69.6598C6.66243 71.0659 7.66939 72.5133 9.59652 73.1286L9.60726 73.1315C10.1911 73.2913 10.7002 73.5783 11.0506 74.0329L11.0604 74.0446C13.0241 76.312 16.0659 76.8451 18.1493 75.5758L18.1502 75.5768C18.6898 75.268 19.1279 74.8493 19.3709 74.3464C19.6154 73.8403 19.6543 73.2636 19.4198 72.6657C19.3355 72.3716 19.2244 72.0327 19.0448 71.7389C18.9621 71.6037 18.8625 71.4755 18.743 71.3639C18.7899 71.3738 18.8361 71.3856 18.8807 71.3932C19.0125 71.4157 19.161 71.4303 19.3065 71.4079C19.3641 71.4059 19.4224 71.4004 19.4754 71.3932C19.4246 71.5329 19.3858 71.723 19.4657 71.9176L19.4754 71.9401L19.4891 71.9606C20.1452 72.9492 21.1424 73.2096 22.1483 73.1549C23.1411 73.101 24.1823 72.7389 25.0008 72.4411L25.0018 72.4421C25.9885 72.1036 27.1225 71.8297 28.2547 71.4899C29.368 71.1558 30.4617 70.7609 31.2899 70.1921L31.2909 70.193L31.2987 70.1872C32.1837 69.5313 32.5731 68.6921 32.5858 67.8317C32.5871 67.7388 32.5822 67.6459 32.575 67.5534C32.6814 67.5996 32.7935 67.6052 32.8983 67.5827C33.0301 67.5543 33.1504 67.4835 33.2508 67.4079C33.3537 67.3304 33.4518 67.2354 33.5399 67.1383L33.5389 67.1374C35.2046 65.4059 35.6239 63.6091 34.9227 62.194C34.7967 61.9398 34.6353 61.7027 34.4432 61.4831C34.59 61.524 34.7505 61.5402 34.9188 61.5007L34.9461 61.4938L34.9715 61.4811C36.0255 60.9646 36.955 59.9507 37.6483 58.8288C38.3428 57.7049 38.8201 56.4403 38.9481 55.3923L38.9491 55.3874C39.1094 53.776 37.9888 52.9277 37.2909 52.154C36.9526 51.6552 36.8756 51.301 36.911 51.0329C36.9473 50.759 37.1071 50.5185 37.3612 50.2633C37.4875 50.1364 37.6305 50.0123 37.784 49.8805C37.9353 49.7507 38.0981 49.6139 38.2518 49.4684C38.5588 49.1778 38.8549 48.8334 39.0057 48.3883L39.118 48.0583H39.0692C39.1933 47.1332 38.7558 46.4056 38.1893 45.7985C37.877 45.4638 37.516 45.154 37.1759 44.8621L37.1746 44.861C36.83 44.5652 36.5091 44.2891 36.2528 44.0065C35.9013 43.6074 35.5685 43.1857 35.2391 42.7565L34.243 41.4635L34.2381 41.4567L34.0789 41.278C32.3996 39.4603 29.6597 38.8176 26.9364 38.8014C24.1163 38.7847 21.2436 39.4385 19.4149 40.2389L19.369 40.2585C17.9381 40.8399 16.5249 41.6804 15.37 42.4059C15.3355 42.4274 15.2998 42.4507 15.2655 42.4743L15.1707 42.5456C15.1474 42.5652 15.1215 42.5892 15.0985 42.6169C15.0781 42.6413 15.0406 42.6922 15.0272 42.7633C15.0099 42.855 15.0382 42.9486 15.1063 43.0143L15.1082 43.0163C14.4746 43.1187 13.8551 43.3324 13.3504 43.7311L13.3426 43.738C12.9728 44.0575 12.7465 44.4523 12.576 44.8737C12.5747 44.8088 12.5754 44.7439 12.5711 44.6794C12.5155 43.8425 12.2013 43.0253 11.5018 42.4733L11.493 42.4665L11.4842 42.4606L10.9813 42.1344C11.0385 42.0657 11.0561 41.9892 11.0614 41.9489C11.0684 41.8947 11.0661 41.8401 11.0623 41.7965C11.0548 41.7098 11.0362 41.6172 11.0272 41.57L11.0252 41.5602L10.9481 41.1842C10.7857 40.294 10.7405 39.3263 10.7108 38.3395C10.6771 37.2211 10.6638 36.0734 10.5096 35.0319L10.4989 34.9606L10.451 34.9049L10.4344 34.8854L10.4334 34.8835L10.3631 34.821Z";
+const DIGESTIVE_PATH =
+  "M18.2402 0.687988C18.1695 0.0719823 21.8384 -0.326558 21.9102 0.361816C22.079 1.9475 22.6655 5.43048 23.7686 8.44482C24.7393 8.24136 25.9177 8.25193 26.9346 8.29053C27.1336 8.29808 27.3268 8.30677 27.5107 8.31494H27.5186C29.3091 8.39466 32.6951 9.50924 33.707 9.98682C34.719 10.4644 35.7309 9.78782 35.8477 10.8228C35.8779 11.0904 35.7973 11.3867 35.6533 11.6929C39.4259 12.2104 41.0912 15.1873 41.3291 18.9907C41.5554 22.6087 40.7828 27.748 37.043 32.2163C37.1865 32.1869 37.314 32.1594 37.4316 32.1323L37.4395 32.1304C37.8377 32.0386 38.1297 31.9722 38.5908 32.0112C39.2755 32.0692 40.3034 32.4467 40.708 33.4038C41.0317 34.1696 40.656 35.1548 40.4277 35.5513C40.5626 36.1994 40.7142 37.6808 40.2412 38.4233C41.0188 39.7578 40.5521 41.7015 40.1787 42.0786C40.4524 44.3064 39.5452 45.7912 39.0576 46.2554C39.3896 46.4681 40.0166 47.2133 39.8672 48.4897C39.7178 49.7661 39.2651 50.6851 39.0576 50.9849C39.234 51.1299 39.5688 51.7621 39.4941 53.1313C39.4194 54.5004 39.0067 55.7322 38.8096 56.1772C39.0481 56.7671 39.3629 58.3181 38.7158 59.8032C38.0686 61.2883 37.3675 61.4858 37.0977 61.3989C37.1703 61.6697 37.1596 62.4493 36.5371 63.4009C35.8903 64.3896 35.2215 64.9757 34.6211 65.1792C34.5159 65.4075 34.387 65.6377 34.2354 65.8706C34.0322 66.8945 33.0834 67.7462 32.3027 68.1997C32.1995 68.8482 31.843 69.4729 31.1494 69.9868C29.5619 71.0774 26.9007 71.5264 24.9209 72.2056C24.4026 72.3942 23.8093 72.6014 23.2031 72.7427C23.2505 72.9609 23.2793 73.1939 23.2793 73.439C23.2792 75.0049 22.8125 75.5851 22.9678 76.2231C23.1234 76.8614 24.1818 78.8634 23.9951 80.314C23.8084 81.7645 22.8432 83.0116 21.7539 83.7368C20.6655 84.4615 21.2243 85.4474 21.1631 85.6226C21.1008 85.7966 20.8517 86.0005 20.416 86.0005C19.9804 86.0005 19.5756 85.884 19.6377 85.478C19.6999 85.0719 19.7314 84.4042 19.2334 83.853C18.7354 83.3018 17.0551 82.3153 16.6816 79.9946C16.3082 77.6739 16.9305 76.5426 16.8994 75.9624C16.8977 75.9302 16.887 75.8914 16.8701 75.8462C15.0346 76.3247 12.8022 75.674 11.249 73.8804C10.8565 73.371 10.2933 73.0599 9.67285 72.8901C5.98465 71.7128 6.03133 67.4445 10.0488 66.9927C11.399 66.9034 11.0304 66.4838 11.417 65.5083C11.5931 65.1226 11.8641 64.6902 11.7861 64.5981C11.7368 64.4749 11.4021 64.8319 11.3242 65.0103C10.9751 65.5743 11.021 66.5122 10.2363 66.2046C9.05596 65.8333 7.88095 65.816 6.79004 64.8003C6.28525 64.3182 6.34304 64.0208 6.63477 63.6919C6.14814 63.7165 5.23934 63.7053 4.5127 63.4302C3.51681 63.053 1.96042 61.4573 2.52051 58.3823C0.964497 57.8021 0.684332 55.336 1.55566 54.2046C0.933397 53.8098 1.00601 51.99 1.12012 51.1294C0.767373 50.7619 0.0625 49.7716 0.0625 48.7505C0.0625432 47.7296 0.456194 47.0296 0.65332 46.8071C0.456227 46.4204 0.0625568 45.4436 0.0625 44.6313C0.0625 43.8191 0.456213 43.2094 0.65332 43.0063C0.456191 42.7548 0.106025 42.0428 0.280273 41.2075C0.454658 40.3723 0.97531 39.8348 1.21387 39.6704C0.975264 39.1869 0.641219 38.0748 1.21387 37.4946C1.78645 36.9145 2.26176 36.6915 2.42773 36.6528C2.53172 36.2852 2.93811 35.5738 3.73438 35.6665C4.11943 35.7114 4.4472 35.8536 4.70312 36.0151C4.97986 36.0247 5.20612 36.0688 5.38379 36.1235C5.38022 36.0347 5.37584 35.9505 5.37305 35.8716C5.38748 35.6557 5.51142 35.5751 5.75098 35.5435C7.35269 35.5233 9.17355 35.2607 10.002 35.0161C10.0857 34.996 10.1874 34.9821 10.2451 35.0483L10.2617 35.0679C10.3695 35.7956 10.4064 36.5769 10.4316 37.3726C10.6526 37.5571 10.8215 37.7223 10.9238 37.8423C11.2767 37.6682 12.2247 37.3841 13.1953 37.6392C14.4088 37.9582 14.7826 38.5094 15.0938 38.4517C15.405 38.3936 16.7751 38.1911 17.6465 38.5103C18.5176 38.8293 19.1403 39.2349 19.2959 39.2349C19.4519 39.2343 19.9187 38.8873 21.0068 39.061C21.5987 39.1556 22.2815 39.3286 22.792 39.4712C23.0253 39.4235 23.263 39.38 23.5039 39.3394C23.5987 39.1924 23.7486 39.027 23.9756 38.8804C23.6973 38.9467 23.3703 38.9966 22.9082 38.9966C19.8441 39.1053 18.7036 36.7496 18.3828 36.4595C18.0621 36.1695 16.8507 36.1694 15.96 35.1909C15.0693 34.2125 14.3926 32.618 14.25 32.2915C14.1075 31.9654 13.7153 32.2551 13.0742 32.2915C12.4329 32.3277 11.9334 31.1321 11.5059 31.5308C10.6938 32.3405 10.5182 33.5117 10.6152 34.6118C9.66486 34.9259 7.32037 35.4813 5.54395 35.1909C5.4554 33.9815 5.54399 32.7141 5.84473 31.5259C4.21284 32.8947 2.55531 34.1455 1.86816 33.9868C0.661581 33.7082 0.77818 30.3246 0.739258 29.3296C0.700239 28.3343 1.95074e-05 24.8324 0 23.3599C0 21.8873 0.388706 15.2002 6.38281 9.27002C7.15359 8.58696 8.74223 7.43968 10.5479 6.70166C11.4775 6.3217 12.4647 6.0497 13.4277 6.00635C16.9697 5.84715 19.189 8.55378 19.8896 9.7876C20.5902 11.0213 20.6293 20.1348 20.4736 22.4438C20.4379 22.9737 20.3071 23.4624 20.1016 23.9175C19.4113 25.4449 17.3978 26.1455 15.6465 26.8618C15.3676 26.9759 15.0877 27.0714 14.8086 27.1538C15.1171 27.301 15.3323 27.4237 15.4258 27.4712C15.9246 27.7245 16.7799 27.2178 19.2734 29.1743C21.7675 31.1314 24.7249 27.6164 25.6514 23.4849C25.7583 23.0081 25.8432 22.5785 25.9092 22.1851C24.0949 23.3468 22.334 24.0449 21.8359 23.7573C21.7809 23.7255 21.729 23.6717 21.6816 23.5981C20.9588 22.4743 21.0957 16.7791 21.0957 15.3599C21.0957 14.4238 21.1409 12.756 21.3965 11.3472C19.4441 7.00345 18.2989 1.19502 18.2402 0.687988ZM28.0723 42.8901C28.0469 42.9272 27.9886 42.9869 27.8916 43.063C31.3009 43.9328 33.3751 47.6767 32.4346 51.2671C32.2672 51.9663 32.0302 52.7807 31.459 53.2671C30.5296 54.1104 28.8784 54.1733 28.2578 52.9702C27.9204 52.3257 28.0556 51.5576 28.3008 50.8843C28.6183 49.9546 28.7458 48.4717 28.1426 47.7896C27.5999 46.9406 26.2575 46.8399 25.3281 46.3794C25.1985 46.3162 25.1033 46.2817 25.0771 46.3218C25.0396 46.3736 25.1316 46.5439 25.3076 46.6792C25.9165 47.1252 26.7826 47.0414 27.3916 47.4585C28.65 48.1464 28.4367 50.6968 27.4785 51.9546C26.3212 53.4856 24.024 53.437 22.3125 52.9536C22.1191 52.9104 21.8357 52.9449 22.0781 53.1089C22.4215 53.388 23.9913 53.5609 24.3467 53.5581C25.4983 53.5667 26.6159 53.1953 27.5049 52.4556C27.7961 52.3466 27.8219 52.7175 27.9229 52.9419C27.9691 53.103 28.0963 53.2701 28.0703 53.4341C27.9953 53.5577 27.7763 53.5007 27.6377 53.5063C26.1774 53.3682 25.4496 54.772 24.1885 55.2183C18.6181 57.4258 17.723 48.3165 23.7637 49.4272C24.0234 49.4157 24.2746 49.3383 24.4795 49.1772L24.4824 49.1714C24.7508 48.9901 25.833 48.1585 24.9873 48.478C24.416 48.8119 23.9165 49.2946 23.2441 49.0327C21.2642 48.4335 21.3215 46.5288 22.3066 45.0044C21.6652 45.0923 20.9887 45.1083 20.3877 45.0249C21.6524 46.6653 21.7038 49.0263 19.7344 50.3628C19.0187 50.9816 18.7385 51.9119 18.626 52.853C18.5742 53.0296 18.601 53.7759 18.8115 53.3647C18.9067 53.1631 18.9267 52.6392 19.0479 52.4839C19.2642 52.2025 19.2935 53.0772 19.3281 53.2153C19.7377 54.7493 17.942 56.0246 16.623 56.0103C13.4198 55.7395 14.4412 51.3017 15.5205 49.4077C15.838 48.7227 17.2467 48.0459 16.9639 47.2544C16.7502 46.8659 15.9017 46.8546 15.3389 46.6157C15.0849 46.5265 14.8683 46.4541 14.8105 46.4829C14.7645 46.5031 14.8168 46.5836 14.9668 46.6929C15.2236 46.8914 15.7658 47.0413 15.9824 47.1909C16.2074 47.3348 16.1641 47.6053 16.1035 47.8354C15.9881 48.4399 15.5525 48.8206 15.2148 49.356C14.7618 50.0985 14.5189 51.0079 14.3486 51.8511C14.2476 52.4755 13.8839 52.9012 13.3125 53.189C12.0887 53.8509 10.5045 53.9891 9.18555 53.5171C8.54368 53.2702 8.0816 52.8671 7.76074 52.3647C7.7687 52.5198 7.76616 52.6763 7.74902 52.8325C7.75429 52.8393 7.75933 52.8463 7.76465 52.853C8.26249 53.2137 8.62519 53.7859 8.84082 54.4224C10.2331 55.0415 11.3169 56.3927 11.5869 58.0015C11.535 58.226 11.3008 58.3414 11.1045 58.4565C10.9286 58.549 10.7291 58.6704 10.5371 58.7993C10.5643 58.8877 10.5864 58.979 10.6064 59.0728C11.0693 58.79 11.6203 58.5909 12.0283 58.312C12.839 57.6876 12.1875 57.4201 11.6709 56.8677C11.44 56.6058 11.2639 56.2977 11.0879 55.9927C10.9003 55.6675 10.5247 55.2908 10.2822 55.0347C10.1437 54.8908 10.1585 54.6632 10.3086 54.5337C10.5453 54.3323 11.0388 54.1624 11.2783 54.0962C11.7545 53.9552 12.2709 53.917 12.7471 53.7817C14.3832 53.2782 14.0518 54.3863 14.7412 55.3677C15.1049 55.9318 15.8695 56.0794 16.2188 56.6694C17.8398 60.2119 13.243 63.5436 10.1533 62.2212C10.1097 62.2951 10.0647 62.3657 10.0195 62.4331C10.5943 62.7438 11.2531 62.9169 12.0254 62.8892C12.6487 62.8892 13.1885 63.1936 13.6416 63.6079C14.0861 63.9878 14.1008 64.6016 14.3721 65.1196C14.6233 65.7066 15.2785 66.0465 15.4834 66.6479C16.0055 70.1016 11.6411 72.1738 8.95117 70.3491C8.39185 70.1365 8.87712 70.5855 9.01562 70.8013C9.14219 71.0169 9.04992 71.1867 9.24023 71.2212C10.5072 71.1636 11.9676 71.3998 13.1855 71.02C13.5636 70.8876 13.7631 70.9969 13.792 71.394C13.795 72.2027 14.3666 73.0173 14.3955 73.8433C14.3984 74.0559 14.3776 74.257 14.4062 74.3579C14.4235 74.424 14.4587 74.4391 14.499 74.4019C14.7328 74.045 14.7991 73.8807 15.2607 74.1655C15.4064 74.2888 15.7546 74.4031 16.0127 74.4526C15.9399 74.3391 15.8654 74.2215 15.791 74.1001C14.4275 73.4538 13.454 71.3489 14.5225 70.0874C14.6605 69.9323 14.7818 69.7739 14.8936 69.6167C15.4795 67.9155 16.6099 67.2569 16.7744 67.0269C16.8199 66.9633 16.9024 66.8639 17.0166 66.7446C14.9851 66.1394 13.9747 64.7203 14.5713 62.4888C14.6723 62.0975 14.8712 61.6975 15.1279 61.4097C15.4281 61.1017 15.7375 60.73 16.0723 60.4595C16.2076 60.3762 16.2309 60.3563 16.418 60.3247C16.9115 60.3017 17.541 60.8224 17.9307 61.1821C18.8283 62.0859 18.1244 62.8256 18.667 63.9683C18.8286 64.282 18.9732 64.8229 19.2012 65.0444C19.4515 65.1125 19.1691 64.2996 19.0508 64.1323C18.5775 63.3582 18.5975 62.2703 19.4053 61.7349C21.9278 60.008 25.6716 60.7041 26.3818 63.6108C26.5019 63.9713 26.5273 64.3245 26.4814 64.6646C26.6104 64.6725 26.7298 64.6884 26.8359 64.7046C26.8928 64.5893 26.9647 64.484 27.0713 64.397V64.4087C27.1498 64.3622 27.2296 64.3205 27.3096 64.2827C27.3979 64.0596 27.5074 63.8083 27.6426 63.5503C27.0647 63.3432 26.5539 63.0313 26.2031 62.5005C25.6345 61.6601 24.3411 60.9172 24.0352 59.8667C23.4492 57.7915 24.7828 54.7752 26.7686 53.7563L26.8232 53.7358C29.721 52.9357 30.2116 56.3843 29.6689 59.0581C29.6343 59.2653 29.5451 59.5362 29.3662 59.6196C29.118 59.7519 28.7308 59.5354 28.5576 59.3022C28.2866 58.9283 28.298 58.5168 28.4912 58.0249C28.6298 57.668 29.2101 56.9022 28.7656 57.1382C27.8653 57.7714 27.77 59.4722 28.8838 59.9185C29.1519 60.0259 29.5185 60.0357 29.8574 60.0444C29.9727 59.8544 30.1 59.6784 30.2354 59.5181C29.9796 59.1876 29.9692 58.7401 30.0244 58.3354C30.1918 56.9194 30.3094 55.7391 29.6514 54.7231C29.2449 54.1451 29.698 54.2626 30.1279 54.231C30.6213 54.2338 31.1697 53.8284 31.542 54.061C31.9261 54.4385 32.2785 54.8865 32.5977 55.3628C32.6242 55.3341 32.6498 55.3047 32.6777 55.2778C31.7985 53.8246 32.2239 52.2989 32.7373 51.3735C32.7493 50.7413 32.8041 50.0949 32.8633 49.4722C32.8156 48.7424 32.8983 47.8999 33.2744 47.1548C32.103 46.0381 31.2745 44.5436 29.8828 43.645C29.5164 43.383 29.1479 43.1767 28.7783 43.0181C28.3878 43.0569 28.162 42.9784 28.0723 42.8901ZM25.4521 70.8989C24.5818 71.3054 23.5532 71.4672 22.5781 71.3765C22.647 71.4696 22.7188 71.5721 22.7861 71.686C23.8012 71.758 24.8297 71.5758 25.6309 71.1294C25.6659 71.1068 25.7025 71.0858 25.7393 71.0669C25.6396 71.0201 25.5432 70.9647 25.4521 70.8989ZM22.377 64.2583C21.5828 64.2527 20.8295 64.6491 20.2354 65.1763C20.5883 65.0948 20.8885 65.0346 21.0723 65.0015C21.09 64.9917 21.1071 64.9808 21.125 64.9712C21.3413 64.7477 21.8134 64.3863 22.377 64.2583ZM21.1689 56.1304H21.2236C22.0087 56.1678 22.9122 56.3212 23.6973 56.7271H23.6943C24.0002 56.8968 23.9887 57.2156 23.8906 57.5034C23.6049 58.3639 23.6197 59.1355 23.7812 59.9097C23.7784 60.5342 22.3955 60.2123 22.0029 60.1519C21.8299 60.1115 21.7405 60.0162 21.7549 59.8608C21.7259 59.6365 21.3681 59.8554 21.2324 59.9302C17.4948 63.1102 14.9065 57.5379 18.4883 56.4097C18.6866 56.3604 20.1827 56.0672 21.1689 56.1304ZM11.8975 43.2886C12.5553 44.3502 12.3999 45.8803 11.8525 46.9956C11.6476 47.4129 11.4828 47.842 11.4453 48.314C11.4769 49.5486 10.8448 50.988 11.5605 52.0874C11.6327 52.1506 11.6758 52.0837 11.6758 51.9341C11.6468 51.4679 11.4253 50.9984 11.5205 50.5093C11.5841 49.9252 11.8122 49.39 11.8555 48.8462C11.8872 48.1785 11.8813 47.5021 12.1699 46.8833C12.6259 45.7235 12.7065 44.618 13.5059 43.9272C13.6378 43.823 13.7792 43.732 13.9277 43.6528C13.3975 43.7013 12.672 43.6343 11.8975 43.2886ZM7.14844 49.8403C7.08556 49.9714 6.99893 50.0988 6.88477 50.2212C6.88511 50.2267 6.88539 50.2323 6.88574 50.2378C6.98368 50.3244 7.08668 50.4491 7.1875 50.6021C7.15968 50.3534 7.14729 50.0986 7.14844 49.8403ZM6.67578 44.4585C6.61724 44.5299 6.5414 44.5896 6.44238 44.6313C6.47692 44.662 6.50901 44.6937 6.54004 44.7251C6.822 44.8758 7.10616 45.0064 7.36426 45.0991C7.90374 45.2689 7.8376 45.6081 7.62988 46.0483C7.3527 46.7148 7.13846 47.4574 7.00879 48.2134C7.09804 48.3854 7.17338 48.5693 7.22266 48.7593C7.26019 48.4735 7.31011 48.1892 7.37012 47.9106C7.52308 46.9725 8.00477 46.1725 8.19531 45.3149C8.17511 45.0185 7.81182 44.9716 7.57227 44.8882C7.27712 44.8034 6.973 44.6454 6.67578 44.4585ZM35.043 39.1196C34.5257 39.7901 33.4616 40.3199 32.8555 40.5591C33.2998 40.8593 33.7011 41.2107 34.0479 41.6187C34.1409 41.7355 34.2299 41.8568 34.3223 41.9761C34.5532 41.679 34.7745 41.5057 34.8877 41.4976C34.5644 40.7088 34.8563 39.584 35.043 39.1196ZM26.7607 38.3354C26.5149 38.3789 26.2914 38.4137 26.0928 38.4409C26.2815 38.4561 26.4268 38.4838 26.5156 38.5103C26.5779 38.4595 26.6614 38.3999 26.7607 38.3354ZM31.5615 36.688C30.7304 37.1256 29.9367 37.4565 29.2061 37.7065C29.9001 37.726 30.3449 37.7821 30.499 37.814C30.7083 37.562 31.1688 37.0407 31.5615 36.688ZM33.8154 35.2671C33.398 35.5771 32.984 35.8574 32.5752 36.1099C32.9723 35.9607 33.3934 35.8421 33.6426 35.7827C33.6804 35.6523 33.7425 35.4659 33.8154 35.2671Z";

package/src/svg/Ear.tsx

@@ -0,0 +1,23 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Ear({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="ear">
+      <path
+        d={EAR_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const EAR_PATH =
+  "M7 5C7 7.76142 5.433 10 3.5 10C1.567 10 0 7.76142 0 5C0 2.23858 1.567 0 3.5 0C5.433 0 7 2.23858 7 5Z";

package/src/svg/Endocrine.tsx

@@ -0,0 +1,32 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Endocrine({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale.alpha[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="endocrine">
+      <path
+        d={THYROID_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={PANCREAS_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const THYROID_PATH =
+  "M16.3514 1.45426C16.5695 0.895968 16.8771 -0.205317 17.6639 0.0333582C18.5597 0.579989 18.4738 2.02377 18.5945 2.97086C18.6997 4.58384 18.9685 6.0701 18.9725 7.63687C19.1399 9.69269 18.5985 11.5562 16.9158 12.8537C15.9615 13.5313 15.1274 14.7058 13.9744 14.9445C11.8869 15.0712 11.8009 12.7962 9.53007 14.5324L9.52616 14.5363L9.45976 14.5783C8.13933 15.5137 7.16967 14.7368 6.13359 13.7629C4.69628 12.6002 3.13447 11.2641 3.04863 9.28922C2.87334 7.20259 3.23555 5.14647 3.37968 3.06754C3.45369 2.2706 3.55137 -0.57099 4.87968 0.1066C5.19893 0.352978 5.37818 0.788015 5.52616 1.16519C5.904 2.25854 6.37152 3.32522 6.59745 4.5148C6.79221 5.52727 7.07271 6.53579 7.62577 7.36734C8.54897 8.63397 10.5669 10.5285 12.2107 9.33121C14.3956 8.10313 15.1279 6.24367 15.5408 3.88394C15.7628 3.02541 16.0826 2.2589 16.3514 1.45426Z";
+const PANCREAS_PATH =
+  "M23.9568 83.6427C24.7128 82.9852 26.0133 82.4862 25.9998 83.9591C25.967 85.6442 24.3822 86.8249 23.2254 87.9406C17.0779 93.7318 11.0597 91.5179 8.91386 95.049C7.4156 100.198 1.51001 100.411 0.0251878 95.1193C-0.153622 93.4263 0.651082 91.6376 1.44218 90.1232C3.40645 87.3402 9.13354 87.9014 11.8836 87.3888C14.6336 86.8762 21.5753 84.9579 23.9568 83.6427Z";

package/src/svg/Eye.tsx

@@ -0,0 +1,23 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Eye({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="eye">
+      <path
+        d={EYE_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const EYE_PATH =
+  "M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z";

package/src/svg/Growth.tsx

@@ -0,0 +1,23 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Growth({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="growth">
+      <path
+        d={GROWTH_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const GROWTH_PATH =
+  "M11.5469 10H6.77344V339H11.5469L5.77344 349L0 339H4.77344V10H0L5.77344 0L11.5469 10Z";

package/src/svg/Head.tsx

@@ -0,0 +1,51 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Head({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[200];
+  const gradientTransform = isActive
+    ? "translate(28 31.4667) rotate(90) scale(38.5333 32.542)"
+    : "translate(26 34) rotate(90) scale(40.8 32.4925)";
+
+  return (
+    <g className={className} data-organ="head">
+      <defs>
+        <path id="head_path" d={HEAD_PATH} style={{ transition: TRANSITION_STYLE }} />
+      </defs>
+      {/* Default state path (always visible as base) */}
+      <use
+        href="#head_path"
+        fill="url(#head_gradient_default)"
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+
+      {/* Gradient */}
+      <radialGradient
+        id="head_gradient_default"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform={gradientTransform}
+      >
+        <stop
+          offset={isActive ? "0.48" : "0.24"}
+          stopColor={isActive ? activeColor : defaultColor}
+          style={{ transition: TRANSITION_STYLE }}
+        />
+        <stop
+          offset="1"
+          stopColor={isActive ? defaultColor : "white"}
+          stopOpacity="0"
+          style={{ transition: TRANSITION_STYLE }}
+        />
+      </radialGradient>
+    </g>
+  );
+}
+
+const HEAD_PATH =
+  "M51.694 27.602C51.3998 26.8206 50.9501 26.2221 50.2895 26.0448C49.8343 25.9229 48.985 25.7955 48.3188 26.2166C48.1634 26.3164 48.0024 26.4327 47.847 26.5491C47.4695 26.8372 46.931 26.5602 46.931 26.0892V17.3724C46.931 11.4098 43.5558 6.15101 37.4217 2.57677C35.3566 1.36874 31.9371 0 25.9972 0C20.0574 0 16.6378 1.37428 14.5727 2.57677C8.43861 6.15655 5.06345 11.4098 5.06345 17.3724V26.0892C5.06345 26.5602 4.51943 26.8372 4.14749 26.5491C3.99206 26.4327 3.83107 26.3164 3.67564 26.2166C3.01504 25.7955 2.16015 25.9229 1.70494 26.0448C1.04434 26.2166 0.600244 26.8151 0.300476 27.602C-0.249098 29.0594 -0.0325992 31.1042 0.85005 32.8109C1.64943 34.357 2.90956 35.5318 4.30848 36.025L5.15227 36.3242L5.36877 37.1887C6.44016 41.5221 9.59327 47.529 15.2167 51.4025C16.1382 52.0342 16.6878 53.0705 16.6878 54.1621V61C16.6878 61 16.6878 68 26 68C35.3122 68 35.3122 61 35.3122 61V54.1621C35.3122 53.0649 35.8618 52.0342 36.7833 51.4025C42.4067 47.529 45.5543 41.5166 46.6312 37.1887L46.8477 36.3242L47.6915 36.025C49.0904 35.5262 50.3506 34.357 51.15 32.8109C52.0326 31.1042 52.2491 29.0538 51.6995 27.602H51.694Z";

package/src/svg/Heart.tsx

@@ -0,0 +1,23 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Heart({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="heart">
+      <path
+        d={HEART_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const HEART_PATH =
+  "M21.2501 15.6307C21.0524 15.1071 21.283 11.5402 18.7791 10.9185C18.7791 9.90077 18.174 9.20674 17.6484 8.75865C17.9884 8.75865 17.3295 7.77724 17.1648 7.48273C17 7.18822 16.1764 6.3374 16.2093 6.14106C16.2423 5.94472 16.3411 5.71565 16.6706 5.84655C17 5.97744 17.1318 5.94472 17.2307 5.81382C17.281 5.74723 17.3312 5.66369 17.3425 5.58476C17.6919 5.74838 17.7578 5.6502 17.8896 5.58476C18.0214 5.51931 18.1202 5.15935 18.0214 4.99573C17.9507 4.87874 17.5769 4.7283 17.1648 4.62812C17.7907 4.30853 17.7249 4.24309 17.7578 4.14492C17.7907 4.04674 17.3624 3.52317 17.1977 3.42499C17.0659 3.34646 16.6319 3.6103 16.4232 3.75203C16.5372 3.44999 16.5904 3.21866 16.5717 3.1632C16.5388 3.06503 16.1435 2.93414 16.0117 2.99959C15.9062 3.05194 15.8032 3.52303 15.7649 3.75203C15.7635 3.42446 15.4649 3.07029 15.3198 2.86849C15.1551 2.63943 15.188 2.21402 14.9574 2.11585C14.7268 2.01768 14.4303 2.37764 14.1338 2.76305C14.2254 2.47629 14.3569 1.94473 14.3314 1.91943C14.1667 1.78853 13.8373 1.82126 13.8043 1.91943C13.7055 2.23576 13.5012 2.93386 13.4749 3.19565C12.8748 3.73205 12.5176 4.13578 12.2559 4.51667C11.2675 4.10305 10.0485 3.88313 8.65228 4.5376C7.94795 3.8504 8.3353 2.57418 8.50003 2.21422C8.66476 1.85426 9.22484 1.55974 9.42251 1.4943C9.62019 1.42885 9.88376 1.69064 9.94965 1.69064C10.0155 1.69064 10.1473 1.62519 10.1144 1.4943C10.088 1.38958 9.88376 1.27614 9.78492 1.23251C9.83983 1.24341 10.0155 1.25869 10.2791 1.23251C10.4109 1.13434 10.3121 0.381691 10.1473 0.316244C9.98259 0.250796 9.29073 0.348967 8.65228 0.643481C8.67258 0.45237 8.45579 0.108613 8.36825 0.021657C8.26941 -0.0765141 7.90701 0.185275 7.90701 0.283447C7.90701 0.31617 7.94654 0.427431 8.10468 0.610683C8.30236 0.839749 7.90701 1.16699 7.90701 1.10154C7.90701 1.03609 7.77522 0.806901 7.70933 0.741454C7.64344 0.676006 7.31398 0.905072 7.37987 0.970519C7.70933 1.46137 7.41282 1.88678 7.14925 2.99939C6.88569 4.11199 7.41282 5.02826 7.57755 5.42094C7.41282 5.38822 6.81979 4.17744 6.19382 2.67215C5.93026 2.54126 5.04072 3.13028 5.10661 3.32662C5.66669 4.83191 6.68801 6.30448 6.81979 6.53355C6.83776 6.56478 6.84409 6.60939 6.84102 6.66464C5.00777 5.29024 3.65699 4.73394 3.36048 4.50488C3.06397 4.27581 2.60273 3.78495 2.33916 3.78495C2.0756 3.78495 1.54846 4.37398 1.54846 4.50488C1.54846 4.60959 2.51487 5.2248 2.99808 5.51931C2.64666 5.46477 1.79885 5.45386 1.219 5.84655C0.988383 5.6502 0.889546 5.61748 0.724817 5.81382C0.625979 5.91199 0.8566 6.14106 0.757763 6.20651C0.658925 6.27196 0.560079 5.97744 0.428296 5.91199C0.296512 5.84655 0.0658916 6.01017 0.0658916 6.14106C0.0658916 6.27196 0.263567 6.30468 0.164729 6.56647C0.0658916 6.82826 0 6.86098 0 6.99188C0 7.12277 0.560079 7.7118 0.922483 7.5809C1.02132 7.54818 0.889537 7.25367 1.35078 6.92643C1.81202 6.59919 3.03965 6.3374 4.41976 6.99188C4.04707 7.76537 3.75583 8.80285 3.75583 9.44595C3.75583 10.4605 4.05234 10.7876 4.44322 11.9657C4.27008 12.4064 4.09434 12.9259 4.05235 13.4055C3.98646 14.1581 4.25003 14.5508 4.84305 15.9252C5.43608 17.2996 6.32561 17.7577 6.52329 17.9541C6.72096 18.1504 6.95158 18.5104 7.08337 18.6413C7.18879 18.746 7.47872 18.8376 7.6105 18.8703C7.75327 19.1539 8.19694 19.8062 8.8295 20.1465C9.6202 20.5719 10.8721 20.8665 12.157 21.4228C13.4419 21.9791 14.9904 22.1754 15.4846 22.3063C15.9787 22.4372 17.4942 22.9608 17.8237 22.9935C18.1532 23.0262 18.6144 22.9281 19.2074 22.8626C19.8005 22.7972 20.657 22.3717 21.2501 21.9463C21.8431 21.5209 21.8101 20.9319 21.9749 19.7211C22.1396 18.5104 21.4477 16.1542 21.2501 15.6307Z";

package/src/svg/Immune.tsx

@@ -0,0 +1,32 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Immune({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale.alpha[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="immune">
+      <path
+        d={THYMUS_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={SPLEEN_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const THYMUS_PATH =
+  "M0.614776 3.27242C1.04131 2.33345 1.68513 -1.94956 2.84622 1.05074L2.86282 1.10934C3.01842 1.56854 3.02559 2.12277 3.18802 2.56832C3.26586 2.65675 3.37743 2.23175 3.61087 1.8066C4.08816 1.02415 4.80242 -0.860666 5.52005 0.768516C5.9669 1.90824 6.12332 3.04843 6.40091 4.23238C6.5567 5.47403 7.12546 6.66165 6.77005 7.91012C6.4382 9.16226 5.13149 12.2708 3.78763 10.0664C3.07336 8.03565 2.24345 10.6348 1.06204 9.71285C-0.119347 8.54251 -0.186757 6.75945 0.239776 5.23531C0.351409 4.56524 0.316938 3.93571 0.614776 3.27242Z";
+const SPLEEN_PATH =
+  "M18.0064 49.3486C15.4169 43.3983 26.9064 41.3201 29.4927 48.9375C29.8277 49.8422 30.0275 50.611 29.9937 51.2539C29.9497 52.0261 29.6649 52.8597 29.4956 53.6591C29.235 54.8873 28.9879 56.3062 27.9859 57.1601C26.6081 58.3372 24.7835 58.402 23.5513 56.5957C22.6779 55.2688 22.329 53.7951 21.2017 52.5839C20.1355 51.2337 18.8495 50.5533 18.0337 49.3935H18.0298L18.0064 49.3486Z";

package/src/svg/Integument.tsx

@@ -0,0 +1,58 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Integuments({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+  const opacity = isActive ? 1 : 0.65;
+
+  return (
+    <g className={className} data-organ="integuments" opacity={opacity}>
+      <path
+        d={ARM_PATH}
+        fill="url(#paint0_radial_795_165610)"
+        stroke={style?.stroke}
+        strokeWidth={(style?.strokeWidth ?? 1) * 0.5}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={LEG_PATH}
+        fill="url(#paint1_radial_795_165610)"
+        stroke={style?.stroke}
+        strokeWidth={(style?.strokeWidth ?? 1) * 0.5}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_795_165610"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(8 45.5) rotate(90) scale(61.5 22.8989)"
+        >
+          <stop offset="0.158654" stopColor={fill} style={{ transition: TRANSITION_STYLE }} />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id="paint1_radial_795_165610"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(79.5 195.5) rotate(90) scale(79.5 33.1161)"
+          style={{ transition: TRANSITION_STYLE }}
+        >
+          <stop offset="0.16" stopColor={fill} style={{ transition: TRANSITION_STYLE }} />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+    </g>
+  );
+}
+
+const ARM_PATH =
+  "M10.7774 0.000245649C10.4246 -0.0197181 9.99327 1.17811 9.42474 3.24435C9.01305 4.75162 8.53274 6.6881 8.04263 8.80425C6.12139 16.7398 4.72948 26.033 4.03352 33.7789C2.99448 47.2345 0.230258 60.3806 0.00480642 73.8461C-0.152029 77.9487 3.55321 89.328 7.62113 81.063C9.02285 77.3697 9.6992 73.2073 10.5716 69.3543C12.1106 62.0076 12.6497 54.4613 14.1004 47.0248C14.9826 42.1537 16.1981 37.5121 15.9726 32.5911C15.4923 25.3243 13.8357 17.3288 12.7477 9.44309C12.1596 6.60824 11.9047 1.3478 10.8069 0.000245649H10.7774Z";
+const LEG_PATH =
+  "M87.9145 140.163C84.0879 138.762 77.4422 146.755 74.7587 149.778C67.8515 157.573 68.52 164.403 69.8762 175.559C71.5619 190.274 72.0365 207.554 73.4703 221.325C73.8191 226.714 76.0181 240.593 82.5088 232.55C86.2094 227.28 88.0695 219.436 88.8638 212.675C90.7432 195.086 89.3192 177.846 89.7648 160.098C89.5323 155.574 91.2179 142.45 87.9823 140.203L87.9145 140.163Z";

package/src/svg/Kidney.tsx

@@ -0,0 +1,41 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Kidney({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="kidney">
+      <path
+        d={LEFT_KIDNEY_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={RIGHT_KIDNEY_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={BLADDER_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const LEFT_KIDNEY_PATH =
+  "M8.58428 12.0942C8.71329 11.3139 8.94842 8.45282 6.37448 6.69039C6.35992 6.69872 6.57424 6.56555 6.68868 6.49064C7.15894 6.18268 7.48562 5.78109 7.63544 5.31083C7.74364 4.97374 7.76029 4.60336 7.67498 4.20593C7.50227 3.40275 6.95294 2.68488 6.2642 2.26872C4.61622 1.2741 2.17962 2.0981 1.27655 3.71487C0.494178 5.109 0.0613737 6.69247 0.00727326 8.28844C-0.0426656 9.7762 0.148767 11.6343 1.0768 12.8578C1.75513 13.7505 2.67692 14.4497 4.08978 14.4392C5.86469 14.4288 7.0549 13.3198 7.44609 12.0984C7.5418 11.7987 7.68122 11.1828 7.67914 11.1953C7.3254 14.872 4.39565 21.8843 4.37068 24.3729C4.34572 26.9739 3.92956 29.912 6.81561 33.3453C6.96126 33.0332 7.27546 32.6961 7.41488 32.565C3.98158 29.0526 5.28207 24.0587 5.67118 21.6409C6.06237 19.223 8.45527 12.8766 8.58428 12.0963V12.0942Z";
+const RIGHT_KIDNEY_PATH =
+  "M24.9914 6.4704C24.9477 5.11373 24.7396 3.97138 24.184 2.73123C23.7096 1.67211 22.8399 0.723268 21.7433 0.296706C20.6925 -0.111128 19.419 -0.148582 18.4556 0.502704C17.5443 1.11862 16.7203 2.60222 17.2862 3.67799C17.4465 3.98178 17.7066 4.23148 18.0166 4.42915C18.2247 4.56232 18.6471 4.77872 18.6221 4.76624C16.1085 6.61398 16.4373 9.46466 16.5933 10.2408C16.7494 11.0169 19.3545 17.278 19.8248 19.6834C20.2951 22.0888 20.5073 29.0199 17.1926 32.6425C17.2717 32.7029 17.4798 32.9193 17.6878 33.2918C20.4574 29.7627 21.273 25.2017 20.8361 20.728C20.4823 17.122 18.1539 13.1539 17.5505 9.83296C17.6899 10.2574 17.9001 10.6528 18.131 10.9483C18.8468 11.8617 19.9892 12.3694 21.1232 12.4319C22.4154 12.5026 23.7471 11.4248 24.3422 10.3407C24.9477 9.23993 25.0309 7.70015 24.9914 6.4704Z";
+const BLADDER_PATH =
+  "M6.55252 33.7413C6.13636 34.8857 6.11139 36.2903 8.42522 37.6157C9.90675 38.4231 11.4174 38.5001 11.4673 40.0877L11.8232 48.2028C11.8232 48.2818 12.1103 48.3068 12.2393 48.3068C12.3683 48.3068 12.6305 48.2818 12.6305 48.2028L13.134 40.0877C13.2381 38.448 13.8894 38.7872 16.2032 37.6157C18.517 36.4442 18.413 34.6777 17.8928 33.7413C17.3726 32.8049 16.3572 30.8802 12.4037 30.8802C8.45019 30.8802 6.96867 32.5969 6.55252 33.7413Z";

package/src/svg/Limbs.tsx

@@ -0,0 +1,46 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Limbs({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[200];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="limbs">
+      {/* Invisible outline for interaction */}
+      <path d={OUTLINE_ARM_PATH} fill="transparent" />
+      {/* Limbs */}
+      <path
+        d={LEG_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={ARM_A_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={ARM_B_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const OUTLINE_ARM_PATH =
+  "M75.0376 0.000741462C75.1455 -0.00446766 75.2385 0.0185036 75.311 0.0466399L76.2339 0.35914C76.4201 0.41922 76.6133 0.479488 76.7993 0.534921L77.3227 0.681406L77.3872 0.697031L77.4448 0.728281C77.8255 0.929277 78.0916 1.29483 78.2827 1.66187C78.3276 1.7482 78.3691 1.83929 78.4097 1.93238C78.4253 1.85177 78.4468 1.77314 78.4761 1.69801C78.6321 1.29802 78.9488 1.09326 79.2905 0.971445C79.6035 0.859871 80.0215 0.789112 80.4995 0.707773C81.0606 0.612329 81.5979 0.658069 81.9761 1.02809C82.3318 1.37617 82.3978 1.87442 82.4028 2.27809C82.4081 2.69998 82.345 3.19609 82.2886 3.66969C82.2306 4.15632 82.1749 4.64776 82.1743 5.12965L82.1977 5.81129C82.3333 9.20228 82.7489 12.318 83.2104 15.2576C83.7009 18.3809 84.2496 21.3372 84.5552 24.1736C85.3084 31.1711 86.4232 35.1709 87.1606 37.1043C87.3191 37.4494 87.4312 37.747 87.4927 38.0017C87.5523 38.249 87.5816 38.5215 87.5005 38.7722C87.4036 39.0717 87.1762 39.2595 86.9097 39.3308C86.6849 39.3908 86.4546 39.3634 86.2768 39.3269C85.9161 39.2528 85.4883 39.0745 85.1304 38.9255C84.7378 38.7622 84.4139 38.6272 84.1723 38.572L84.1391 38.5652L84.1069 38.5535C83.8368 38.4551 83.6201 38.3823 83.4175 38.3113C83.2257 38.2441 83.0397 38.1759 82.8804 38.0955C82.7347 38.022 82.5881 37.9245 82.4624 37.7859C82.4688 37.8294 82.474 37.8719 82.4751 37.9128C82.4802 38.1005 82.4378 38.284 82.3823 38.4441C82.271 38.7651 82.0687 39.097 81.8393 39.3816C81.6095 39.6667 81.3233 39.9412 81.0181 40.1267C80.738 40.2969 80.3017 40.4742 79.8647 40.2908L79.6548 40.2029L79.5688 39.992C78.8096 38.1383 78.3304 35.5411 77.9975 32.6238C77.6635 29.6959 77.472 26.396 77.3071 23.115C77.1418 19.8269 77.003 16.5608 76.7759 13.6746C76.548 10.7798 76.234 8.3152 75.7309 6.62086C75.6478 6.35563 75.1874 4.8056 74.8325 3.35035C74.6535 2.61625 74.4956 1.88239 74.4302 1.34547C74.3992 1.09133 74.3798 0.819325 74.4175 0.605234C74.4335 0.514365 74.4795 0.306634 74.6567 0.153085C74.7603 0.0633896 74.8926 0.00774985 75.0376 0.000741462Z";
+const ARM_A_PATH =
+  "M76.2591 5.91508C76.1195 5.47456 74.3985 -0.330432 75.1257 0.0147994C75.5396 0.16328 76.5301 0.49839 77.1887 0.664855C78.13 1.16186 78.5153 3.65933 78.6639 5.20939C80.3199 14.5365 78.3002 30.2129 81.8368 37.1324C82.3033 37.629 80.823 39.5463 80.0784 39.2339C77.1628 32.1153 78.3433 12.9348 76.2591 5.91508Z";
+const ARM_B_PATH =
+  "M80.5927 0.699994C82.5801 0.361916 81.623 2.50052 81.6252 4.59545C81.8344 11.9773 83.4012 18.0455 84.0085 23.6833C84.767 30.7298 85.8942 34.7808 86.6533 36.7654C87.8978 39.4599 85.4873 37.7592 84.2955 37.4867C82.1073 36.6898 82.7145 37.3582 82.9172 32.5225C83.0972 28.1729 81.534 20.5908 81.3636 19.3164C81.1931 18.0409 79.6368 6.64123 79.2027 3.84486C78.7674 1.04302 78.6051 1.0382 80.5927 0.699994Z";
+const LEG_PATH =
+  "M2.9609 201.924L3.01106 201.874L2.9609 201.924ZM3.10133 201.764C3.05118 201.684 2.94084 201.724 2.93081 201.814C0.292715 202.883 1.61678 198.735 1.60675 197.276C1.70705 195.937 1.71709 191.989 1.66693 187.091C1.27573 175.817 1.82742 162.104 0.262623 151.6C-0.148639 150.23 -0.178731 148.921 0.924654 148.711C0.904592 148.171 0.734069 147.562 0.854439 147.292C1.29579 146.062 2.89069 146.652 3.91383 146.602C6.19081 146.732 9.24017 145.972 9.6414 148.401C4.58589 156.267 6.06041 162.514 5.77955 173.278C5.98017 183.523 6.06041 193.278 8.50792 201.194C9.14989 203.413 7.84589 203.363 6.42152 202.244C5.31813 201.834 4.04423 202.613 3.11136 201.764H3.10133ZM2.9609 201.924L2.98096 201.894L2.95087 201.924H2.9609ZM3.20164 162.454C3.41229 172.929 4.37524 183.633 3.65303 193.848C3.6129 194.468 2.86059 195.977 2.95087 193.738C3.29192 184.842 2.22865 171.679 2.22865 162.234C2.22865 159.356 3.17155 160.065 3.21167 162.454H3.20164Z";

package/src/svg/Lung.tsx

@@ -0,0 +1,23 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Lung({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[200];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="lung">
+      <path
+        d={LUNG_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={(style?.strokeWidth ?? 1) * 0.5}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const LUNG_PATH =
+  "M33.2828 0.0025112C34.8699 -0.0415173 36.4163 0.498309 37.7942 1.23643C41.7016 3.32998 44.4353 6.95516 46.5401 10.7125C50.8835 18.4641 53.087 27.4944 51.4705 36.133C51.331 36.8657 51.162 37.6098 50.7492 38.2378C49.2896 40.4796 45.7773 40.2429 43.1493 39.389C39.8294 38.3092 36.7069 36.6893 33.9568 34.6234C32.1892 33.2956 30.5377 31.7193 29.7004 29.736C29.1133 28.3422 28.9683 26.8159 28.8579 25.3231C28.6253 22.249 28.5258 19.153 28.4909 16.0515L28.4793 12.8552C28.4793 10.4975 28.4977 8.14536 28.5036 5.7987C28.5036 4.504 28.549 3.14229 29.2526 2.03491C30.0724 0.745774 31.6954 0.0465851 33.2828 0.0025112Z";

package/src/svg/Metabolism.tsx

@@ -0,0 +1,41 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Metabolism({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="metabolism">
+      <path
+        d={METABOLISM_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={TOP_ARROW_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={BOTTOM_ARROW_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const METABOLISM_PATH =
+  "M8.18819 6.4535C9.95429 5.36506 12.0337 5.3371 13.6799 6.40503C14.6837 7.04157 15.4717 8.03486 15.8044 9.27944C15.8329 9.386 15.87 9.5028 15.9368 9.58486C16.0001 9.66691 16.0925 9.71939 16.1867 9.76099C16.4115 9.85673 16.6278 9.9661 16.8087 10.1308L16.8172 10.1388V10.1394C17.9841 11.1748 17.1904 13.2548 15.6389 13.285C15.4426 13.2981 15.2223 13.2041 15.0586 13.3249C14.2797 14.296 13.2634 15.0453 12.02 15.2932C11.8294 15.324 11.665 15.41 11.5766 15.5895C11.1001 16.8444 9.57596 17.1293 8.55682 16.4928C8.04098 16.1885 7.64783 15.5844 7.64782 14.9109C7.6307 14.6652 7.77565 14.3888 7.6929 14.1603C7.66609 14.101 7.61644 14.0429 7.55198 13.9711C6.64525 13.0856 6.10542 11.8848 6.08316 10.6129C6.08145 10.4596 6.0569 10.3041 5.94736 10.1907C5.10626 9.55528 4.68339 8.97114 4.87454 7.86847C5.12276 6.5783 6.47631 5.86368 7.77677 6.38967C7.90687 6.44152 8.05353 6.48712 8.18819 6.4535ZM12.2648 9.22246C13.305 8.68849 12.7909 7.09854 11.6787 7.20796C9.98169 7.37494 10.7503 10.0003 12.2648 9.22246Z";
+const TOP_ARROW_PATH =
+  "M8.77994 0.215218C16.5962 -1.40543 23.5429 6.41726 20.5927 13.9199C20.6983 14.0003 21.4896 13.5005 21.6921 13.53C21.954 13.5688 22.1109 13.8982 21.9061 14.121C21.6652 14.3826 20.4378 14.6795 20.0795 14.9177C19.9682 14.9576 19.8456 14.9713 19.736 14.9177C19.526 14.8151 19.0061 13.2104 18.8241 12.9192C18.8532 12.522 19.28 12.4023 19.4997 12.7607C19.5454 12.8348 19.873 13.7632 19.9643 13.6925C21.675 9.31139 19.7868 4.49376 15.8517 2.10033C12.8394 0.26822 9.225 0.262476 6.12306 1.8957C5.48912 1.71335 5.74591 1.34582 6.19099 1.10591C6.88431 0.731509 8.00389 0.375919 8.77994 0.215218Z";
+const BOTTOM_ARROW_PATH =
+  "M2.1115 6.02777C2.27413 6.04658 2.3198 6.12982 2.40083 6.24436C2.49388 6.37668 3.18368 7.97938 3.18433 8.07928C3.18547 8.25764 2.95207 8.46734 2.77346 8.44056C2.47845 8.39555 2.25019 7.58578 2.1606 7.30996C2.03108 7.2866 2.06987 7.31682 2.03393 7.38292C1.93807 7.55673 1.78969 8.06447 1.73263 8.27818C-0.222918 15.585 7.01153 22.1492 14.1569 19.8304C14.4805 19.7256 15.7433 19.1004 15.8865 19.1016C16.1855 19.1033 16.331 19.5034 16.1273 19.7194C16.0364 19.8151 15.0545 20.2294 14.8588 20.304C6.57328 23.4673 -1.74935 15.2898 1.41878 7.02503C1.08211 7.11735 0.425305 7.60743 0.109177 7.33618C-0.0619905 7.18972 -0.0151903 6.99086 0.134309 6.85296C0.254149 6.74184 1.98463 6.01305 2.1115 6.02777Z";