TransWikia.com

How do I go about adding a javascript animation to a .svg image?

Stack Overflow Asked by Varun Jain on November 20, 2021

I am trying to animate a .svg image (.png version linked below), specifically the ECG on the top right. I have the javascript animation that I want in there, but I am not sure how to get it there.

Image that I would like to have animated

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="550" height="500" viewBox="0 0 550 500" fill="none">
<g id="Frame 1">
<rect id="Rectangle 1" x="260.5" y="48.5" width="238" height="151" rx="27.5" fill="white" stroke="#C5CFD6" stroke-width="5"/>


<path id="Vector 1" d="M498 148.177H462H448.721C439.691 137.031 440.089 143.533 436.769 148.177H423.49C414.194 116.828 397.374 137.031 393.611 148.177H382.324C382.324 190.778 379.225 207.857 376.348 148.177C369.045 11.7777 372.143 31.1396 369.045 148.177C368.473 169.773 366.61 153.286 363.069 148.177H344.478C328.011 123.655 322.124 137.96 314.599 148.177H298H261" stroke="#FF0202" stroke-width="3"/>

</g>
</svg>

Animation: https://jsfiddle.net/20mhukj5/3/

HTML:

<canvas id="canvas" width="500" height="160" style="background-color: white;"></canvas>

Javascript:

