3

I have a tikz path that is generated by an external software (Inkscape, svg2tikz export).

\documentclass[
    tikz,
    border = 2mm
    ]
    {standalone}
\usepackage{tikz}

\begin{document}

\begin{tikzpicture}[
    y = 0.80pt, 
    x = 0.80pt, 
    yscale = -1, 
    xscale = 1, 
    ]
  \path[
    draw = black,
    line width = 2mm
    ]
    (332.9659,1012.9324) .. controls (320.7194,1015.0713) and (308.5513,1017.6584)
    .. (296.3182,1019.8787) .. controls (286.1156,1021.7304) and
    (275.9238,1023.7694) .. (265.6587,1025.1483) .. controls (259.8755,1025.9251)
    and (254.0082,1026.1375) .. (248.1732,1026.3459) .. controls
    (242.8303,1026.5367) and (237.4497,1026.6922) .. (232.1249,1026.3459) ..
    controls (227.6291,1026.0534) and (223.1266,1025.3375) .. (218.7114,1024.4297)
    .. controls (214.5835,1023.5810) and (210.1897,1022.9433) ..
    (206.4955,1021.0763) .. controls (202.7644,1019.1907) and (199.5125,1016.1092)
    .. (196.4353,1013.1719) .. controls (190.7298,1007.7257) and
    (185.7978,1001.3670) .. (180.1475,995.9260) .. controls (179.3305,995.1393)
    and (178.0932,994.3054) .. (177.0336,994.4888) .. controls (173.9414,995.0240)
    and (170.8437,997.3681) .. (167.6920,998.0817) .. controls (166.6121,998.3264)
    and (165.1752,998.1197) .. (164.3386,997.3631) .. controls (155.9933,989.8160)
    and (148.4492,980.9465) .. (140.1464,973.1708) .. controls (138.3890,971.5250)
    and (136.2954,970.2043) .. (134.1582,969.0988) .. controls (129.3491,966.6114)
    and (123.8976,965.1840) .. (119.3075,962.3921) .. controls (116.1529,960.4733)
    and (113.2944,957.7843) .. (110.9241,954.9667) .. controls (109.0627,952.7542)
    and (107.4937,950.0742) .. (106.6126,947.3019) .. controls (104.2202,939.7745)
    and (103.7510,931.4349) .. (101.1034,924.0677) .. controls (100.0783,921.2151)
    and (97.8147,918.6104) .. (95.5943,916.6424) .. controls (94.3016,915.4966)
    and (92.3033,915.0592) .. (90.5642,914.7261) .. controls (88.5507,914.3406)
    and (86.3863,914.2895) .. (84.3365,914.4865) .. controls (82.2344,914.6884)
    and (80.2092,915.7651) .. (78.1088,915.9236) .. controls (75.9776,916.0843)
    and (73.6542,916.0605) .. (71.6416,915.4446) .. controls (69.7419,914.8631)
    and (68.0022,913.5460) .. (66.3720,912.3307) .. controls (63.6109,910.2725)
    and (61.0092,907.9606) .. (58.4676,905.6239) .. controls (56.0590,903.4096)
    and (53.4432,901.3162) .. (51.5213,898.6776) .. controls (44.0218,888.3818)
    and (36.6639,877.7226) .. (30.2033,866.8205) .. controls (28.9990,864.7881)
    and (28.3770,862.1563) .. (28.5266,859.8742) .. controls (28.6963,857.2858)
    and (29.9148,854.5932) .. (31.1614,852.2093) .. controls (34.4658,845.8904)
    and (38.3145,839.7845) .. (42.1797,833.7657) .. controls (43.9034,831.0816)
    and (45.6897,828.3737) .. (47.9284,826.1009) .. controls (66.6084,807.1357)
    and (85.6046,788.3508) .. (104.9359,770.0515) .. controls (108.0403,767.1127)
    and (111.5264,764.5186) .. (115.2356,762.3866) .. controls (196.3989,715.7348)
    and (277.9891,669.6342) .. (359.5535,623.7002) .. controls (360.7857,623.0063)
    and (362.2800,622.4299) .. (363.6254,622.5026) .. controls (365.2342,622.5896)
    and (366.7746,623.8031) .. (368.4159,624.1793) .. controls (370.6070,624.6814)
    and (373.0342,625.5210) .. (375.1227,625.1374) .. controls (376.9465,624.8026)
    and (378.8412,623.4123) .. (380.1528,622.0236) .. controls (381.5558,620.5380)
    and (382.2325,618.3529) .. (383.2667,616.5144) .. controls (384.3882,614.5205)
    and (385.2261,612.3133) .. (386.6201,610.5262) .. controls (388.3400,608.3212)
    and (390.1637,605.9449) .. (392.6082,604.5381) .. controls (491.1644,547.8196)
    and (591.0576,492.8092) .. (689.6222,436.1503) .. controls (691.3397,435.1630)
    and (692.4301,433.2581) .. (693.4546,431.5993) .. controls (694.1068,430.5434)
    and (694.4284,429.2375) .. (694.6523,428.0064) .. controls (694.9074,426.6027)
    and (694.6383,425.1015) .. (694.8919,423.6949) .. controls (695.1226,422.3869)
    and (695.3539,420.9078) .. (696.0895,419.8625) .. controls (696.8709,418.7521)
    and (698.1813,417.7797) .. (699.4430,417.2276) .. controls (700.7361,416.6619)
    and (702.3037,416.5307) .. (703.7545,416.5091) .. controls (707.6532,416.4508)
    and (711.5956,417.1307) .. (715.4913,416.9881) .. controls (718.1427,416.8911)
    and (720.9106,416.6436) .. (723.3957,415.7905) .. controls (726.2600,414.8072)
    and (728.8431,412.9498) .. (731.5396,411.4790) .. controls (741.1389,406.2431)
    and (750.5382,400.5979) .. (760.2829,395.6702) .. controls (764.5905,393.4919)
    and (769.0562,391.5041) .. (773.6964,390.1611) .. controls (818.1593,377.2921)
    and (862.8834,365.1221) .. (907.5922,353.0343) .. controls (930.5099,346.8381)
    and (953.5079,340.6991) .. (976.5761,335.3093) .. controls (979.1373,334.7109)
    and (981.8461,335.0244) .. (984.4805,335.0697) .. controls (991.1078,335.1838)
    and (997.9201,334.9425) .. (1004.3613,335.7882) .. controls
    (1005.8246,335.9804) and (1007.4153,337.0847) .. (1008.1937,338.1835) ..
    controls (1008.7726,339.0009) and (1008.4901,340.4179) .. (1008.4333,341.5369)
    .. controls (1006.1748,386.0080) and (1004.0656,430.5328) ..
    (1001.2475,474.9536) .. controls (1001.0316,478.3584) and (1000.1977,481.7127)
    .. (999.3313,485.0138) .. controls (990.9360,517.0031) and (982.5528,549.0430)
    .. (973.4624,580.8247) .. controls (972.0934,585.6108) and (970.0666,590.2075)
    .. (967.9532,594.7173) .. controls (952.1820,628.3722) and (936.8982,662.6058)
    .. (919.8082,695.3188) .. controls (918.2949,698.2156) and (914.9428,699.8358)
    .. (912.1434,701.5465) .. controls (904.8825,705.9837) and (896.6385,709.1785)
    .. (889.6278,713.7624) .. controls (888.3348,714.6078) and (887.3808,716.3515)
    .. (887.2326,717.8344) .. controls (886.9818,720.3437) and (887.1015,723.4629)
    .. (888.4302,725.7388) .. controls (896.8424,740.1499) and (907.4299,753.6924)
    .. (916.4549,767.8956) .. controls (917.1708,769.0222) and (917.7919,770.5664)
    .. (917.6525,771.7280) .. controls (917.5527,772.5625) and (916.6032,773.4728)
    .. (915.7362,773.8838) .. controls (882.7501,789.5212) and (849.1049,804.1849)
    .. (816.0929,819.8730) .. controls (813.6548,821.0317) and (811.5213,822.7699)
    .. (809.3862,824.4241) .. controls (793.7963,836.5027) and (778.4697,848.9366)
    .. (762.9178,861.0718) .. controls (757.3912,865.3842) and (751.5932,869.3566)
    .. (746.1509,873.7667) .. controls (742.3314,876.8618) and (738.5935,880.0979)
    .. (735.1327,883.5873) .. controls (728.9326,889.8386) and (723.4611,896.8436)
    .. (717.1681,902.9890) .. controls (713.2413,906.8238) and (709.0030,910.5452)
    .. (704.4732,913.5282) .. controls (702.4560,914.8567) and (699.9065,915.4246)
    .. (697.5268,915.9235) .. controls (694.9563,916.4625) and (692.2441,916.7561)
    .. (689.6225,916.6421) .. controls (686.7350,916.5168) and (683.6774,916.2140)
    .. (680.9995,915.2050) .. controls (678.1681,914.1381) and (675.7551,911.9683)
    .. (673.0951,910.4144) .. controls (667.6911,907.2576) and (662.4040,903.7847)
    .. (656.8072,901.0728) .. controls (654.6593,900.0321) and (652.2196,899.4318)
    .. (649.8609,899.1566) .. controls (647.4291,898.8728) and (644.8874,899.1149)
    .. (642.4356,899.3962) .. controls (640.0170,899.6740) and (637.6010,900.1804)
    .. (635.2497,900.8335) .. controls (628.9780,902.5756) and (622.6585,904.3504)
    .. (616.5666,906.5821) .. controls (614.5944,907.3046) and (612.7106,908.4243)
    .. (611.0575,909.6959) .. controls (609.5967,910.8196) and (608.2651,912.2449)
    .. (607.2250,913.7679) .. controls (606.0296,915.5184) and (605.3498,917.6218)
    .. (604.3507,919.5166) .. controls (603.0344,922.0131) and (601.8091,924.5809)
    .. (600.2787,926.9419) .. controls (599.0146,928.8923) and (597.7090,930.9532)
    .. (595.9672,932.4511) .. controls (593.7168,934.3864) and (590.9013,935.7215)
    .. (588.3024,937.2416) .. controls (586.6697,938.1966) and (585.0801,939.4546)
    .. (583.2723,939.8764) .. controls (580.2895,940.5724) and (577.0451,940.5485)
    .. (573.9308,940.5950) .. controls (571.6957,940.6273) and (569.3062,940.7987)
    .. (567.2240,940.1159) .. controls (564.4358,939.2018) and (561.8778,937.3695)
    .. (559.3196,935.8045) .. controls (555.0912,933.2177) and (551.2252,929.9199)
    .. (546.8641,927.6605) .. controls (544.5983,926.4867) and (541.9613,925.7376)
    .. (539.4388,925.5048) .. controls (536.7716,925.2586) and (533.8744,925.4262)
    .. (531.2949,926.2233) .. controls (525.0917,928.1407) and (519.2481,931.4207)
    .. (513.0908,933.6487) .. controls (507.1120,935.8121) and (501.0147,937.7261)
    .. (494.8867,939.3974) .. controls (492.2321,940.1213) and (489.4809,940.6239)
    .. (486.7427,940.8345) .. controls (483.2532,941.1029) and (479.6770,940.5014)
    .. (476.2036,940.8345) .. controls (473.8485,941.0605) and (471.3883,941.4720)
    .. (469.2573,942.5112) .. controls (458.4538,947.7796) and (448.0947,954.1520)
    .. (437.4002,959.7572) .. controls (423.2637,967.1663) and (408.6889,973.8815)
    .. (394.7642,981.5542) .. controls (393.0397,982.5044) and (391.4734,984.0683)
    .. (390.4528,985.6261) .. controls (389.9564,986.3838) and (390.6033,987.6603)
    .. (390.2131,988.5004) .. controls (389.5653,989.8959) and (388.6932,991.5542)
    .. (387.3388,992.3329) .. controls (382.3058,995.2269) and (376.0275,996.6104)
    .. (371.0510,999.5187) .. controls (369.8796,1000.2033) and
    (369.1546,1001.6530) .. (369.0704,1003.0883) .. controls (369.0341,1003.7061)
    and (369.1149,1004.2761) .. (369.0237,1004.8643) .. controls
    (368.8174,1006.1932) and (367.4525,1007.4004) .. (366.2604,1007.6627) ..
    controls (355.4761,1010.0352) and (344.0335,1010.9993) .. (332.9661,1012.9323)
    -- cycle;
