This is a react component in which i have these detailed and beautiful svg.
import "./App.css";
import logo from "./assets/image_1711723636308_ynt4tg.svg";
function App() {
return (
<>
<div className="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
version="1.1"
>
<linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#196A0b" />
<stop offset="100%" stop-color="#32de13" />
</linearGradient>
<path
className="svg-path"
d="M 231 27.122 C 195.135 31.246, 158.690 44.757, 127.500 65.492 C 79.673 97.288, 46.347 145.740, 31.956 204.402 C 13.159 281.019, 34.767 358.611, 90.982 416.360 C 104.694 430.446, 115.257 439.289, 130.524 449.467 C 152.064 463.825, 184.308 477.014, 211.172 482.453 C 228.662 485.994, 227.579 486.238, 228.933 478.462 C 229.559 474.867, 229.804 471.492, 229.477 470.962 C 229.150 470.433, 227.446 469.995, 225.691 469.989 C 220.135 469.971, 199.557 465.352, 187.816 461.488 C 139.325 445.529, 96.795 411.523, 71.436 368.435 C 68.338 363.171, 65.979 358.687, 66.194 358.472 C 66.410 358.257, 70.166 359.232, 74.543 360.638 C 81.221 362.785, 83.758 363.114, 90.327 362.687 C 94.632 362.407, 98.457 361.873, 98.827 361.500 C 99.859 360.458, 94.262 356.407, 89.723 354.909 C 85.380 353.475, 75.958 344.847, 77.994 344.169 C 80.821 343.226, 85.955 337.618, 88.578 332.607 C 91.911 326.242, 91.288 324.693, 84.676 322.913 C 75.747 320.508, 65.866 324.803, 61.092 333.163 C 57.634 339.216, 57.165 338.752, 54.485 326.629 C 51.118 311.394, 54.500 298.527, 63.725 291.483 C 69.493 287.080, 72.940 286.936, 75.341 291 C 77.320 294.350, 79.092 294.765, 81.429 292.429 C 83.918 289.939, 83.324 286.450, 79.923 283.589 C 77.159 281.263, 76.011 281, 68.623 281 C 63.909 281, 59.924 280.524, 59.285 279.885 C 57.914 278.514, 59.234 274.458, 64.362 264.274 C 70.564 251.959, 70.928 243.935, 65.497 239.250 C 60.083 234.580, 51 237.818, 51 244.418 C 51 249.734, 55.052 252.249, 60.750 250.470 C 64.359 249.342, 63.617 252.471, 57.158 265.613 C 51.905 276.303, 47.403 288.208, 45.480 296.500 L 44.785 299.500 43.797 297 C 40.118 287.686, 38.139 259.591, 39.926 242.066 C 44.624 196.008, 61.140 153.588, 87.064 121 C 123.234 75.529, 181.435 44.827, 238.746 40.984 C 300.829 36.820, 358.040 56.768, 402.775 98.175 C 421.298 115.320, 432.977 130.189, 443.269 149.727 C 456.635 175.101, 464.146 197.382, 469.181 226.597 C 472.372 245.110, 472.365 276.960, 469.166 291.431 C 467.959 296.894, 466.786 301.547, 466.560 301.773 C 466.335 301.999, 465.855 300.005, 465.494 297.342 C 464.288 288.447, 461.022 277.993, 456.046 267.101 C 453.334 261.165, 450.816 255.114, 450.449 253.654 C 449.811 251.110, 449.951 251, 453.820 251 C 460.154 251, 462.501 247.388, 459.890 241.657 C 456.933 235.168, 447.728 235.839, 444.432 242.784 C 442.107 247.685, 443.071 253.130, 448.501 265.772 C 453.387 277.143, 453.775 279.112, 451.503 280.997 C 450.346 281.958, 448.992 281.984, 445.523 281.110 C 439.607 279.621, 433.241 281.035, 430.250 284.503 C 427.766 287.383, 427.480 289.161, 429.035 292.066 C 430.532 294.862, 433.163 294.446, 436.253 290.925 C 439.362 287.381, 441.102 287.527, 447.487 291.867 C 456.553 298.029, 460.302 313.486, 456.496 329.015 C 454.566 336.891, 453.625 338.079, 451.932 334.778 C 446.458 324.106, 433.051 319.446, 422.779 324.644 C 420.415 325.841, 420.182 326.349, 421.007 328.518 C 423.171 334.211, 425.491 337.727, 429.700 341.690 L 434.149 345.880 431.824 349.049 C 429.101 352.763, 426.368 354, 420.889 354 C 417.997 354, 416.238 354.671, 414.455 356.455 C 413.105 357.805, 412 359.391, 412 359.979 C 412 363.426, 426.008 363.979, 436.898 360.961 C 440.945 359.840, 444.418 359.085, 444.617 359.283 C 444.815 359.482, 442.276 364.214, 438.974 369.799 C 407.058 423.780, 355.773 458.344, 292.476 468.529 C 287.010 469.409, 282.363 470.304, 282.148 470.519 C 281.933 470.734, 282.073 473.855, 282.458 477.455 C 283.300 485.311, 282.335 485.102, 300.972 481.468 C 333.953 475.037, 365.437 461.743, 391.108 443.409 C 401.221 436.186, 423.951 414.369, 432.687 403.500 C 459.607 370.008, 479.616 325.173, 485.125 286 C 487.139 271.677, 486.669 245.322, 484.092 228.203 C 478.988 194.280, 466.483 159.453, 449.676 132.349 C 413.789 74.476, 347.665 33.786, 278.576 27.063 C 265.976 25.837, 241.916 25.867, 231 27.122 M 251.658 49.548 C 246.951 55.925, 243.085 63.700, 242.341 68.289 C 241.846 71.333, 242.768 74.064, 248.126 85.431 C 255.113 100.251, 256.594 101.528, 259.519 95.250 C 260.480 93.188, 263.265 87.450, 265.707 82.500 C 269.540 74.730, 270.070 72.906, 269.579 69.150 C 268.887 63.851, 263.937 54.313, 258.979 48.727 L 255.313 44.595 251.658 49.548 M 204.169 67.437 C 196.371 69.958, 192.857 74.932, 192.857 83.450 C 192.857 93.162, 197.497 100.360, 206.500 104.617 C 211.948 107.192, 216.311 107.595, 220.685 105.925 C 223.135 104.990, 223.294 104.698, 221.916 103.675 C 221.044 103.029, 220.034 101.304, 219.670 99.843 C 219.306 98.381, 218.733 96.469, 218.397 95.593 C 216.558 90.801, 230.769 98.166, 239.462 106.511 C 244.955 111.784, 250.105 121.206, 253.609 132.393 L 255.455 138.285 256.263 134.393 C 256.708 132.252, 258.900 126.722, 261.135 122.104 C 264.203 115.765, 266.875 112.054, 272.038 106.962 C 279.784 99.323, 290.379 93.240, 292.652 95.126 C 294.714 96.837, 294.275 98.631, 291.250 100.858 C 287.303 103.765, 289.093 106.394, 295.295 106.802 C 304.108 107.383, 314.028 100.965, 317.625 92.355 C 319.812 87.120, 319.397 78.879, 316.750 74.990 C 312.591 68.878, 309.724 67.500, 301.177 67.500 C 290.626 67.500, 284.176 70.588, 274.562 80.243 C 266.054 88.787, 262.447 94.582, 258.888 105.426 L 256.276 113.384 253.982 105.659 C 246.705 81.145, 221.526 61.825, 204.169 67.437 M 153.861 79.912 C 150.557 82.587, 150.468 90.912, 153.708 94.152 C 155.621 96.065, 156.260 96.202, 158.505 95.180 C 164.930 92.252, 165.483 95.095, 161.389 110 C 158.039 122.197, 158.342 131.339, 162.332 138.479 C 163.790 141.087, 164.761 143.578, 164.491 144.015 C 164.221 144.452, 162.312 144.589, 160.250 144.320 C 152.760 143.341, 146.520 148.455, 148.880 153.637 C 149.999 156.091, 150.280 156.164, 156.049 155.494 C 166.656 154.263, 182.505 159.461, 203.669 171.111 C 223.610 182.088, 242.335 204.702, 244.895 220.902 C 246.346 230.079, 245.643 230.634, 239.206 225.390 C 236.139 222.892, 229.434 218.378, 224.308 215.361 C 214.152 209.385, 212 206.721, 212 200.131 C 212 196.675, 212.451 195.884, 215.500 194 C 219.637 191.443, 219.868 189.777, 216.545 186.455 C 212.451 182.360, 208.930 183.447, 207.472 189.256 C 207.030 191.016, 206.117 192, 204.926 192 C 203.904 192, 201.432 192.780, 199.432 193.734 C 195.846 195.444, 195.771 195.436, 193.898 193.123 C 192.854 191.833, 192 189.928, 192 188.889 C 192 187.673, 191.295 187, 190.019 187 C 187.575 187, 186.512 190.588, 187.460 195.641 C 187.985 198.438, 187.839 199.146, 186.820 198.733 C 172.872 193.079, 169.255 192.039, 158.118 190.482 C 138.580 187.751, 132.456 188.826, 105.259 199.762 C 88.078 206.671, 82.524 210.269, 79.630 216.368 C 76.402 223.169, 78.487 228.099, 86.345 232.252 C 89.779 234.068, 92.061 234.435, 99.500 234.371 C 111.368 234.268, 119.253 231.476, 135.228 221.723 C 150.487 212.406, 153.772 210.758, 162.355 208.113 C 171.452 205.309, 183.415 205.297, 194.317 208.081 C 205.531 210.944, 207.201 212.238, 198.500 211.322 C 169.844 208.304, 152.105 216.970, 152.022 234.027 C 151.995 239.640, 154.058 242.733, 158.367 243.541 C 163.854 244.570, 168.140 241.970, 175.380 233.219 C 182.537 224.568, 187 220.817, 187 223.451 C 187 224.680, 188.750 224.946, 196.750 224.933 C 211.847 224.909, 221.594 228.557, 231.332 237.876 C 233.990 240.419, 237.365 244.750, 238.832 247.500 C 241.363 252.244, 241.491 253.166, 241.329 265.500 C 241.225 273.432, 240.343 283.178, 239.067 290.500 C 237.009 302.309, 231.680 323.281, 230.080 325.871 C 229.448 326.893, 228.023 326.372, 223.826 323.585 C 214.316 317.271, 203.224 316.416, 197.148 321.529 C 191.766 326.058, 192.759 334.053, 199.190 337.974 C 203.281 340.469, 211.423 340.658, 218.917 338.432 C 221.821 337.570, 224.490 337.161, 224.849 337.524 C 226.246 338.940, 212.889 349.979, 205.277 353.699 C 197.622 357.440, 197.319 357.499, 186 357.462 C 173.275 357.420, 165.946 355.484, 159.289 350.407 C 149.903 343.248, 152.550 331.435, 163.972 329.505 C 168.471 328.745, 170.250 327.043, 170.250 323.500 C 170.250 317.584, 163.858 315.033, 155.261 317.516 C 136.837 322.836, 131.370 348.908, 145.605 363.555 C 159.209 377.552, 184.090 376.909, 206.323 361.984 C 210.270 359.334, 213.663 357.330, 213.862 357.529 C 214.062 357.729, 213.701 360.076, 213.061 362.745 C 211.318 370.010, 214.091 375.685, 218.555 373.989 C 221.783 372.763, 231.488 363.456, 236.525 356.755 C 239.046 353.401, 242.923 346.909, 245.140 342.329 C 247.357 337.748, 249.555 334, 250.024 334 C 251.359 334, 251.899 340.836, 252.355 363.500 C 252.801 385.679, 252.219 391.145, 248.512 399.554 C 246.134 404.947, 240.542 412.001, 238.646 411.998 C 238.016 411.997, 236.238 409.998, 234.695 407.556 C 231.877 403.095, 223.488 396.581, 221.858 397.588 C 219.796 398.862, 217.983 404.358, 217.375 411.173 C 216.354 422.634, 212.890 427.294, 204.453 428.559 C 188.200 430.997, 182.444 408.288, 197.471 401.014 C 201.123 399.246, 202.879 399, 207.835 399.561 C 213.206 400.169, 213.913 400.031, 214.902 398.184 C 216.880 394.487, 216.236 391.173, 213.237 389.622 C 199.978 382.766, 180.753 391.547, 176.467 406.417 C 171.204 424.674, 184.261 443.005, 202.500 442.968 C 216.433 442.940, 228.072 432.317, 228.377 419.351 C 228.474 415.206, 228.059 413.709, 226.374 412.137 C 223.984 409.907, 224.196 405, 226.682 405 C 229.539 405, 231.906 407.092, 238.262 415.234 C 246.369 425.620, 250.302 431.998, 253.088 439.278 C 254.292 442.425, 255.553 444.985, 255.889 444.967 C 256.225 444.949, 258.402 440.938, 260.728 436.054 C 266.245 424.466, 281.678 405, 285.349 405 C 288.063 405, 288.564 409.771, 286.122 412.370 C 281.613 417.170, 285.010 430.453, 292.328 436.631 C 299.401 442.602, 310.438 444.714, 318.684 441.674 C 329.732 437.601, 337.035 426.976, 336.956 415.090 C 336.876 403.100, 332.711 396.011, 322.854 391.085 C 314.113 386.717, 305.225 386.714, 296 391.075 C 287.698 395, 280.385 400.647, 275.975 406.538 L 272.500 411.179 269.236 407.407 C 264.911 402.408, 261.441 394.869, 260.072 387.500 C 258.807 380.687, 258.687 334.312, 259.932 333.542 C 261.239 332.734, 263.599 336.066, 266.878 343.346 C 270.950 352.387, 277.439 361.339, 284.979 368.320 C 294.748 377.365, 298.674 375.668, 297.754 362.802 C 297.263 355.943, 297.266 355.933, 299.381 357.494 C 311.537 366.466, 319.119 370.048, 331.500 372.668 C 349.775 376.536, 368.192 367.469, 372.557 352.454 C 377.874 334.163, 366.948 317, 349.987 317 C 345.944 317, 344.414 317.495, 342.481 319.428 C 340.358 321.551, 340.186 322.236, 341.110 324.887 C 342.197 328.003, 342.869 328.382, 349.190 329.447 C 356.223 330.631, 360.004 338.507, 356.856 345.417 C 354.289 351.051, 341.651 356.721, 329.500 357.690 C 315.977 358.769, 303.385 354.078, 292.630 343.954 C 289.258 340.781, 286.746 337.934, 287.047 337.629 C 287.347 337.324, 290.047 337.727, 293.047 338.525 C 301.129 340.676, 308.792 340.424, 312.982 337.870 C 317.751 334.963, 318.931 333.145, 318.968 328.651 C 319.019 322.478, 312.960 318, 304.557 318 C 300.149 318, 291.971 321.139, 287.513 324.542 L 282.942 328.031 281.124 323.765 C 274.467 308.143, 270.930 290.879, 270.286 270.863 C 269.763 254.619, 269.810 254.095, 272.285 248.688 C 279.081 233.844, 297.132 223.854, 314.621 225.258 C 321.442 225.805, 322.592 225.433, 323.148 222.500 C 323.472 220.791, 324.322 221.297, 329.016 226 C 332.036 229.025, 336.652 234.069, 339.275 237.209 C 342.869 241.511, 344.905 243.079, 347.539 243.573 C 361.439 246.181, 362.986 227.522, 349.669 217.875 C 347.442 216.262, 342.504 213.996, 338.694 212.839 C 332.772 211.040, 330.083 210.810, 320.134 211.256 C 313.735 211.542, 307.600 212.118, 306.500 212.535 C 305.102 213.066, 304.801 212.973, 305.500 212.227 C 307.842 209.729, 324.368 206, 333.101 206 C 347.121 206, 356.872 209.676, 378.055 222.947 C 390.774 230.915, 398.488 233.833, 409.040 234.668 C 422.797 235.756, 433 230.686, 433 222.761 C 433 218.370, 428.670 211.557, 423.711 208.145 C 414.845 202.045, 387.184 191.868, 374.644 190.092 C 362.320 188.346, 343.788 191.126, 330.639 196.692 L 322.778 200.019 323.438 197.393 C 325.004 191.153, 325.052 189.402, 323.707 187.588 C 322.005 185.292, 319 186.075, 319 188.814 C 319 192.185, 315.725 194.140, 311.272 193.428 C 306.314 192.635, 305.717 192.210, 304.487 188.609 C 303.137 184.656, 299.827 183.562, 296.687 186.032 C 292.712 189.159, 292.683 191.657, 296.589 194.636 C 299.417 196.793, 300 197.888, 300 201.042 C 300 206.321, 296.723 209.848, 286.475 215.601 C 281.811 218.219, 275.520 222.566, 272.497 225.261 L 267 230.160 267 225.237 C 267 214.977, 274.022 201.484, 286.108 188.521 C 293.411 180.687, 302.220 174.616, 317.987 166.551 C 330.779 160.008, 341.361 157, 351.589 157 C 356.863 157, 359.288 156.569, 360.429 155.429 C 362.688 153.170, 362.367 150.276, 359.545 147.455 C 357.481 145.390, 356.131 145, 351.045 145 C 344.873 145, 343.783 144.255, 346.573 141.939 C 349.242 139.725, 351.935 133.404, 352.588 127.824 C 353.056 123.830, 352.542 119.706, 350.533 111.312 C 349.060 105.159, 348 98.859, 348.178 97.312 C 348.473 94.740, 348.811 94.524, 352.153 94.781 C 356.840 95.142, 360 91.567, 360 85.904 C 360 78.093, 350.847 74.999, 345.009 80.837 C 340.802 85.044, 340.286 90.730, 342.878 104.329 C 344.049 110.473, 344.975 118.200, 344.936 121.500 L 344.865 127.500 343.540 122.565 C 342.812 119.851, 341.380 117.020, 340.359 116.273 C 337.622 114.272, 333.781 115.110, 332.128 118.069 C 330.143 121.621, 331.303 125.079, 335.349 127.673 C 341.318 131.501, 340.623 138.328, 333.605 144.796 C 329.924 148.189, 322.310 153, 320.620 153 C 320.368 153, 320.645 151.313, 321.236 149.250 C 322.457 144.993, 322.871 128.545, 321.786 127.455 C 320.781 126.446, 310.727 130.691, 305.983 134.128 C 303.799 135.710, 301.672 136.950, 301.256 136.884 C 299.073 136.536, 297.553 137.371, 293.401 141.198 C 286.593 147.474, 285.716 149.816, 285.600 162.049 L 285.500 172.619 280.173 178.559 C 277.243 181.827, 272.329 188.325, 269.252 193 C 266.175 197.675, 263.253 201.950, 262.758 202.500 C 261.376 204.036, 262.846 198.445, 266.100 189.782 C 270.025 179.337, 270 172.206, 266 160.662 C 259.904 143.068, 262.749 133.678, 277.134 123.909 C 283.520 119.572, 284.467 117.141, 280.777 114.557 C 274.806 110.374, 266.490 115.118, 262 125.268 C 259.494 130.932, 257 143.284, 257 150.029 C 257 155.142, 255.377 157.691, 254.605 153.791 C 254.356 152.531, 253.230 146.634, 252.103 140.686 C 249.700 127.997, 245.862 118.750, 241.799 115.857 C 236.604 112.157, 228.460 113.630, 229.202 118.135 C 229.366 119.131, 232.177 122.097, 235.449 124.726 C 244.043 131.630, 247 137.706, 247 148.458 C 247 154.306, 246.388 158.396, 244.886 162.593 C 241.456 172.176, 241.905 178.789, 246.745 190 C 249.001 195.225, 251.136 200.512, 251.491 201.750 C 252.605 205.644, 250.590 204.204, 247.294 198.750 C 245.549 195.863, 241.056 189.748, 237.311 185.163 C 225.076 170.185, 225.796 171.731, 226.170 161.249 C 226.351 156.161, 226.231 151.999, 225.902 151.999 C 225.573 152, 224.485 150.184, 223.484 147.965 C 221.317 143.159, 215.149 137.312, 211.275 136.391 C 209.749 136.028, 207.825 135.150, 207 134.440 C 205.082 132.788, 192.879 127.002, 191.311 127.001 C 188.628 126.999, 188.378 146.101, 190.997 150.994 C 192.345 153.513, 191.908 153.500, 186.710 150.867 C 180.209 147.573, 175.118 143.151, 172.962 138.926 C 170.124 133.362, 170.481 131.320, 175 127.263 C 179.390 123.322, 180.117 120.039, 177.443 116.223 C 175.767 113.829, 172.134 113.323, 168.934 115.035 C 166.540 116.317, 166.485 115.163, 168.500 106 C 170.365 97.520, 170.401 86.676, 168.575 83.145 C 165.956 78.080, 158.222 76.380, 153.861 79.912 M 120.500 101.155 C 117.083 103.024, 116 105.206, 116 110.223 C 116 116.085, 117.719 120.472, 121.868 125.196 C 126.202 130.133, 133.032 132.780, 144.649 134.023 C 150.067 134.603, 155.063 135.271, 155.750 135.507 C 157.770 136.202, 157.200 134.152, 154.130 129.680 C 152.552 127.381, 149.220 121.450, 146.727 116.500 C 141.983 107.082, 138.405 102.847, 133.685 101.064 C 130.072 99.698, 123.074 99.747, 120.500 101.155 M 377.481 101.394 C 372.959 103.364, 368.594 108.937, 364.155 118.410 C 361.966 123.082, 359.010 128.431, 357.587 130.297 C 356.164 132.162, 355 134.122, 355 134.650 C 355 135.599, 361.317 135.059, 374.443 132.988 C 386.849 131.030, 395.061 122.410, 395.816 110.551 C 396.187 104.720, 396.034 104.172, 393.472 102.156 C 390.269 99.638, 382.376 99.261, 377.481 101.394 M 231.501 135.130 C 223.020 137.478, 224.576 149.200, 233.369 149.200 C 238.315 149.200, 242 145.890, 242 141.448 C 242 136.593, 237.027 133.600, 231.501 135.130 M 271.500 135.195 C 267.143 137.666, 266.776 142.391, 270.589 146.923 C 274.413 151.468, 281.481 150.628, 283.890 145.343 C 285.585 141.622, 285.258 140.104, 282.077 136.923 C 278.961 133.807, 275.069 133.171, 271.500 135.195 M 128.500 142.028 C 121.330 144.225, 116 152.641, 116 161.764 C 116 173.002, 123.108 182.173, 134.424 185.533 C 141.569 187.655, 142.542 187.450, 147.510 182.775 C 151.246 179.259, 152 177.934, 152 174.882 C 152 172.616, 151.451 171.003, 150.564 170.663 C 148.707 169.950, 144.002 173.645, 143.993 175.823 C 143.989 176.964, 143.336 176.541, 141.949 174.500 C 140.474 172.329, 140.056 170.517, 140.436 167.945 C 140.786 165.576, 140.423 163.622, 139.349 162.088 C 137.985 160.141, 137.152 159.880, 133.940 160.394 C 129.997 161.024, 126.492 159.045, 127.282 156.634 C 127.922 154.683, 133.268 154.646, 134.684 156.582 C 137.176 159.990, 143 154.996, 143 149.451 C 143 147.002, 137.634 142.015, 134.500 141.552 C 132.850 141.308, 130.150 141.522, 128.500 142.028 M 375.295 142.087 C 369.212 143.884, 367.148 150.376, 371.073 155.365 C 373.567 158.536, 374.273 158.597, 377.845 155.956 C 381.161 153.505, 384.250 154.241, 383.803 157.377 C 383.543 159.200, 382.817 159.505, 378.664 159.539 C 372.869 159.585, 370.057 162.379, 370.022 168.128 C 369.995 172.521, 367.366 175.406, 365.854 172.703 C 364.567 170.404, 360.037 170.440, 359.885 172.750 C 359.596 177.140, 360.401 178.776, 364.797 182.729 C 369.818 187.244, 372.283 187.822, 378.101 185.845 C 386.444 183.010, 392.377 176.515, 394.671 167.709 C 398.481 153.078, 387.454 138.495, 375.295 142.087 M 90.635 151.073 C 85.134 155.400, 88.832 165, 96 165 C 103.168 165, 106.866 155.400, 101.365 151.073 C 99.916 149.933, 97.502 149, 96 149 C 94.498 149, 92.084 149.933, 90.635 151.073 M 409.635 151.073 C 403.996 155.508, 407.844 165, 415.280 165 C 422.470 165, 425.951 155.466, 420.365 151.073 C 418.916 149.933, 416.502 149, 415 149 C 413.498 149, 411.084 149.933, 409.635 151.073 M 69 176.592 C 63.216 179.093, 59 183.847, 59 187.868 C 59 194.549, 69.722 202, 79.337 202 C 83.727 202, 94.570 198.094, 98.910 194.950 L 103.150 191.878 101.400 189.189 C 98.999 185.500, 97.104 184.224, 92.959 183.507 C 90.264 183.041, 89.379 182.379, 89.255 180.737 C 89.166 179.550, 88.059 177.783, 86.796 176.811 C 83.885 174.572, 73.955 174.449, 69 176.592 M 425.554 177.136 C 423.781 178.531, 423.007 179.919, 423.325 181.136 C 423.678 182.483, 423.273 183, 421.867 183 C 419.242 183, 412.944 186.296, 410.586 188.904 C 408.693 190.996, 408.699 191.050, 411.030 193.532 C 414.494 197.219, 422.997 201.042, 429.133 201.670 C 437.216 202.498, 442.685 200.601, 448.248 195.037 C 454.320 188.966, 454.509 186.126, 449.181 181.058 C 442.714 174.905, 430.886 172.942, 425.554 177.136 M 166.625 179.517 C 164.394 181.749, 164.585 186.585, 167 189 C 170.326 192.326, 174.217 191.415, 176.632 186.745 C 178.081 183.944, 178.053 183.548, 176.246 181.116 C 173.901 177.960, 168.998 177.145, 166.625 179.517 M 335 180 C 333.900 181.100, 333 182.935, 333 184.077 C 333 186.860, 338.577 192.376, 340.604 191.599 C 341.462 191.269, 342.565 191, 343.056 191 C 344.166 191, 347 185.647, 347 183.550 C 347 181, 343.216 178, 340 178 C 338.333 178, 336.111 178.889, 335 180 M 402 193.059 C 402 193.641, 402.450 193.840, 403 193.500 C 403.550 193.160, 404 192.684, 404 192.441 C 404 192.198, 403.550 192, 403 192 C 402.450 192, 402 192.477, 402 193.059 M 108.500 194 C 108.160 194.550, 108.332 195, 108.882 195 C 109.432 195, 110.160 194.550, 110.500 194 C 110.840 193.450, 110.668 193, 110.118 193 C 109.568 193, 108.840 193.450, 108.500 194 M 292.071 296.746 C 284.236 300.754, 282.065 309.327, 287.460 314.958 C 290.848 318.494, 293.259 318.749, 297.701 316.040 C 301.731 313.584, 304 309.264, 304 304.050 C 304 300.173, 301.450 296, 299.082 296 C 298.577 296, 297.564 295.773, 296.832 295.496 C 296.099 295.219, 293.957 295.781, 292.071 296.746 M 210.455 298.455 C 207.805 301.104, 207.381 304.235, 209.067 308.685 C 211.331 314.662, 218.493 319.877, 221.920 318.043 C 224.305 316.766, 228 310.886, 228 308.366 C 228 305.014, 224.445 299.708, 220.938 297.827 C 216.326 295.353, 213.379 295.530, 210.455 298.455 M 184.223 342.557 C 177.758 347.084, 186.995 357.473, 195.649 355.408 C 200.940 354.146, 204 351.764, 204 348.907 C 204 345.541, 202.800 344.587, 196.068 342.602 C 189.280 340.600, 187.029 340.591, 184.223 342.557 M 313.819 343.531 C 308.364 346.371, 307.636 347.276, 308.532 350.100 C 309.366 352.729, 314.703 355, 320.045 355 C 323.253 355, 324.795 354.359, 327.077 352.077 C 330.496 348.657, 330.788 345.788, 328 343 C 325.275 340.275, 319.668 340.485, 313.819 343.531 M 298.077 402.589 C 295.143 405.058, 295 405.527, 295 412.707 C 295 420.091, 295.073 420.308, 298.799 424.035 C 303.439 428.674, 308.561 429.942, 314.420 427.899 C 325.729 423.958, 325.884 406.969, 314.660 401.643 C 309.196 399.050, 301.780 399.473, 298.077 402.589"
stroke="none"
fill="#296e01"
/>
</svg>
</div>
</>
);
}
export default App;
This was my attempt at creating a color filling effect but to no avail.
/* SVGComponent.css */
.svg-container {
overflow: hidden;
position: relative;
}
.svg-path {
fill: url(#gradient);
transition: fill 0.3s ease;
}
/* Animate the gradient */
@keyframes gradientAnimation {
0% {
stop-color: #196A0b;
}
100% {
stop-color: #32de13;
}
}
.svg-container:hover .svg-path {
animation: gradientAnimation 0.5s ease forwards;
}
I want pulsating and a hover effect in which maybe the fill color of my svg changes from bottom up.