var EcgData=[ "905,923,950,979,997,1033,1090,1157,1232,1320,1398,1495,1613,1736,1866,2011,2170,2331,2499,2683,2880,3085,3291,3490,3689,3906,4123,4320,4503,4671,4815,4946,5048,5121,5172,5197,5195,5173,5111,5024,4924,4792,4637,4469,4283,4081,3878,3674,3451,3230,3018,2819,2606,2403,2213,2031,1868,1723,1558,1396,1254,1101,921,726,497,251,1,-280,-585,-858,-1058,-1159,-1133,-946,-546,170,1225,2521,3993,5614,7314,9024,10649,11994,12978,13593,13841,13662,13084,12019,10582,8884,7036,5148,3310,1609,111,-1032,-1871,-2389,-2648,-2674,-2518,-2206,-1825,-1410,-1002,-615,-255,56,298,467,612,732,844,939,1010,1088,1174,1268,1353,1447,1537,1631,1758,1874,2010,2148,2287,2443,2607,2771,2931,3111,3280,3465,3660,3837,4028,4239,4444,4650,4851,5053,5268,5491,5683,5879,6068,6248,6415,6565,6699,6844,6993,7129,7251,7361,7458,7537,7581,7577,7544,7485,7404,7306,7190,7055,6920,6783,6637,6478,6295,6106,5905,5708,5498,5279,5050,4817,4590,4364,4138,3910,3680,3480,3272,3068,2868,2674,2486,2310,2145,1963,1786,1634,1500,1374,1256,1138,1021,921,849,771,684,615,557,510,465,426,384,353,333,312,288,272,272,275,282,287,290,291,294,300,306,304,306,304,311,313,316,318,311,309,308,316,312,316,320,323,331,341,340,340,346,354,373,394,413,432,458,473,494,512,513,519,519,520,525,531,536,538,541,537,541,544,542,551,553,551,554,568,587,607,630,648,672,697,721,732,734,735,740,743,739,743,747,744,748,748,753,751,750,751,750,757,766,786,802,823,846,864,885,907,934,961,986,1020,1062,1121,1181,1262,1350,1437,1537,1649,1774,1913,2077,2245,2405,2590,2781,2975,3173,3378,3582,3792,4007,4205,4396,4582,4757,4901,5013,5100,5164,5214,5239,5235,5189,5112,5018,4908,4773,4615,4424,4223,4023,3827,3612,3389,3166,2960,2752,2545,2343,2152,1985,1823,1665,1495,1349,1206,1063,885,677,440,174,-103,-402,-695,-974,-1146,-1203,-1096,-798,-242,580,1711,3060,4632,6310,8039,9725,11249,12511,13385,13882,13910,13523,12703,11496,9972,8199,6283,4404,2614,1012,-352,-1409,-2173,-2592,-2708,-2639,-2404,-2067,-1664,-1243,-828,-463,-140,136,357,519,656,773,869,948,1027,1098,1175,1270,1370,1463,1564,1681,1792,1915,2058,2194,2338,2500,2659,2821,3002,3181,3366,3562,3745,3925,4119,4319,4525,4738,4946,5148,5373,5581,5777,5975,6162,6334,6498,6645,6776,6926,7084,7219,7337,7436,7510,7562,7595,7577,7531,7454,7370,7264,7157,7031,6894,6745,6584,6413,6226,6034,5832,5620,5400,5177,4955,4734,4509,4279,4048,3824,3608,3404,3196,2988,2782,2589,2402,2214,2043,1872,1702,1550,1419,1291,1164,1061,956,863,790,704,629,562,513,462,405,359,329,312,290,275,260,252,254,246,242,240,243,240,234,236,242,247,250,253,253,261,266,265,265,271,273,271,277,276,279,282,285,284,285,284,280,291,311,331,352,373,393,414,436,448,454,454,450,446,454,458,457,465,466,472,478,489,487,490,496,493,494,509,530,551,576,597,619,637,652,659,661,663,659,664,662,665,671,670,671,671,675,675,674,675,678,682,694,716,732,746,773,793,813,836,860,876,901,940,983,1050,1127,1213,1299,1389,1500,1625,1760,1896,2044,2208,2377,2567,2764,2958,3164,3371,3576,3788,4000,4198,4384,4557,4711,4844,4960,5029,5091,5118,5118,5096,5042,4957,4850,4723,4566,4399,4219,4024,3824,3617,3397,3170,2965,2767,2551,2337,2139,1958,1798,1656,1493,1334,1192,1048,880,685,467,224,-41,-330,-629,-915,-1137,-1265,-1279,-1135,-736,-66,938,2190,3648,5257,6956,8687,10325,11722,12785,13483,13811,13702,13185,12197,10793,9127,7288,5387,3509,1767,230,-988,-1878,-2455,-2767,-2836,-2711,-2415,-2035,-1626,-1212,-821,-458,-144,111,289,438,572,695,791,872,948,1023,1114,1205,1293,1379,1481,1599,1715,1856,2002,2141,2295,2457,2612,2779,2964,3142,3321,3512,3688,3880,4088,4291,4491,4698,4902,5118,5342,5537,5731,5925,6113,6279,6438,6581,6719,6875,7012,7135,7239,7342,7411,7457,7467,7445,7392,7324,7235,7125,6996,6865,6730,6578,6417,6240,6048,5844,5641,5433,5213,4985,4753,4524,4291,4062,3833,3606,3389,3185,2981,2770,2576,2397,2227,2055,1886,1712,1548,1417,1288,1160,1031,916,804,722,642,551,479,415,368,319,278,237,206,189,169,147,132,129,125,125,126,125,122,120,123,123,126,134,139,142,145,160,165,167,170,166,169,176,175,169,165,168,163,166,166,163,168,184,200,218,242,263,283,310,333,337,337,342,342,342,346,349,349,351,355,357,362,364,362,357,360,365,374,402,422,442,467,491,510,533,551,546,548,551,553,556,554,551,547,555,556,556,559,558,563,565,570,569,589,614,629,652,669,695,718,742,760,776,806,843,898,969,1046,1129,1222,1328,1438,1557,1691,1838,2006,2175,2350,2539,2735,2942,3149,3347,3547,3762,3967,4163,4344,4512,4657,4786,4875,4947,4997,5020,5017,4979,4908,4814,4714,4583,4429,4254,4057,3858,3655,3444,3213,2978,2752,2536,2323,2125,1940,1769,1619,1469,1305,1157,1014,862,685,475,236,-21,-283,-582,-873,-1153,-1350,-1427,-1357,-1100,-598,172,1260,2603,4138,5824,7551,9256,10808,12142,13066,13608,13719,13392,12652,11525,10031,8285,6388,4492,2681,1037,-382,-1512,-2302,-2784,-2939,-2890,-2677,-2352,-1956,-1536,-1115,-731,-398,-119,102,276,420,541,641,724,789,861,944,1034,1124,1218,1311,1422,1551,1673,1813,1955,2101,2265,2426,2586,2747,2928,3111,3301,3491,3667,3857,4056,4266,4477,4677,4877,5091,5305,5507,5707,5891,6065,6225,6379,6519,6664,6817,6952,7073,7178,7265,7331,7369,7369,7321,7251,7168,7074,6965,6834,6693,6546,6393,6229,6044,5853,5643,5436,5218,4997,4769,4551,4327,4091,3861,3631,3401,3194,2989,2786,2582,2390,2205,2039,1877,1713,1540,1379,1243,1114,984,867,756,649,574,496,421,354,312,265,213,171,132,108,80,67,45,34,31,33,34,28,32,35,37,39,44,46,50,55,54,45,40,35,34,39,37,39,46,57,64,66,72,68,71,73,67,70,89,116,133,153,176,198,224,238,242,240,235,239,237,236,236,239,242,247,256,255,264,268,266,266,265,278,300,324,337,357,381,406,425,436,438,442,442,445,445,445,447,441,446,445,450,454,459,459,466,473,475,494,511,533,554,575,595,612,645,669,691,723,773,835,902,992,1076,1173,1290,1406,1532,1669,1827,1987,2149,2326,2512,2711,2909,3114,3314,3523,3743,3945,4136,4310,4471,4606,4718,4802,4860,4895,4901,4887,4843,4768,4674,4553,4401,4239,4056,3859,3654,3443,3220,2998,2787,2586,2383,2175,1979,1802,1634,1486,1324,1162,1011,861,699,510,302,60,-193,-478,-780,-1065,-1306,-1455,-1488,-1383,-1032,-401,535,1741,3153,4724,6411,8150,9800,11238,12365,13134,13526,13515,13027,12123,10792,9183,7370,5485,3611,1852,306,-966,-1914,-2553,-2900,-2998,-2897,-2640,-2268,-1868,-1456,-1052,-683,-366,-98,104,256,396,520,611,686,764,833,917,1006,1092,1181,1284,1411,1529,1666,1813,1957,2106,2271,2430,2589,2760,2932,3101,3285,3475,3658,3858,4054,4251,4449,4651,4865,5083,5291,5488,5682,5871,6047,6211,6348,6490,6640,6782,6914,7031,7125,7205,7254,7268,7243,7194,7115,7030,6932,6810,6683,6554,6413,6258,6084,5901,5698,5504,5298,5078,4845,4618,4392,4162,3929,3704,3477,3258,3050,2843,2644,2441,2265,2086,1914,1750,1578,1410,1267,1146,1015,896,779,659,578,512,429,353,294,241,188,155,116,76,48,23,-2,-19,-23,-31,-30,-20,-11,-5,4,7,11,12,6,2,-2,1,2,5,12,17,20,17,16,16,14,10,9,11,19,25,34,36,61,82,95,115,136,160,183,204,202,209,222,230,230,227,229,236,248,255,255,262,264,268,268,270,265,271,289,301,324,354,379,400,420,436,441,446,455,451,448,445,446,445,442,441,431,434,437,438,441,442,450,467,487,504,530,555,578,602,625,650,679,710,743,789,849,923,1011,1102,1200,1312,1434,1572,1727,1889,2052,2222,2411,2600,2799,3006,3206,3412,3622,3833,4023,4212,4386,4533,4656,4756,4831,4884,4916,4915,4888,4829,4741,4643,4521,4366,4187,4001,3796,3595,3387,3170,2943,2732,2528,2319,2120,1924,1748,1572,1418,1258,1101,959,808,655,457,238,-11,-271,-554,-848,-1130,-1349,-1447,-1408,-1198,-751,-48,969,2290,3781,5427,7137,8855,10431,11817,12821,13404,13603,13370,12721,11671,10252,8531,6670,4781,2958,1283,-172,-1367,-2204,-2720,-2929,-2929,-2749,-2452,-2063,-1651,-1237,-850,-518,-219,26,211,349,481,592,679,757,828,890,976,1077,1169,1257,1370,1498,1621,1773,1915,2054,2209,2368,2517,2675,2855,3032,3221,3415,3591,3783,3991,4198,4400,4601,4810,5020,5238,5443,5645,5843,6022,6188,6334,6474,6615,6764,6891,7009,7117,7216,7283,7327,7333,7302,7240,7161,7072,6957,6822,6689,6549,6396,6232,6057,5864,5666,5470,5262,5040,4817,4592,4368,4137,3909,3677,3451,3245,3049,2845,2638,2443,2264,2087,1920,1756,1580,1423,1300,1173,1049,941,834,723,643,565,481,412,353,303,252,211,168,143,121,105,87,64,61,65,80,81,74,74,73,80,82,79,71,72,79,82,90,97,96,94,97,100,102,103,100,104,112,124,124,127,133,145,165,186,206,230,256,275,298,312,315,315,321,320,326,335,338,336,350,355,358,358,358,363,366,376,375,389,409,438,461,481,505,527,546,557,565,563,567,567,567,567,572,576,580,584,587,587,592,593,597,596,593,608,625,652,676,697,723,744,778,810,837,860,902,963,1027,1113,1200,1285,1385,1510,1642,1779,1942,2101,2269,2452,2642,2837,3031,3230,3428,3639,3853,4046,4240,4418,4590,4732,4845,4928,4986,5031,5049,5042,4996,4921,4833,4720,4582,4418,4245,4053,3852,3647,3427,3211,3003,2802,2595,2375,2172,1991,1832,1678,1525,1361,1213,1068,916,732,518,278,21,-262,-562,-856,-1106,-1282,-1334,-1264,-951,-365,509,1680,3057,4609,6287,8045,9713,11203,12412,13253,13732,13827,13405,12563,11299,9732,7938,6059,4156,2334,759,-573,-1573,-2279,-2678,-2835,-2752,-2520,-2160,-1762,-1351,-949,-571,-235,37,251,407,545,668,775,863,941,1014,1101,1192,1284,1379,1478,1599,1715,1846,1985,2124,2271,2431,2586,2745,2918,3095,3273,3470,3661,3849,4049,4253,4451,4652,4852,5056,5273,5487,5687,5881,6073,6253,6422,6576,6720,6870,7013,7139,7254,7357,7431,7484,7499,7475,7431,7362,7271,7175,7051,6919,6790,6656,6497,6331,6144,5944,5749,5554,5331,5103,4873,4646,4420,4194,3969,3737,3520,3316,3109,2908,2713,2526,2346,2172,2010,1832,1663,1518,1383,1257,1132,1018,900,818,745,663,590,521,468,419,374,332,303,280,260,237,215,208,205,195,188,192,194,203,209,211,213,214,214,213,214,213,215,218,222,225,229,227,227,234,236,239,241,250,256,263,267,277,294,310,331,351,372,395,417,430,435,443,451,454,461,461,461,464,472,472,468,469,471,472,472,477,485,500,523,546,563,588,615,633,648,658,664,670,676,676,679,681,682,688,692,692,692,693,694,693,698,697,699,714,735,759,777,799,817,839,872,896,915,951,1002,1066,1149,1244,1327,1426,1546,1668,1804,1956,2110,2265,2433,2617,2801,3008,3210,3414,3622,3840,4052,4249,4441,4612,4771,4896,4997,5071,5125,5161,5169,5149,5087,5001,4896,4776,4630,4462,4272,4073,3870,3675,3454,3230,3015,2811,2592,2389,2200,2015,1849,1700,1536,1372,1240,1088,923,726,506,257,-6,-287,-592,-881,-1105,-1219,-1211,-1034,-639,18,956,2250,3716,5352,7061,8789,10417,11855,12963,13615,13882,13722,13148,12170,10800,9089,7242,5340,3500,1778,271,-985,-1880,-2424,-2695,-2727,-2587,-2307,-1927,-1503,-1097,-703,-349,-47,208,405,553,678,793,892,968,1043,1113,1202,1289,1385,1468,1567,1684,1807,1953,2100,2246,2406,2574,2730,2896,3075,3245,3432,3626,3805,3997,4210,4415,4622,4832,5035,5235,5446,5640,5836,6028,6212,6379,6537,6682,6831,6988,7135,7266,7371,7463,7543,7588,7597,7568,7511,7430,7350,7248,7116,6983,6845,6694,6531,6354,6162,5954,5755,5542,5320,5094,4869,4642,4411,4181,3950,3723,3511,3309,3104,2893,2694,2508,2335,2169,2005,1827,1664,1531,1405,1283,1165,1053,942,860,781,700,634,577,526,472,438,400,368,345,323,300,287,283,275,268,272,272,273,274,272,274,281,288,290,293,295,296,291,289,285,286,290,285,287,285,293,296,299,299,294,291,302,327,352,378,397,420,449,482,494,492,491,497,504,507,505,505,502,511,516,515,517,514,519,521,527,525,531,552,574,599,621,644,670,698,716,719,723,726,726,726,724,721,717,715,713,708,710,710,712,714,722,726,746,770,794,822,842,867,884,909,932,954,978,1011,1068,1132,1215,1305,1398,1504,1623,1750,1891,2041,2207,2366,2543,2734,2932,3132,3319,3523,3726,3948,4160,4352,4533,4699,4860,4981,5078,5148,5186,5201,5192,5154,5078,4981,4868,4725,4568,4393,4203,3999,3798,3588,3365,3141,2929,2724,2510,2311,2125,1956,1802,1655,1489,1329,1194,1034,853,646,409,162,-106,-394,-697,-955,-1142,-1228,-1161,-905,-366,450,1576,2917,4435,6101,7860,9552,11088,12341,13257,13794,13966,13638,12844,11660,10132,8383,6503,4597,2745,1116,-266,-1339,-2099,-2554,-2757,-2703,-2478,-2131,-1724,-1312,-907,-525,-184,95,312,471,606,730,837,924,1002,1072,1153,1237,1327,1422,1523,1638,1760,1887,2023,2163,2315,2472,2631,2791,2962,3133,3313,3513,3700,3882,4083,4283,4485,4693,4897,5102,5315,5526,5717,5913,6099,6274,6440,6581,6719,6866,7016,7151,7269,7370,7454,7514,7550,7541,7501,7435,7352,7252,7136,6997,6860,6720,6571,6397,6215,6025,5825,5626,5414,5185,4950,4723,4503,4269,4041,3821,3601,3387,3186,2979,2772,2592,2408,2227,2055,1884,1716,1568,1446,1309,1193,1085,972,886,816,731,650,580,522,465,422,374,331,307,286,268,250,243,242,240,237,235,228,228,232,233,232,229,236,236,245,247,244,248,255,262,267,261,261,256,260,256,254,255,255,271,269,284,312,337,359,380,399,422,448,459,454,452,452,451,454,453,456,462,465,472,481,490,487,485,486,493,499,517,536,558,591,616,641,661,678,684,684,689,690,693,696,692,697,700,710,707,705,708,703,706,701,702,702,723,742,755,780,804,833,853,882,905,931,972,1012,1073,1147,1230,1323,1420,1527,1640,1780,1928,2085,2250,2408,2577,2758,2964,3169,3364,3559,3771,3984,4187,4387,4559,4714,4843,4954,5034,5095,5128,5137,5115,5062,4982,4887,4770,4625,4465,4285,4085,3883,3686,3468,3236,3021,2820,2608,2396,2202,2015,1846,1698,1539,1371,1235,1102,949,763,549,305,50,-233,-541,-829,-1068,-1206,-1225,-1079,-738,-120,794,2023,3456,5052,6751,8471,10130,11593,12743,13454,13794,13720,13225,12325,11046,9379,7549,5652,3796,2044,499,-804,-1785,-2371,-2681,-2742,-2623,-2360,-1995,-1581,-1162,-761,-399,-93,173,379,537,673,784,874,949,1025,1095,1177,1261,1345,1431,1534,1652,1777,1911,2059,2207,2364,2531,2686,2850,3033,3216,3392,3585,3765,3947,4150,4354,4549,4748,4955,5157,5375,5585,5779,5974,6157,6331,6487,6629,6769,6921,7062,7190,7301,7400,7474,7529,7543,7520,7470,7398,7306,7196,7065,6930,6791,6644,6487,6313,6128,5930,5733,5526,5303,5081,4854,4625,4396,4170,3944,3725,3511,3310,3099,2897,2697,2514,2333,2162,2002,1826,1664,1530,1402,1279,1168,1057,942,856,775,690,615,553,502,454,409,366,339,319,297,274,249,239,240,243,244,245,250,253,251,254,253,246,247,244,247,252,257,264,273,289,297,307,310,312,313,310,305,299,292,284,285,303,327,350,379,411,436,462,481,487,491,495,498,499,502,507,512,517,521,531,532,535,542,544,550,550,560,576,600,619,632,652,667,686,704,702,700,702,711,711,719,721,719,724,728,726,724,733,733,734,734,734,750,775,796,812,838,869,896,924,949,972,1002,1041,1086,1148,1222,1300,1391,1494,1612,1737,1873,2017,2184,2357,2529,2708,2897,3097,3296,3495,3692,3907,4115,4317,4496,4666,4818,4942,5039,5113,5158,5178,5180,5146,5072,4988,4882,4743,4591,4424,4235,4032,3831,3624,3409,3192,2987,2784,2568,2371,2187,2017,1851,1708,1538,1377,1241,1089,917,718,497,246,-28,-323,-615,-882,-1080,-1197,-1152,-928,-435,333,1387,2691,4159,5795,7525,9223,10789,12097,13076,13680,13882,13643,12922,11820,10343,8647,6797,4904,3080,1434,16,-1109,-1920,-2431,-2682,-2672,-2477,-2161,-1766,-1357,-940,-549,-200,90,327,501,640,765,873,960,1039,1107,1180,1268,1361,1453,1549,1657,1770,1890,2029,2167,2306,2459,2610,2766,2936,3120,3300,3496,3692,3879,4076,4278,4479,4675,4877,5079,5293,5509,5703,5907,6101,6291,6462,6612,6743,6894,7049,7187,7305,7411,7494,7559,7599,7593,7561,7501,7418,7321,7206,7085,6955,6820,6662,6496,6320,6131,5932,5732,5518,5297,5075,4851,4621,4402,4175,3955,3730,3518,3309,3103,2904,2705,2522,2340,2171,2010,1844,1695,1567,1444,1322,1207,1094,983,907,826,744,674,624,578,529,490,451,423,396,374,353,340,345,345,342,345,355,359,356,359,363,373,377,374,375,372,377,382,376,375,379,388,394,396,401,396,405,408,409,409,404,411,429,455,474,495,513,528,549,572"
];
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var w = canvas.width,
            h = canvas.height,
            speed = 1,
            scanBarWidth = 20,
            i=0,
            data = EcgData[0].split(','),
            color='#ff0800';
            var px = 0;
            var opx = 0;
            var py = h/2;
            var opy = py;
            ctx.strokeStyle = color;
            ctx.lineWidth = 3;
            ctx.setTransform(1,0,0,-1,0,h);

         
            drawWave();

            function drawWave() {
               px += speed;
                    ctx.clearRect( px,0, scanBarWidth, h);
                    ctx.beginPath();
                    ctx.moveTo( opx,  opy);
                    ctx.lineJoin= 'round';
                    py=(data[++i>=data.length? i=0 : i++]/450+10);
                    ctx.lineTo(px, py);
                    ctx.stroke();
                     opx = px;
                    opy = py;
                    if (opx > w) {px = opx = -speed;}


                     requestAnimationFrame(drawWave);
            }