\end{tikzpicture}

\end{document}

The Problem

I want to have a kind of color gradient that has a sharp transition. It does not have to be a gradient - I just want to color a specific fraction of the path differently. As @cfr mentioned in a comment, it could be two paths with different colors that are on top of each other.

Here's a poor man's illustration:

enter image description here

enter image description here

As you see, I want to control the fraction of the path that is colored.

Alternative Path (Segmented)

I managed to generate a segmented path (100 separate paths). The drawback is that you see the fine borders (depending on zoom level).

enter image description here

Here's the code: http://pastebin.com/L3zTxzn0 (Because of the character limit).

Related

  • 1
    Why would you make people copy the contents of 2 files when all the 2nd does is put an MWE wrapper around the 1st? Why make it harder for people to help you? If by a 'sharp transition', you mean the line changes from one colour to another immediately, the solution is to draw 2 lines: one in each colour. Much easier than trying to change the path's colour. You cannot apply a gradient to a path, but only to a filling area you can shade. That's why the workarounds look complicated: this isn't something TikZ is designed to do. – cfr Jan 6 '17 at 0:49
  • @cfr Thanks for the comment. I did not mean to make it complicated. I thought it is clearer that way. You are right, the gradient is maybe the wrong term. I did not know how to describe it better in English. Feel free to improve the wording. – Dr. Manuel Kuehner Jan 6 '17 at 1:16
  • 1
    the borders are just viewers' aliasing effects. You don't need to bother about them – percusse Jan 6 '17 at 10:31
  • @percusse I think that I understand what you mean, but if it is visible then it's a problem. But at this point, this is really not the main problem for me. I can live with these effects :). – Dr. Manuel Kuehner Jan 6 '17 at 10:48
  • @cfr I edited the question accordingly. – Dr. Manuel Kuehner Jan 6 '17 at 16:07
