How to make the line which is in skillshare?-CodePudding

How to make these kind of lines?
CodePudding user response：
Skillshare uses one very tall svg file to create this line. Everything else is layered on top of the lines to create this effect. You can find it in the inspector from loh-content/loh-path/svg.
Here you can see how the line goes throughout the page:
<!-- Important: This is directly from skillshare.com, so this is just an example to see how the line works, do not steal other creators work -->
<svg width="2560" height="5709" viewBox="0 0 2560 5709" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M535.771 5.99991L535.771 1.99991L535.771 5.99991ZM1390.77 1627L1390.77 1631L1390.77 1627ZM1056.04 2081.64L1053.52 2078.53L1056.04 2081.64ZM1288.27 2946.5L1287.71 2950.46L1288.27 2946.5ZM1222.27 4823.5L1222.72 4819.52L1222.27 4823.5ZM871.271 4580L867.358 4579.17L871.271 4580ZM1976.27 5703L1976.27 5707L1976.27 5703ZM1283.77 1400.5L1287.53 1399.15L1283.77 1400.5ZM1390.77 1623C1262.14 1623 1152.97 1610.24 1076.09 1575.91C1037.71 1558.77 1007.55 1536.34 986.985 1507.6C966.442 1478.9 955.271 1443.64 955.271 1400.5L947.271 1400.5C947.271 1445.11 958.85 1482.04 980.479 1512.26C1002.08 1542.44 1033.52 1565.66 1072.83 1583.21C1151.32 1618.26 1261.9 1631 1390.77 1631L1390.77 1623ZM535.771 9.99991C686.612 9.99985 898.913 46.0499 1104.33 134.742C1309.74 223.43 1507.94 364.614 1631.09 574.663L1637.99 570.616C1513.73 358.666 1313.94 216.529 1107.5 127.397C901.076 38.2698 687.694 1.99985 535.771 1.99991L535.771 9.99991ZM1631.09 574.663C1754.24 784.72 1783.19 1047.27 1736.53 1257.2C1689.8 1467.41 1567.89 1623 1390.77 1623L1390.77 1631C1573.65 1631 1697.33 1470.41 1744.34 1258.94C1791.4 1047.19 1762.24 782.558 1637.99 570.616L1631.09 574.663ZM1775.28 4158.71C1768.98 4245.32 1713.71 4299.62 1632.18 4336.23C1550.5 4372.91 1443.22 4391.44 1334.54 4406.6C1226.14 4421.72 1116.27 4433.51 1030.41 4456.85C944.858 4480.11 880.89 4515.41 867.358 4579.17L875.184 4580.83C887.652 4522.09 946.958 4487.83 1032.5 4464.57C1117.73 4441.4 1226.78 4429.71 1335.65 4414.52C1444.24 4399.37 1552.6 4380.74 1635.46 4343.53C1718.48 4306.25 1776.66 4249.93 1783.26 4159.29L1775.28 4158.71ZM867.358 4579.17C852.894 4647.32 891.635 4703.94 958.227 4745.95C1024.84 4787.97 1120.22 4816.07 1221.82 4827.47L1222.72 4819.52C1121.83 4808.2 1027.74 4780.34 962.496 4739.18C897.232 4698.01 861.723 4644.25 875.184 4580.83L867.358 4579.17ZM1221.82 4827.47C1345.78 4841.39 1430.52 4858.52 1483.29 4880.15C1509.67 4890.96 1527.71 4902.75 1538.7 4915.52C1549.56 4928.14 1553.66 4941.82 1551.98 4957C1550.29 4972.37 1542.64 4989.56 1529.37 5008.83C1516.13 5028.07 1497.49 5049.09 1474.2 5072.11C1427.62 5118.16 1362.9 5171.74 1286.73 5234.4L1291.81 5240.58C1367.89 5177.99 1432.93 5124.16 1479.83 5077.8C1503.28 5054.62 1522.32 5033.19 1535.96 5013.37C1549.58 4993.58 1558.04 4975.11 1559.93 4957.88C1561.86 4940.44 1557.04 4924.56 1544.76 4910.3C1532.61 4896.18 1513.27 4883.79 1486.33 4872.75C1432.46 4850.67 1346.76 4833.45 1222.72 4819.52L1221.82 4827.47ZM955.271 1400.5C955.271 1357.72 971.384 1325.19 996.388 1303.12C1021.46 1281 1055.74 1269.18 1092.31 1268.46C1165.45 1267.02 1246.92 1309.97 1280.01 1401.86L1287.53 1399.15C1253.19 1303.75 1168.41 1258.96 1092.15 1260.46C1054.03 1261.21 1017.83 1273.54 991.095 1297.13C964.292 1320.78 947.271 1355.53 947.271 1400.5L955.271 1400.5ZM1280.01 1401.86C1311.13 1488.28 1337.41 1590.25 1314.64 1704.06C1291.88 1817.8 1220 1943.99 1053.52 2078.53L1058.55 2084.75C1226.08 1949.36 1299.27 1821.65 1322.48 1705.63C1345.68 1589.68 1318.83 1486.05 1287.53 1399.15L1280.01 1401.86ZM1286.73 5234.4C1210.21 5297.35 1175.46 5358.84 1177.53 5416.05C1179.61 5473.33 1218.52 5524.7 1285.43 5567.55C1419.21 5653.24 1668.03 5707 1976.27 5707L1976.27 5699C1668.52 5699 1421.58 5645.26 1289.74 5560.82C1223.84 5518.61 1187.47 5469.26 1185.53 5415.76C1183.59 5362.21 1216.08 5302.88 1291.81 5240.58L1286.73 5234.4ZM1053.52 2078.53C905.305 2198.31 816.588 2308.6 774.368 2407.89C732.088 2507.33 736.475 2595.68 774.35 2671.02C812.148 2746.2 883.066 2807.97 973.063 2854.95C1063.09 2901.95 1172.49 2934.29 1287.71 2950.46L1288.83 2942.54C1174.31 2926.46 1065.82 2894.35 976.765 2847.86C887.674 2801.35 818.293 2740.61 781.498 2667.42C744.779 2594.39 740.278 2508.51 781.73 2411.02C823.243 2313.4 910.881 2204.09 1058.55 2084.75L1053.52 2078.53ZM1342.51 3448.44C1283.81 3472.78 1246.37 3496.79 1226.28 3521.16C1216.18 3533.42 1210.39 3545.86 1208.58 3558.52C1206.78 3571.18 1209.01 3583.77 1214.47 3596.24C1225.32 3621 1249.05 3645.69 1280.28 3670.75C1311.61 3695.89 1350.96 3721.78 1393.6 3748.81C1479.05 3802.99 1577.79 3861.84 1653.65 3929.29C1729.56 3996.77 1781.59 4072 1775.28 4158.71L1783.26 4159.29C1789.85 4068.75 1735.4 3991.26 1658.96 3923.31C1582.48 3855.31 1483 3796.01 1397.89 3742.05C1355.25 3715.02 1316.23 3689.34 1285.29 3664.52C1254.26 3639.61 1231.83 3615.94 1221.8 3593.03C1216.83 3581.66 1214.95 3570.58 1216.5 3559.65C1218.06 3548.7 1223.1 3537.6 1232.45 3526.25C1251.26 3503.43 1287.21 3480.03 1345.57 3455.83L1342.51 3448.44ZM1287.71 2950.46C1428.88 2970.28 1531.79 2999.58 1599.52 3035.23C1667.32 3070.92 1698.94 3112.42 1699.79 3156.36C1700.65 3200.59 1670.46 3249.23 1609.83 3299.31C1549.36 3349.26 1459.37 3399.99 1342.51 3448.44L1345.57 3455.83C1462.82 3407.22 1553.61 3356.13 1614.93 3305.48C1676.09 3254.95 1708.72 3204.2 1707.79 3156.2C1706.85 3107.93 1672.07 3064.38 1603.24 3028.15C1534.34 2991.88 1430.39 2962.41 1288.83 2942.54L1287.71 2950.46ZM535.771 1.99991C416.807 1.99996 142.392 23.7138 -2.38593 56.5995L-0.61408 64.4008C143.408 31.6865 417.194 9.99996 535.771 9.99991L535.771 1.99991ZM1976.27 5707C2123.6 5707 2263.21 5694.36 2369.23 5680.72C2475.12 5667.09 2547.81 5652.44 2561.18 5648.32L2558.82 5640.68C2546.19 5644.56 2474.13 5659.16 2368.21 5672.78C2262.43 5686.39 2123.17 5699 1976.27 5699L1976.27 5707Z" fill="#00FF84"></path>
</svg>
So to answer vaguely your question you will need to look into these:
How to create svg images
Basic CSS for layering the images (z-index)