2 Answers

Here is the code I ended up using.

<svg xmlns="http://www.w3.org/2000/svg" width="550" height="500" viewBox="0 0 550 500" fill="none">
<g id="Frame 2">
<g id="Symbols">
<g id="Scene/Home">
<g id="Clock">
<path id="Clock Frame" d="M114 141C143.271 141 167 117.271 167 88C167 58.7289 143.271 35 114 35C84.7289 35 61 58.7289 61 88C61 117.271 84.7289 141 114 141Z" fill="#F2F2F2"/>
<path id="Time" d="M114 49C115.657 49 117 47.6569 117 46C117 44.3431 115.657 43 114 43C112.343 43 111 44.3431 111 46C111 47.6569 112.343 49 114 49Z" fill="black" fill-opacity="0.1"/>
<path id="Time_2" d="M72 91C73.6569 91 75 89.6569 75 88C75 86.3431 73.6569 85 72 85C70.3431 85 69 86.3431 69 88C69 89.6569 70.3431 91 72 91Z" fill="black" fill-opacity="0.1"/>
<path id="Time_3" d="M156 91C157.657 91 159 89.6569 159 88C159 86.3431 157.657 85 156 85C154.343 85 153 86.3431 153 88C153 89.6569 154.343 91 156 91Z" fill="black" fill-opacity="0.1"/>
<path id="Time_4" d="M114 133C115.657 133 117 131.657 117 130C117 128.343 115.657 127 114 127C112.343 127 111 128.343 111 130C111 131.657 112.343 133 114 133Z" fill="black" fill-opacity="0.1"/>
<path id="Hand" fill-rule="evenodd" clip-rule="evenodd" d="M114 52L116 87H112L114 52Z" fill="#AFB9C5"/>
<path id="Hand_2" fill-rule="evenodd" clip-rule="evenodd" d="M131.698 105.698L113.314 90.1421L116.142 87.3137L131.698 105.698Z" fill="#AFB9C5"/>
<path id="Time_5" d="M114 92C116.209 92 118 90.2091 118 88C118 85.7909 116.209 84 114 84C111.791 84 110 85.7909 110 88C110 90.2091 111.791 92 114 92Z" fill="#C5CFD6"/>
</g>
</g>
</g>
<g id="Symbols_2">
<g id="Scene/Home_2">
<g id="Big Leaf Plant">
<g id="Big Ass Leaf">
<path id="leaf" fill-rule="evenodd" clip-rule="evenodd" d="M106.258 239.173C109.123 238.823 112.18 238.947 114.844 240.077C120.509 242.482 122.119 249.174 122.041 254.614C121.957 260.468 120.714 266.863 125.165 271.58C127.211 273.748 129.756 275.408 131.765 277.617C133.912 279.977 135.597 282.677 136.844 285.577C139.134 290.903 140.258 297.167 138.164 302.754C136.32 307.674 131.681 312.114 132.683 317.708C133.729 323.543 139.612 328.004 143.29 332.351C147.453 337.269 151.286 343.556 151.916 350.006C152.519 356.188 149.828 362.44 145.699 367.113C137.448 376.451 125.045 381.028 112.54 381C107.23 380.988 101.219 380.748 96.6366 377.895C95.2204 377.013 94.4733 376.023 93.6315 374.648C92.8767 373.414 91.8796 372.612 90.7255 371.739C88.1899 369.822 86.3587 367.239 85.1901 364.347C80.6522 353.114 84.2792 339.218 90.6312 329.243C92.1364 326.88 93.3686 324.605 92.6374 321.789C91.8744 318.848 89.999 316.196 88.3403 313.669C86.7011 311.17 84.8299 308.787 83.5488 306.087C82.207 303.257 81.8292 300.294 82.0662 297.198C82.5118 291.381 85.0227 286.013 88.5777 281.336C92.0017 276.83 96.0221 272.518 96.0311 266.615C96.041 260.357 91.8577 254.791 93.6399 248.429C94.3778 245.795 95.86 243.092 98.2486 241.513C100.539 239.998 103.564 239.502 106.258 239.173Z" fill="#DDE3E9"/>
<path id="middle thing" fill-rule="evenodd" clip-rule="evenodd" d="M104.386 249.176C104.44 248.336 105.437 247.832 106.222 248.051C107.254 248.34 107.235 249.305 107.207 250.165C107.124 252.808 107.506 255.377 108.142 257.942C109.462 263.274 111.903 268.186 113.836 273.308C115.768 278.425 116.675 283.709 115.542 289.124C114.473 294.23 112.795 299.203 111.701 304.315C110.738 308.821 109.712 313.573 111.18 318.067C112.592 322.393 115.714 325.916 117.962 329.825C122.617 337.918 124.681 346.896 124.957 356.135C125.085 360.425 124.97 364.755 123.975 368.963C123.402 371.386 122.632 374.66 120.556 376.333C119.599 377.105 117.961 377.371 117.155 376.229C116.399 375.158 117.062 373.499 117.303 372.357C118.343 367.413 118.552 362.361 118.303 357.342C118.062 352.48 117.487 347.626 115.957 342.982C114.537 338.673 112.379 334.802 109.84 331.032C107.252 327.191 104.562 323.341 103.493 318.789C102.406 314.166 103.289 309.462 104.469 304.927C105.717 300.131 107.352 295.472 109.042 290.805C110.689 286.258 111.272 281.955 110.363 277.196C108.567 267.794 103.76 258.968 104.386 249.176Z" fill="#C5CFD6"/>
</g>
<g id="Big Ass Leaf_2">
<path id="leaf_2" fill-rule="evenodd" clip-rule="evenodd" d="M181.892 250.582C185.437 251.659 188.958 253.395 191.485 256.118C196.858 261.909 195.209 270.661 192.243 277.053C189.05 283.933 184.212 290.849 186.94 298.743C188.193 302.372 190.301 305.659 191.49 309.316C192.761 313.224 193.309 317.294 193.239 321.372C193.11 328.862 191.118 336.855 185.708 342.373C180.945 347.232 173.158 350.07 171.377 357.206C169.518 364.651 174.061 372.988 176.078 380.041C178.36 388.024 179.533 397.453 176.862 405.409C174.303 413.034 167.842 419.028 160.528 422.406C145.915 429.156 128.949 428.117 114.296 421.578C108.075 418.801 101.151 415.391 97.2845 409.633C96.0897 407.853 95.7364 406.294 95.476 404.23C95.2426 402.378 94.4972 400.911 93.6048 399.278C91.644 395.692 90.8618 391.684 91.0198 387.656C91.6345 372.011 103.234 357.464 115.956 348.972C118.971 346.96 121.618 344.912 122.249 341.2C122.909 337.325 122.111 333.213 121.501 329.361C120.899 325.554 119.964 321.763 119.889 317.902C119.811 313.858 120.933 310.157 122.848 306.619C126.445 299.972 132.227 294.93 138.87 291.247C145.267 287.7 152.262 284.692 155.393 277.715C158.712 270.32 156.747 261.561 162.2 254.964C164.458 252.233 167.625 249.807 171.262 249.182C174.749 248.583 178.558 249.57 181.892 250.582Z" fill="#DDE3E9"/>
<path id="middle thing_2" fill-rule="evenodd" clip-rule="evenodd" d="M174.651 262.811C175.154 261.844 176.584 261.769 177.387 262.44C178.443 263.324 177.914 264.456 177.432 265.46C175.95 268.547 175.052 271.789 174.452 275.159C173.204 282.166 173.485 289.262 173.063 296.341C172.642 303.414 170.935 310.147 166.774 315.965C162.85 321.452 158.283 326.462 154.327 331.943C150.841 336.773 147.153 341.863 146.516 347.954C145.901 353.817 147.707 359.626 148.288 365.434C149.492 377.457 147.204 389.171 142.688 400.257C140.591 405.405 138.189 410.472 134.821 414.933C132.882 417.503 130.267 420.977 126.963 421.869C125.44 422.281 123.385 421.739 123.042 419.964C122.718 418.298 124.363 416.682 125.242 415.455C129.047 410.146 131.938 404.273 134.275 398.198C136.54 392.314 138.41 386.265 139.053 379.963C139.649 374.116 139.153 368.401 138.158 362.606C137.144 356.701 136.015 350.732 137.149 344.781C138.3 338.736 141.795 333.628 145.55 328.876C149.521 323.85 153.873 319.19 158.293 314.549C162.6 310.027 165.536 305.238 166.966 299.126C169.79 287.049 168.791 274.078 174.651 262.811Z" fill="#C5CFD6"/>
</g>
<g id="Big Ass Leaf_3">
<path id="leaf_3" fill-rule="evenodd" clip-rule="evenodd" d="M72.306 295C78.2003 295 83.3823 298.124 86.9531 302.558C91.133 307.748 91.9772 314.086 93.6745 320.272C94.5191 323.35 95.9717 326.406 98.5174 328.498C100.833 330.4 103.772 330.78 106.543 331.71C112.082 333.567 116.555 338.041 118.321 343.499C120.476 350.158 118.193 356.873 118.586 363.622C118.947 369.819 125.058 373.685 129.974 376.656C134.821 379.586 139.189 382.328 140.649 388.035C142.197 394.088 142.716 400.844 140.572 406.823C137.002 416.779 126.552 421.163 116.456 421.842C107.293 422.459 95.7719 421.491 88.8907 414.84C84.773 410.86 83.2819 405.293 83.4669 399.755C83.5818 396.311 84.264 392.899 85.146 389.571C85.7711 387.213 86.6157 384.864 86.8563 382.427C87.4959 375.942 81.5026 374.697 76.401 372.916C69.9183 370.654 65.3799 366.38 62.224 360.425C59.285 354.881 58.0519 348.658 59.8137 342.554C60.7135 339.437 62.3456 336.61 64.559 334.205C65.5334 333.146 66.9066 332.263 67.7861 331.151C68.6069 330.112 68.4282 328.766 68.1453 327.55C66.8373 321.931 62.762 317.278 61.3045 311.668C59.9887 306.605 60.7665 300.304 65.3954 297.038C67.3953 295.627 69.8616 295.016 72.306 295Z" fill="#C5CFD6"/>
<path id="middle thing_3" fill-rule="evenodd" clip-rule="evenodd" d="M80.3377 309.641C86.585 316.296 88.2831 325.325 88.7815 334.076C89.0606 338.983 88.7701 344.159 90.2118 348.919C91.4454 352.993 94.3373 356.107 97.3183 359.051C103.319 364.975 110.011 370.999 111.766 379.574C112.796 384.606 112.101 389.804 113.524 394.78C114.817 399.304 117.096 403.748 119.867 407.568C122.098 410.645 125.004 413 127.443 415.867C128.187 416.743 129.253 418.031 128.946 419.267C128.586 420.714 126.743 421.172 125.435 420.945C122.386 420.415 119.819 417.503 117.825 415.386C114.91 412.291 112.432 408.962 110.419 405.227C108.183 401.08 106.383 396.679 105.614 392.026C104.816 387.199 105.213 382.168 103.391 377.535C100.324 369.74 92.886 365.14 87.5082 359.064C80.8077 351.494 81.807 342.072 82.4933 332.759C82.8703 327.641 83.2451 321.862 80.6591 317.189C79.672 315.406 77.4711 313.743 77.0467 311.715C76.6579 309.858 78.7797 307.981 80.3377 309.641Z" fill="#AFB9C5"/>
</g>
<path id="Base" fill-rule="evenodd" clip-rule="evenodd" d="M87 419C87.0004 457.058 93.2112 477 126 477C158.789 477 165 457.058 165 419H87Z" fill="#89C5CC"/>
</g>
</g>
</g>
<g id="Frame 1">
<rect id="Rectangle 1" x="260.5" y="48.5" width="238" height="151" rx="27.5" fill="white" stroke="#C5CFD6" stroke-width="5"/>