5

This is basically the same as Dr. Manuel Kuehner's answer but illustrates how the svg path can be input directly into TikZ (note that it is advisable to make sure there are spaces between numbers) and uses a postaction to do the drawing all at once:

\documentclass[tikz,border=5]{standalone}
\usetikzlibrary{svg.path,decorations}
\makeatletter
\tikzset{%
  get path length/.code={%
    \tikz@addoption{%
      \pgfgetpath\tikz@tmppath%
      \pgfprocessround\tikz@tmppath\tikz@tmppath%
      \pgf@decorate@parsesoftpath\tikz@tmppath\tikz@discard%
      \global\let#1=\pgf@decorate@totalpathlength%
    }%
  }
}
\tikzset{dashed path/.style={
  get path length=\pathlength,
  draw=black,
  line width=5,
  postaction={
    draw=red,
    line width=5,
    dash pattern=on \pathlength/100*#1 off \pathlength/100*(100-#1),
  }
}}
\begin{document}
\foreach \i in {0,5,...,100}{
\begin{tikzpicture}
\draw [dashed path=\i] svg {
  M62.9 14.9 c-25 -7.74 -56.6 4.8 -60.4 24.3 -3.73 19.6 21.6 35 
   39.6 37.6 42.8 6.2 72.9 -53.4 116 -58.9 65 -18.2 191 101 215 
   28.8 5 -16.7 -7 -49.1 -34 -44 -34 11.5 -31 46.5-14 69.3 9.38 
   12.6 24.2 20.6 39.8 22.9 91.4 9.05 102 -98.9 176 -86.7 18.8 
   3.81 33 17.3 36.7 34.6 2.01 10. 2.124 21.1 -5.18 30.1
};
\end{tikzpicture}
}
\end{document}

enter image description here

  • Great! a) Could it be that the \makeatletter is lonely? Meaning that the \makeatother is missing? b) What are the units that are used here? The SVG ist just numbers. Are pt used by default? In my case, I cannot use the SVG directely. The SVG code of the race track I use looks very complicated. – Dr. Manuel Kuehner Jan 7 '17 at 13:02
  • 1
    @Dr.ManuelKuehner a) Correct, I think I never put in \makeatother on my TeX SX answers, largely due to laziness. (b) Yes the SVG numbers are interpreted as pt. – Mark Wibrow Jan 8 '17 at 10:38
4

Inspired by https://graphicdesign.stackexchange.com/questions/82671 (one of my questions on another stackexchange server) I used a custom dash pattern with very large values in order to get the desired effect:

\begin{tikzpicture}[
    y = 0.80pt, 
    x = 0.80pt, 
    yscale = -1, 
    xscale = 1, 
    dash pattern = on 1500pt off 3000pt % <-- here the magic happens
    ]
.
.
.

To determine the path length I used Inkscape. But also How can I access the value of `\pgfdecoratedpathlength` for use later in the document? worked (as long as the dimensions are not too big).

\documentclass[
    tikz,
    border = 2mm
    ]
    {standalone}
\usepackage{tikz}
\usepackage{calc}

\begin{document}