<path id="Vector1" d="M498 148.177H462H448.721C439.691 137.031 440.089 143.533 436.769 148.177H423.49C414.194 116.828 397.374 137.031 393.611 148.177H382.324C382.324 190.778 379.225 207.857 376.348 148.177C369.045 11.7777 372.143 31.1396 369.045 148.177C368.473 169.773 366.61 153.286 363.069 148.177H344.478C328.011 123.655 322.124 137.96 314.599 148.177H298H261" stroke="#FF0202" stroke-width="3" stroke-dasharray="545,20" stroke-dashoffset="0">
  <animate 
       attributeName="stroke-dashoffset"
       from="0" to="545"
       dur="2.5s"
       values="0; 63;111; 131; 412; 429; 472; 545"
       keyTimes="0; 0.20; 0.30; 0.38; 0.52; 0.58; 0.7; 1"
       repeatCount="indefinite"/>
  
</path>
</g>
<g id="humaaans/standing 11">
<g id="A Human/Standing">
<g id="Head/Front/Short Beard">
<g id="Head">
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M279.698 116.47C275.09 111.061 271.972 104.433 272.493 97.0056C273.994 75.6051 303.784 80.3129 309.579 91.114C315.374 101.915 314.686 129.313 307.196 131.244C304.21 132.013 297.847 130.128 291.371 126.224L295.436 154.98H271.436L279.698 116.47Z" fill="#B28B67"/>
</g>
<path id="Hair" fill-rule="evenodd" clip-rule="evenodd" d="M292.571 99.369C293.49 112.166 295.92 118.565 299.862 118.565C305.775 118.565 310.791 114.811 313.386 114.811C315.277 114.811 314.855 117.178 313.601 118.933C312.567 120.38 307.53 121.776 307.53 124.02C307.53 126.265 311.509 124.528 311.509 125.859C311.509 128.061 312.209 132.201 308.387 132.201C304.52 132.201 293.431 130.792 291.53 125.052C290.304 121.347 289.511 113.671 289.151 102.022C288.917 101.994 288.678 101.98 288.436 101.98C285.122 101.98 282.436 104.666 282.436 107.98C282.436 109.662 283.128 111.183 284.243 112.272C282.855 114.232 281.299 116.279 279.516 118.391C272.818 114.373 267.848 102.609 274.396 91.3084C276.206 85.7724 280.304 82.8153 285.143 81.4423C289.063 79.8025 293.133 79.6176 296.568 80.6007C303.302 81.1783 309.315 83.2316 311.019 84.4511C311.019 90.8263 309.784 92.7178 299.233 92.5511C296.64 93.9202 294.647 96.278 292.571 99.369Z" fill="#191847"/>
</g>
<g id="Bottom/Standing/Skinny Jeans">
<path id="Leg" fill-rule="evenodd" clip-rule="evenodd" d="M263.436 237.98L299.691 365.207L326.143 458.98H345.436L317.327 237.98H263.436Z" fill="#191847"/>
<path id="Leg_2" fill-rule="evenodd" clip-rule="evenodd" d="M253.74 237.98C252.902 303.554 250.042 339.32 249.162 345.278C248.281 351.236 234.968 389.136 209.222 458.98H229.209C261.985 391.977 280.282 354.076 284.098 345.278C287.915 336.48 299.695 300.714 317.436 237.98H253.74Z" fill="#2F3676"/>
<g id="Accessories/Shoe/Flat Pointy">
<path id="Shoe" fill-rule="evenodd" clip-rule="evenodd" d="M207.436 476.98L208.436 455.98H229.436C239.394 462.98 252.394 468.647 268.436 472.98V476.98H230.436L217.436 474.98V476.98H207.436Z" fill="#191847"/>
</g>
<g id="Accessories/Shoe/Flat Pointy_2">
<path id="Shoe_2" fill-rule="evenodd" clip-rule="evenodd" d="M323.436 476.98L324.436 455.98H345.436C355.394 462.98 368.394 468.647 384.436 472.98V476.98H346.436L333.436 474.98V476.98H323.436Z" fill="#191847"/>
</g>
</g>
<g id="Body/Lab Coat">
<path id="Skin" fill-rule="evenodd" clip-rule="evenodd" d="M347.795 221.59L377.981 247.182C386.449 250.114 393.457 253.516 399.005 257.387C400.286 258.729 401.762 261.368 396.12 260.535C390.478 259.703 384.506 259.08 383.588 260.96C382.67 262.84 385.941 265.394 384.176 267.894C383 269.561 378.321 264.848 370.142 253.757L339.545 238.487L347.795 221.59ZM211.103 210.516L228.815 213.088C209.803 254.338 199.61 276.153 198.237 278.534C195.148 283.89 198.781 293.22 200.202 298.16C193.023 300.232 195.316 289.142 186.239 291.908C177.954 294.433 171.118 300.157 162.912 293.35C161.904 292.514 161.054 289.777 164.26 288.183C172.249 284.211 183.977 276.943 185.8 274.264C188.287 270.611 196.721 249.362 211.103 210.516Z" fill="#B28B67"/>
<path id="Coat Back" fill-rule="evenodd" clip-rule="evenodd" d="M285.131 138.312L296.106 134.683C310.993 171.873 333.196 207.856 370.293 238.25L361.12 254.077C328.517 234.872 297.654 219.953 285.131 191.135C280.928 181.463 284.788 149.877 285.131 138.312Z" fill="#C5CFD6"/>
<path id="Shirt" fill-rule="evenodd" clip-rule="evenodd" d="M247.436 242.98C278.874 246.313 303.62 246.313 321.672 242.98C323.909 242.567 324.262 238.822 323.224 236.281C307.072 196.705 295.996 162.172 295.996 134.683C293.033 136.177 287.846 136.401 280.436 135.354C260.522 163.683 251.369 196.186 247.436 242.98Z" fill="#323337"/>
<path id="Coat Front" fill-rule="evenodd" clip-rule="evenodd" d="M275.485 132.98H283.784C285.717 144.345 291.811 298.243 310.627 348.586H208.821C211.028 302.467 228.439 247.067 246.076 200.708C230.48 214.98 216.888 239.161 205.298 273.253L186.229 268.358C200.407 207.261 229.558 162.355 273.682 133.639C273.778 133.418 273.873 133.199 273.968 132.98H274.702C274.972 132.807 275.243 132.634 275.515 132.461L275.485 132.98V132.98Z" fill="#DDE3E9"/>
</g>
</g>
</g>
</g>
</svg>