\begin{tikzpicture}[
    y = 1pt, 
    x = 1pt, 
    yscale = -1, 
    xscale = 1, 
    ]
    % Path 1 | Black | Background Level
  \path[
    draw = black,
    line width = 2mm
    ]
    (332.9659,1012.9324) .. controls (320.7194,1015.0713) and (308.5513,1017.6584)
    .. (296.3182,1019.8787) .. controls (286.1156,1021.7304) and
    (275.9238,1023.7694) .. (265.6587,1025.1483) .. controls (259.8755,1025.9251)
    and (254.0082,1026.1375) .. (248.1732,1026.3459) .. controls
    (242.8303,1026.5367) and (237.4497,1026.6922) .. (232.1249,1026.3459) ..
    controls (227.6291,1026.0534) and (223.1266,1025.3375) .. (218.7114,1024.4297)
    .. controls (214.5835,1023.5810) and (210.1897,1022.9433) ..
    (206.4955,1021.0763) .. controls (202.7644,1019.1907) and (199.5125,1016.1092)
    .. (196.4353,1013.1719) .. controls (190.7298,1007.7257) and
    (185.7978,1001.3670) .. (180.1475,995.9260) .. controls (179.3305,995.1393)
    and (178.0932,994.3054) .. (177.0336,994.4888) .. controls (173.9414,995.0240)
    and (170.8437,997.3681) .. (167.6920,998.0817) .. controls (166.6121,998.3264)
    and (165.1752,998.1197) .. (164.3386,997.3631) .. controls (155.9933,989.8160)
    and (148.4492,980.9465) .. (140.1464,973.1708) .. controls (138.3890,971.5250)
    and (136.2954,970.2043) .. (134.1582,969.0988) .. controls (129.3491,966.6114)
    and (123.8976,965.1840) .. (119.3075,962.3921) .. controls (116.1529,960.4733)
    and (113.2944,957.7843) .. (110.9241,954.9667) .. controls (109.0627,952.7542)
    and (107.4937,950.0742) .. (106.6126,947.3019) .. controls (104.2202,939.7745)
    and (103.7510,931.4349) .. (101.1034,924.0677) .. controls (100.0783,921.2151)
    and (97.8147,918.6104) .. (95.5943,916.6424) .. controls (94.3016,915.4966)
    and (92.3033,915.0592) .. (90.5642,914.7261) .. controls (88.5507,914.3406)
    and (86.3863,914.2895) .. (84.3365,914.4865) .. controls (82.2344,914.6884)
    and (80.2092,915.7651) .. (78.1088,915.9236) .. controls (75.9776,916.0843)
    and (73.6542,916.0605) .. (71.6416,915.4446) .. controls (69.7419,914.8631)
    and (68.0022,913.5460) .. (66.3720,912.3307) .. controls (63.6109,910.2725)
    and (61.0092,907.9606) .. (58.4676,905.6239) .. controls (56.0590,903.4096)
    and (53.4432,901.3162) .. (51.5213,898.6776) .. controls (44.0218,888.3818)
    and (36.6639,877.7226) .. (30.2033,866.8205) .. controls (28.9990,864.7881)
    and (28.3770,862.1563) .. (28.5266,859.8742) .. controls (28.6963,857.2858)
    and (29.9148,854.5932) .. (31.1614,852.2093) .. controls (34.4658,845.8904)
    and (38.3145,839.7845) .. (42.1797,833.7657) .. controls (43.9034,831.0816)
    and (45.6897,828.3737) .. (47.9284,826.1009) .. controls (66.6084,807.1357)
    and (85.6046,788.3508) .. (104.9359,770.0515) .. controls (108.0403,767.1127)
    and (111.5264,764.5186) .. (115.2356,762.3866) .. controls (196.3989,715.7348)
    and (277.9891,669.6342) .. (359.5535,623.7002) .. controls (360.7857,623.0063)
    and (362.2800,622.4299) .. (363.6254,622.5026) .. controls (365.2342,622.5896)
    and (366.7746,623.8031) .. (368.4159,624.1793) .. controls (370.6070,624.6814)
    and (373.0342,625.5210) .. (375.1227,625.1374) .. controls (376.9465,624.8026)
    and (378.8412,623.4123) .. (380.1528,622.0236) .. controls (381.5558,620.5380)
    and (382.2325,618.3529) .. (383.2667,616.5144) .. controls (384.3882,614.5205)
    and (385.2261,612.3133) .. (386.6201,610.5262) .. controls (388.3400,608.3212)
    and (390.1637,605.9449) .. (392.6082,604.5381) .. controls (491.1644,547.8196)
    and (591.0576,492.8092) .. (689.6222,436.1503) .. controls (691.3397,435.1630)
    and (692.4301,433.2581) .. (693.4546,431.5993) .. controls (694.1068,430.5434)
    and (694.4284,429.2375) .. (694.6523,428.0064) .. controls (694.9074,426.6027)
    and (694.6383,425.1015) .. (694.8919,423.6949) .. controls (695.1226,422.3869)
    and (695.3539,420.9078) .. (696.0895,419.8625) .. controls (696.8709,418.7521)
    and (698.1813,417.7797) .. (699.4430,417.2276) .. controls (700.7361,416.6619)
    and (702.3037,416.5307) .. (703.7545,416.5091) .. controls (707.6532,416.4508)
    and (711.5956,417.1307) .. (715.4913,416.9881) .. controls (718.1427,416.8911)
    and (720.9106,416.6436) .. (723.3957,415.7905) .. controls (726.2600,414.8072)
    and (728.8431,412.9498) .. (731.5396,411.4790) .. controls (741.1389,406.2431)
    and (750.5382,400.5979) .. (760.2829,395.6702) .. controls (764.5905,393.4919)
    and (769.0562,391.5041) .. (773.6964,390.1611) .. controls (818.1593,377.2921)
    and (862.8834,365.1221) .. (907.5922,353.0343) .. controls (930.5099,346.8381)
    and (953.5079,340.6991) .. (976.5761,335.3093) .. controls (979.1373,334.7109)
    and (981.8461,335.0244) .. (984.4805,335.0697) .. controls (991.1078,335.1838)
    and (997.9201,334.9425) .. (1004.3613,335.7882) .. controls
    (1005.8246,335.9804) and (1007.4153,337.0847) .. (1008.1937,338.1835) ..
    controls (1008.7726,339.0009) and (1008.4901,340.4179) .. (1008.4333,341.5369)
    .. controls (1006.1748,386.0080) and (1004.0656,430.5328) ..
    (1001.2475,474.9536) .. controls (1001.0316,478.3584) and (1000.1977,481.7127)
    .. (999.3313,485.0138) .. controls (990.9360,517.0031) and (982.5528,549.0430)
    .. (973.4624,580.8247) .. controls (972.0934,585.6108) and (970.0666,590.2075)
    .. (967.9532,594.7173) .. controls (952.1820,628.3722) and (936.8982,662.6058)
    .. (919.8082,695.3188) .. controls (918.2949,698.2156) and (914.9428,699.8358)
    .. (912.1434,701.5465) .. controls (904.8825,705.9837) and (896.6385,709.1785)
    .. (889.6278,713.7624) .. controls (888.3348,714.6078) and (887.3808,716.3515)
    .. (887.2326,717.8344) .. controls (886.9818,720.3437) and (887.1015,723.4629)
    .. (888.4302,725.7388) .. controls (896.8424,740.1499) and (907.4299,753.6924)
    .. (916.4549,767.8956) .. controls (917.1708,769.0222) and (917.7919,770.5664)
    .. (917.6525,771.7280) .. controls (917.5527,772.5625) and (916.6032,773.4728)
    .. (915.7362,773.8838) .. controls (882.7501,789.5212) and (849.1049,804.1849)
    .. (816.0929,819.8730) .. controls (813.6548,821.0317) and (811.5213,822.7699)
    .. (809.3862,824.4241) .. controls (793.7963,836.5027) and (778.4697,848.9366)
    .. (762.9178,861.0718) .. controls (757.3912,865.3842) and (751.5932,869.3566)
    .. (746.1509,873.7667) .. controls (742.3314,876.8618) and (738.5935,880.0979)
    .. (735.1327,883.5873) .. controls (728.9326,889.8386) and (723.4611,896.8436)
    .. (717.1681,902.9890) .. controls (713.2413,906.8238) and (709.0030,910.5452)
    .. (704.4732,913.5282) .. controls (702.4560,914.8567) and (699.9065,915.4246)
    .. (697.5268,915.9235) .. controls (694.9563,916.4625) and (692.2441,916.7561)
    .. (689.6225,916.6421) .. controls (686.7350,916.5168) and (683.6774,916.2140)
    .. (680.9995,915.2050) .. controls (678.1681,914.1381) and (675.7551,911.9683)
    .. (673.0951,910.4144) .. controls (667.6911,907.2576) and (662.4040,903.7847)
    .. (656.8072,901.0728) .. controls (654.6593,900.0321) and (652.2196,899.4318)
    .. (649.8609,899.1566) .. controls (647.4291,898.8728) and (644.8874,899.1149)
    .. (642.4356,899.3962) .. controls (640.0170,899.6740) and (637.6010,900.1804)
    .. (635.2497,900.8335) .. controls (628.9780,902.5756) and (622.6585,904.3504)
    .. (616.5666,906.5821) .. controls (614.5944,907.3046) and (612.7106,908.4243)
    .. (611.0575,909.6959) .. controls (609.5967,910.8196) and (608.2651,912.2449)
    .. (607.2250,913.7679) .. controls (606.0296,915.5184) and (605.3498,917.6218)
    .. (604.3507,919.5166) .. controls (603.0344,922.0131) and (601.8091,924.5809)
    .. (600.2787,926.9419) .. controls (599.0146,928.8923) and (597.7090,930.9532)
    .. (595.9672,932.4511) .. controls (593.7168,934.3864) and (590.9013,935.7215)
    .. (588.3024,937.2416) .. controls (586.6697,938.1966) and (585.0801,939.4546)
    .. (583.2723,939.8764) .. controls (580.2895,940.5724) and (577.0451,940.5485)
    .. (573.9308,940.5950) .. controls (571.6957,940.6273) and (569.3062,940.7987)
    .. (567.2240,940.1159) .. controls (564.4358,939.2018) and (561.8778,937.3695)
    .. (559.3196,935.8045) .. controls (555.0912,933.2177) and (551.2252,929.9199)
    .. (546.8641,927.6605) .. controls (544.5983,926.4867) and (541.9613,925.7376)
    .. (539.4388,925.5048) .. controls (536.7716,925.2586) and (533.8744,925.4262)
    .. (531.2949,926.2233) .. controls (525.0917,928.1407) and (519.2481,931.4207)
    .. (513.0908,933.6487) .. controls (507.1120,935.8121) and (501.0147,937.7261)
    .. (494.8867,939.3974) .. controls (492.2321,940.1213) and (489.4809,940.6239)
    .. (486.7427,940.8345) .. controls (483.2532,941.1029) and (479.6770,940.5014)
    .. (476.2036,940.8345) .. controls (473.8485,941.0605) and (471.3883,941.4720)
    .. (469.2573,942.5112) .. controls (458.4538,947.7796) and (448.0947,954.1520)
    .. (437.4002,959.7572) .. controls (423.2637,967.1663) and (408.6889,973.8815)
    .. (394.7642,981.5542) .. controls (393.0397,982.5044) and (391.4734,984.0683)
    .. (390.4528,985.6261) .. controls (389.9564,986.3838) and (390.6033,987.6603)
    .. (390.2131,988.5004) .. controls (389.5653,989.8959) and (388.6932,991.5542)
    .. (387.3388,992.3329) .. controls (382.3058,995.2269) and (376.0275,996.6104)
    .. (371.0510,999.5187) .. controls (369.8796,1000.2033) and
    (369.1546,1001.6530) .. (369.0704,1003.0883) .. controls (369.0341,1003.7061)
    and (369.1149,1004.2761) .. (369.0237,1004.8643) .. controls
    (368.8174,1006.1932) and (367.4525,1007.4004) .. (366.2604,1007.6627) ..
    controls (355.4761,1010.0352) and (344.0335,1010.9993) .. (332.9661,1012.9323)
    -- cycle;    
    % Path 2 | Red | Top Level | Line Width is Bigger
 \path[
    draw = red,
    line width = 3mm,
    dash pattern = on (12*1/100*2692pt) off 2692pt
    ]
    (332.9659,1012.9324) .. controls (320.7194,1015.0713) and (308.5513,1017.6584)
    .. (296.3182,1019.8787) .. controls (286.1156,1021.7304) and
    (275.9238,1023.7694) .. (265.6587,1025.1483) .. controls (259.8755,1025.9251)
    and (254.0082,1026.1375) .. (248.1732,1026.3459) .. controls
    (242.8303,1026.5367) and (237.4497,1026.6922) .. (232.1249,1026.3459) ..
    controls (227.6291,1026.0534) and (223.1266,1025.3375) .. (218.7114,1024.4297)
    .. controls (214.5835,1023.5810) and (210.1897,1022.9433) ..
    (206.4955,1021.0763) .. controls (202.7644,1019.1907) and (199.5125,1016.1092)
    .. (196.4353,1013.1719) .. controls (190.7298,1007.7257) and
    (185.7978,1001.3670) .. (180.1475,995.9260) .. controls (179.3305,995.1393)
    and (178.0932,994.3054) .. (177.0336,994.4888) .. controls (173.9414,995.0240)
    and (170.8437,997.3681) .. (167.6920,998.0817) .. controls (166.6121,998.3264)
    and (165.1752,998.1197) .. (164.3386,997.3631) .. controls (155.9933,989.8160)
    and (148.4492,980.9465) .. (140.1464,973.1708) .. controls (138.3890,971.5250)
    and (136.2954,970.2043) .. (134.1582,969.0988) .. controls (129.3491,966.6114)
    and (123.8976,965.1840) .. (119.3075,962.3921) .. controls (116.1529,960.4733)
    and (113.2944,957.7843) .. (110.9241,954.9667) .. controls (109.0627,952.7542)
    and (107.4937,950.0742) .. (106.6126,947.3019) .. controls (104.2202,939.7745)
    and (103.7510,931.4349) .. (101.1034,924.0677) .. controls (100.0783,921.2151)
    and (97.8147,918.6104) .. (95.5943,916.6424) .. controls (94.3016,915.4966)
    and (92.3033,915.0592) .. (90.5642,914.7261) .. controls (88.5507,914.3406)
    and (86.3863,914.2895) .. (84.3365,914.4865) .. controls (82.2344,914.6884)
    and (80.2092,915.7651) .. (78.1088,915.9236) .. controls (75.9776,916.0843)
    and (73.6542,916.0605) .. (71.6416,915.4446) .. controls (69.7419,914.8631)
    and (68.0022,913.5460) .. (66.3720,912.3307) .. controls (63.6109,910.2725)
    and (61.0092,907.9606) .. (58.4676,905.6239) .. controls (56.0590,903.4096)
    and (53.4432,901.3162) .. (51.5213,898.6776) .. controls (44.0218,888.3818)
    and (36.6639,877.7226) .. (30.2033,866.8205) .. controls (28.9990,864.7881)
    and (28.3770,862.1563) .. (28.5266,859.8742) .. controls (28.6963,857.2858)
    and (29.9148,854.5932) .. (31.1614,852.2093) .. controls (34.4658,845.8904)
    and (38.3145,839.7845) .. (42.1797,833.7657) .. controls (43.9034,831.0816)
    and (45.6897,828.3737) .. (47.9284,826.1009) .. controls (66.6084,807.1357)
    and (85.6046,788.3508) .. (104.9359,770.0515) .. controls (108.0403,767.1127)
    and (111.5264,764.5186) .. (115.2356,762.3866) .. controls (196.3989,715.7348)
    and (277.9891,669.6342) .. (359.5535,623.7002) .. controls (360.7857,623.0063)
    and (362.2800,622.4299) .. (363.6254,622.5026) .. controls (365.2342,622.5896)
    and (366.7746,623.8031) .. (368.4159,624.1793) .. controls (370.6070,624.6814)
    and (373.0342,625.5210) .. (375.1227,625.1374) .. controls (376.9465,624.8026)
    and (378.8412,623.4123) .. (380.1528,622.0236) .. controls (381.5558,620.5380)
    and (382.2325,618.3529) .. (383.2667,616.5144) .. controls (384.3882,614.5205)
    and (385.2261,612.3133) .. (386.6201,610.5262) .. controls (388.3400,608.3212)
    and (390.1637,605.9449) .. (392.6082,604.5381) .. controls (491.1644,547.8196)
    and (591.0576,492.8092) .. (689.6222,436.1503) .. controls (691.3397,435.1630)
    and (692.4301,433.2581) .. (693.4546,431.5993) .. controls (694.1068,430.5434)
    and (694.4284,429.2375) .. (694.6523,428.0064) .. controls (694.9074,426.6027)
    and (694.6383,425.1015) .. (694.8919,423.6949) .. controls (695.1226,422.3869)
    and (695.3539,420.9078) .. (696.0895,419.8625) .. controls (696.8709,418.7521)
    and (698.1813,417.7797) .. (699.4430,417.2276) .. controls (700.7361,416.6619)
    and (702.3037,416.5307) .. (703.7545,416.5091) .. controls (707.6532,416.4508)
    and (711.5956,417.1307) .. (715.4913,416.9881) .. controls (718.1427,416.8911)
    and (720.9106,416.6436) .. (723.3957,415.7905) .. controls (726.2600,414.8072)
    and (728.8431,412.9498) .. (731.5396,411.4790) .. controls (741.1389,406.2431)
    and (750.5382,400.5979) .. (760.2829,395.6702) .. controls (764.5905,393.4919)
    and (769.0562,391.5041) .. (773.6964,390.1611) .. controls (818.1593,377.2921)
    and (862.8834,365.1221) .. (907.5922,353.0343) .. controls (930.5099,346.8381)
    and (953.5079,340.6991) .. (976.5761,335.3093) .. controls (979.1373,334.7109)
    and (981.8461,335.0244) .. (984.4805,335.0697) .. controls (991.1078,335.1838)
    and (997.9201,334.9425) .. (1004.3613,335.7882) .. controls
    (1005.8246,335.9804) and (1007.4153,337.0847) .. (1008.1937,338.1835) ..
    controls (1008.7726,339.0009) and (1008.4901,340.4179) .. (1008.4333,341.5369)
    .. controls (1006.1748,386.0080) and (1004.0656,430.5328) ..
    (1001.2475,474.9536) .. controls (1001.0316,478.3584) and (1000.1977,481.7127)
    .. (999.3313,485.0138) .. controls (990.9360,517.0031) and (982.5528,549.0430)
    .. (973.4624,580.8247) .. controls (972.0934,585.6108) and (970.0666,590.2075)
    .. (967.9532,594.7173) .. controls (952.1820,628.3722) and (936.8982,662.6058)
    .. (919.8082,695.3188) .. controls (918.2949,698.2156) and (914.9428,699.8358)
    .. (912.1434,701.5465) .. controls (904.8825,705.9837) and (896.6385,709.1785)
    .. (889.6278,713.7624) .. controls (888.3348,714.6078) and (887.3808,716.3515)
    .. (887.2326,717.8344) .. controls (886.9818,720.3437) and (887.1015,723.4629)
    .. (888.4302,725.7388) .. controls (896.8424,740.1499) and (907.4299,753.6924)
    .. (916.4549,767.8956) .. controls (917.1708,769.0222) and (917.7919,770.5664)
    .. (917.6525,771.7280) .. controls (917.5527,772.5625) and (916.6032,773.4728)
    .. (915.7362,773.8838) .. controls (882.7501,789.5212) and (849.1049,804.1849)
    .. (816.0929,819.8730) .. controls (813.6548,821.0317) and (811.5213,822.7699)
    .. (809.3862,824.4241) .. controls (793.7963,836.5027) and (778.4697,848.9366)
    .. (762.9178,861.0718) .. controls (757.3912,865.3842) and (751.5932,869.3566)
    .. (746.1509,873.7667) .. controls (742.3314,876.8618) and (738.5935,880.0979)
    .. (735.1327,883.5873) .. controls (728.9326,889.8386) and (723.4611,896.8436)
    .. (717.1681,902.9890) .. controls (713.2413,906.8238) and (709.0030,910.5452)
    .. (704.4732,913.5282) .. controls (702.4560,914.8567) and (699.9065,915.4246)
    .. (697.5268,915.9235) .. controls (694.9563,916.4625) and (692.2441,916.7561)
    .. (689.6225,916.6421) .. controls (686.7350,916.5168) and (683.6774,916.2140)
    .. (680.9995,915.2050) .. controls (678.1681,914.1381) and (675.7551,911.9683)
    .. (673.0951,910.4144) .. controls (667.6911,907.2576) and (662.4040,903.7847)
    .. (656.8072,901.0728) .. controls (654.6593,900.0321) and (652.2196,899.4318)
    .. (649.8609,899.1566) .. controls (647.4291,898.8728) and (644.8874,899.1149)
    .. (642.4356,899.3962) .. controls (640.0170,899.6740) and (637.6010,900.1804)
    .. (635.2497,900.8335) .. controls (628.9780,902.5756) and (622.6585,904.3504)
    .. (616.5666,906.5821) .. controls (614.5944,907.3046) and (612.7106,908.4243)
    .. (611.0575,909.6959) .. controls (609.5967,910.8196) and (608.2651,912.2449)
    .. (607.2250,913.7679) .. controls (606.0296,915.5184) and (605.3498,917.6218)
    .. (604.3507,919.5166) .. controls (603.0344,922.0131) and (601.8091,924.5809)
    .. (600.2787,926.9419) .. controls (599.0146,928.8923) and (597.7090,930.9532)
    .. (595.9672,932.4511) .. controls (593.7168,934.3864) and (590.9013,935.7215)
    .. (588.3024,937.2416) .. controls (586.6697,938.1966) and (585.0801,939.4546)
    .. (583.2723,939.8764) .. controls (580.2895,940.5724) and (577.0451,940.5485)
    .. (573.9308,940.5950) .. controls (571.6957,940.6273) and (569.3062,940.7987)
    .. (567.2240,940.1159) .. controls (564.4358,939.2018) and (561.8778,937.3695)
    .. (559.3196,935.8045) .. controls (555.0912,933.2177) and (551.2252,929.9199)
    .. (546.8641,927.6605) .. controls (544.5983,926.4867) and (541.9613,925.7376)
    .. (539.4388,925.5048) .. controls (536.7716,925.2586) and (533.8744,925.4262)
    .. (531.2949,926.2233) .. controls (525.0917,928.1407) and (519.2481,931.4207)
    .. (513.0908,933.6487) .. controls (507.1120,935.8121) and (501.0147,937.7261)
    .. (494.8867,939.3974) .. controls (492.2321,940.1213) and (489.4809,940.6239)
    .. (486.7427,940.8345) .. controls (483.2532,941.1029) and (479.6770,940.5014)
    .. (476.2036,940.8345) .. controls (473.8485,941.0605) and (471.3883,941.4720)
    .. (469.2573,942.5112) .. controls (458.4538,947.7796) and (448.0947,954.1520)
    .. (437.4002,959.7572) .. controls (423.2637,967.1663) and (408.6889,973.8815)
    .. (394.7642,981.5542) .. controls (393.0397,982.5044) and (391.4734,984.0683)
    .. (390.4528,985.6261) .. controls (389.9564,986.3838) and (390.6033,987.6603)
    .. (390.2131,988.5004) .. controls (389.5653,989.8959) and (388.6932,991.5542)
    .. (387.3388,992.3329) .. controls (382.3058,995.2269) and (376.0275,996.6104)
    .. (371.0510,999.5187) .. controls (369.8796,1000.2033) and
    (369.1546,1001.6530) .. (369.0704,1003.0883) .. controls (369.0341,1003.7061)
    and (369.1149,1004.2761) .. (369.0237,1004.8643) .. controls
    (368.8174,1006.1932) and (367.4525,1007.4004) .. (366.2604,1007.6627) ..
    controls (355.4761,1010.0352) and (344.0335,1010.9993) .. (332.9661,1012.9323)
    -- cycle;    