Here is a code snippet for just the ECG:

<svg xmlns="http://www.w3.org/2000/svg" width="550" height="500" viewBox="0 0 550 500" fill="none">
<g id="Frame 1">
<rect id="Rectangle 1" x="260.5" y="48.5" width="238" height="151" rx="27.5" fill="white" stroke="#C5CFD6" stroke-width="5"/>

<path id="Vector1" d="M498 148.177H462H448.721C439.691 137.031 440.089 143.533 436.769 148.177H423.49C414.194 116.828 397.374 137.031 393.611 148.177H382.324C382.324 190.778 379.225 207.857 376.348 148.177C369.045 11.7777 372.143 31.1396 369.045 148.177C368.473 169.773 366.61 153.286 363.069 148.177H344.478C328.011 123.655 322.124 137.96 314.599 148.177H298H261" stroke="#FF0202" stroke-width="3" stroke-dasharray="545,20" stroke-dashoffset="0">
  <animate 
       attributeName="stroke-dashoffset"
       from="0" to="545"
       dur="2.5s"
       values="0; 63;111; 131; 412; 429; 472; 545"
       keyTimes="0; 0.20; 0.30; 0.38; 0.52; 0.58; 0.7; 1"
       repeatCount="indefinite"/>
  
</path>
</g>
</svg>