\end{tikzpicture}

\end{document}

The line

dash pattern = on (12*1/100*2692pt) off 2692pt % --> 12 % of the path black path length

is important. Using the calc package I can control the fraction of the red path. In the line above 12 % are colored red. I obtained the path length of 2692 pt using an Inkscape feature (strangely the export function scaled everything to 0.8 - I changed it back using y = 1pt, x = 1pt instead of y = 0.8pt, x = 0.8pt). Inkscape is a free vector graphic software.

1 Percent

enter image description here

12 Percent

enter image description here

50 Percent

enter image description here

99 Percent

enter image description here

100 Percent

enter image description here

Maybe someone can generate a cool animated GIF showing 1 % to 100 % :).

  • Nice. But can you show a full MWE here and an image of the result? – Steven B. Segletes Jan 6 '17 at 16:43
  • 1
    @StevenB.Segletes Done! :) – Dr. Manuel Kuehner Jan 6 '17 at 16:57
  • 1
    @Dr.ManuelKuehner rather than explicitly drawing the red path it can be drawn as a postaction on the black path. – Mark Wibrow Jan 7 '17 at 8:11
  • @MarkWibrow Thanks for the comment. Are you going to provide a implementation of the idea? – Dr. Manuel Kuehner Jan 7 '17 at 8:26
  • 1
    @Dr.ManuelKuehner I've provided a community wiki answer in order to illustrate a couple of other points as well (e.g., using the svg path directly). But feel free to update your answer as you are actually answering the question and building on the OPs code. – Mark Wibrow Jan 7 '17 at 8:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.