Answered by Varun Jain on November 20, 2021

If you need it done with javascript it can be done. You can do it also with css. In the next example I'm doing it using SMIL animations.

I would like to know if this is what you would like to achieve.

<svg xmlns="http://www.w3.org/2000/svg" width="550" height="500" viewBox="0 0 550 500" fill="none">
<g id="Frame1">
<rect id="Rectangle1" x="260.5" y="48.5" width="238" height="151" rx="27.5" fill="white" stroke="#C5CFD6" stroke-width="5"/>

<path id="Vector1" d="M498 148.177H462H448.721C439.691 137.031 440.089 143.533 436.769 148.177H423.49C414.194 116.828 397.374 137.031 393.611 148.177H382.324C382.324 190.778 379.225 207.857 376.348 148.177C369.045 11.7777 372.143 31.1396 369.045 148.177C368.473 169.773 366.61 153.286 363.069 148.177H344.478C328.011 123.655 322.124 137.96 314.599 148.177H298H261" stroke="#FF0202" stroke-width="3" stroke-dasharray="545,50" stroke-dashoffset="0">
  <animate 
       attributeName="stroke-dashoffset"
       from="0" to="545"
       dur="5s"
       repeatCount="indefinite"/>
  
</path>
</g>
</svg>

Answered by enxaneta on November 20, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP