Man running icon with TikZ

Question

I am a beginner in this. I am trying to prepare some exercises to my students in Latex. My main problem is the use of Tikz. In this case, I am trying to draw the icon of a man/woman running. I attach the picture of one quite simple.

Can you help me? Is there any way of converting a picture in other format to Tikz code?

Welcome to TeX.SE! Do you know you can simply include an image as node text? — CarLaTeX, Nov 18 '18 at 09:26
In your tikzpicture: \node {\includegraphics{your-image}};. — CarLaTeX, Nov 18 '18 at 09:39
Strategies for including graphics in LaTeX documents https://tug.org/TUGboat/tb26-1/hoeppner.pdf — AndréC, Nov 18 '18 at 09:41
However, please add a minimal working example (MWE) so we can understand what is your desired result. — CarLaTeX, Nov 18 '18 at 09:44
I do it in that way, the problem is that the background of this image is not transparent and the quality (it is a png) it is not very good. I am stating with the figure of the exercise and it is just a man running... — Eduardo, Nov 18 '18 at 09:52
Well, drawing such a picture in TikZ is not easy and requires much effort. — , Nov 18 '18 at 10:01
Start from this: https://tex.stackexchange.com/questions/84275/custom-human-shape-for-tikz — CarLaTeX, Nov 18 '18 at 10:32
Is this question about Tikz or pstricks, can you please clarify and either adjust the tags or the body of the question? — Polygnome, Nov 18 '18 at 17:23
@Polygnome the question was about Tikz. [tag:pstricks] was not added by OP. — Schism, Nov 19 '18 at 09:31
It is nearly impossible to convert all images of all types to a TikZ picture code. You said that you attached a simple image, so I think you want to convert some more complex images. If the image is complex enough, I am sure that you must write hundreds lines of code to have it with great difficulty. So I suggest that you can find similar images on the Internet with transparent background keyword, and 99%-ly you will get the transparent image which you can insert in your document. For the running icon, I got this picture from this. — , Nov 19 '18 at 10:02
If you make the picture by yourself, I think there should be a transparent option when you export it? — , Nov 19 '18 at 10:04
In the beginning he asked about TikZ. And there was no answer until I came with PSTricks answer. And as he accepted it, I added the PSTricks tag. It was the history. — Display Name, Nov 19 '18 at 13:44

nidhin · Accepted Answer · 2018-11-19T04:18:48.140

30

An attempt with tikz rectangles.

\documentclass{article}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
    \tikzstyle{body}= [fill=black,rounded corners=14pt]
    \draw[body,rotate around={35:(1.2,0)}] (1.2,0) rectangle ++(3.5,1) ;
    \draw[body,rotate around={75:(3.8,2)}] (3.8,2) rectangle ++(3,1) ;
    \draw[body,rotate around={-90:(6.25,6)},rounded corners=10pt] (6.25,6) rectangle ++(2,0.7) ;
    \draw[body,rotate around={-30:(6.2,4.2)},rounded corners=10pt] (6.2,4.2) rectangle ++(2.5,0.7) ;
    \draw[body,rotate around={7:(2.2,1.7)},draw=white,line width=4pt] (2.2,1.7) rectangle ++(3.7,1);
    \draw[body,rotate around={-52:(3.1,4.7)},draw=white,line width=2pt] (3.1,4.7) rectangle ++(3.5,1);
    \draw[body,rotate around={7:(2.2,1.7)}] (2.2,1.7) rectangle ++(3.7,1);
    \draw[body,rotate around={25:(3.7,3.7)},rounded corners=24pt] (3.7,3.7) rectangle ++(3.9,1.7);
    \draw[body,rotate around={145:(6.7,5.8)},rounded corners=10pt,draw=white,line width=2pt] (6.7,5.8) rectangle ++(2.3,0.7) ;
    \draw[body,rotate around={190:(5,7.1)},rounded corners=10pt] (5,7.1) rectangle ++(2.5,0.7);
    \draw[body] (8.2,6) circle (1cm);

    \draw[line width=2pt] (4.8,1) -- ++(2,0);
    \draw[line width=2pt] (6,1.3) -- ++(1.6,0);
    \draw[line width=2pt] (5.6,0.7) -- ++(1.6,0);

    \draw[line width=2pt] (0.5,5) -- ++(2,0);
    \draw[line width=2pt] (1.2,5.3) -- ++(1.6,0);
    \draw[line width=2pt] (1.1,4.7) -- ++(1.6,0);
\end{tikzpicture}
\end{document}

EDIT:

In order to properly scale this picture, use [transform canvas={scale=0.2}] with tikzpicture or scope. Read this answer also:Correctly scaling a tikzpicture.

edited Nov 19 '18 at 04:18

answered Nov 18 '18 at 11:21

nidhin

7,932

6

Should be the accepted answer. The other answers use pstricks, while the question was about TikZ. – clocktown Nov 18 '18 at 12:36
@clocktown Thanks for the appreciation. The question is tagged with both pstricks and pgf-tikz ;) – nidhin Nov 18 '18 at 12:38
You are right, but then this is an example of a malformed question. If I ask a question about cats, but actually want to ask about cats and dogs, then I should but that in the title/body, not only in the tags. – clocktown Nov 18 '18 at 12:42
2

@clocktown: That is a problem with the questian but but not with the answers. And what answer will be accepted is a decision of the one who asked! – Nov 18 '18 at 14:38
1

@Herbert you are right, however, I get the impression that the person asking the question really is a beginner, so he might not actually realise the difference. That is why I am writing this. He may not look back, and maybe he does know that it is not TikZ, but just in case he didn't know and comes back here, my comments could clear it up. – clocktown Nov 18 '18 at 16:29
5

(+1) I like this one best too! It is the only one farting to increase speed. ;) – mickep Nov 18 '18 at 18:11
1

Thank you very much for the answers. It is true that I do not understand the solution using pstricks. It is a way o easily rescale the solution. I need a man running 5 times smaller. – Eduardo Nov 18 '18 at 21:47
@EduardoYubero you can scale the picture by adding scale option. Replace \begin{tikzpicture} line with \begin{tikzpicture}[scale=0.2] – nidhin Nov 18 '18 at 21:51
Yes, but with this I resize the entire figure. If I have more things added the are scaled as well... – Eduardo Nov 18 '18 at 21:56
@Eduardo in that case you can wrap this code within \begin{scope}[scale=0.2] and \end{scope} and put inside tikzpicture. Read about scope. – nidhin Nov 18 '18 at 22:05
@nidhin I have tried with \begin{scope} but the imaged is scaled but not in a proper way. The image is destroyed. – Eduardo Nov 18 '18 at 22:28
Good answer, what's the best way to get the exact coordinate? image is pixel but drawing is in cm or inch. how to map the pixel value to cm or inch? – beetlej Nov 19 '18 at 02:48
@Eduardo Read this answer: https://tex.stackexchange.com/a/4345. And try \pgftransformscale – nidhin Nov 19 '18 at 03:46
@beetlej I don't know what you are looking for. pdftex supports using pixel (px). But one has to set its value properly. read: https://tex.stackexchange.com/a/41371/28557 – nidhin Nov 19 '18 at 03:59
3

@nidhin There is indeed the [pstricks] tag in the question, but if you see this edit you will notice that the tag is not tagged by the questian. At first the question is "Man running icon in Tikz"! So your answer is the best of course! (and I don't know why the edit is approved) – Nov 19 '18 at 07:28
@nidhin thanks again!!! It works perfectly in the environment \pgflowlevelscope and \pgftransformscale. Now I have the image with the correct size. What do you recommend now to move the image? I am using this (\pgftransformshift{\pgfpoint{1cm}{1cm}} ) but I am not sure it is the best option. – Eduardo Nov 19 '18 at 10:48
@nidhin I try \begin{tikzpicture}[x=1px,y=1px] but get error: unknow operator 'p' or 'px'. How you get the absolute position such as header position is (8.2,6) in your code? – beetlej Nov 19 '18 at 17:26
1

@beetlej I inserted the image into tikzpicture and then drew grid. That gave the coordinates. ;) – nidhin Nov 19 '18 at 18:01

score 11 · Answer 2 · answered Nov 18 '18 at 11:18

11

\documentclass[pstricks,border=12pt]{standalone}
\def\wind{%
    \psline[linewidth=0.2](8,-9)(11,-9)
    \psline[linewidth=0.2](5,-9.4)(10,-9.4)
    \psline[linewidth=0.2](7,-9.8)(10.5,-9.8)}
\begin{document}
\begin{pspicture}[linecap=1,linejoin=1](-1,-12)(13,3)
    \psframe[fillstyle=vlines,hatchangle=-45,hatchsep=.3,hatchcolor=lightgray](-1,-12)(13,3)
    \qdisk(11,-0.5){1.5}
    \psline[linewidth=1.5](4,-4)(3,-7)(1,-10)
    \psline[linewidth=1.75,linecolor=white](3.5,-4)(6,-7)(1,-7)
    \psline[linewidth=1.5](3.5,-4)(6,-7)(1,-7)
    \psline[linewidth=2.5](8,-1)(4.1,-3.8)
    \psline[linewidth=1](8,-1)(8,-4)(11,-5)
    \psline[linewidth=1.25,linecolor=white](8,-1)(6,2)(3,1)
    \psline[linewidth=1](8,-1)(6,2)(3,1)
    \wind
    \rput(-5.5,9){\wind}
\end{pspicture}
\end{document}

answered Nov 18 '18 at 11:18

2

Nice picture! Sadly pstricks is not what the OP wants :( – Nov 19 '18 at 09:56
2

...nevertheless not a reason to downvote imho (+1), all the more the OP didn't even provide a MWE to fix or complete. – c.p. Nov 19 '18 at 10:23
2

@DũngVũ Please have a look at https://tex.meta.stackexchange.com/a/3458/36296 Even if pstricks is not asked for in the question, seeing a variate of answers will benefit future users of this site – samcarter_is_at_topanswers.xyz Nov 19 '18 at 10:30

score 9 · Answer 3 · answered Nov 18 '18 at 10:18

9

\documentclass[pstricks,border=12pt]{standalone}
\def\wind{%
    \psline[linewidth=0.2](8,-9)(11,-9)
    \psline[linewidth=0.2](5,-9.4)(10,-9.4)
    \psline[linewidth=0.2](7,-9.8)(10.5,-9.8)}
\begin{document}
\begin{pspicture}[linecap=1,linejoin=1](-1,-12)(13,3)
    \psframe[fillstyle=vlines,hatchangle=-45,hatchsep=.3,hatchcolor=lightgray](-1,-12)(13,3)
    \qdisk(11,-0.5){1.5}
    \psline[linewidth=2.5](8,-1)(4,-4)
    \psline[linewidth=1.5](4,-4)(3,-7)(1,-10)
    \psline[linewidth=1.5](3.75,-4.25)(6,-7)(1,-7)
    \psline[linewidth=1](8,-1)(8,-4)(11,-5)
    \psline[linewidth=1](8,-1)(6,2)(3,1)
    \wind
    \rput(-5.5,9){\wind}
\end{pspicture}
\end{document}

answered Nov 18 '18 at 10:18

Display Name

46,933

one downvote detected... – Display Name Nov 18 '18 at 11:47
2

This is pstricks. He asked for TikZ. – clocktown Nov 18 '18 at 12:35
2

@clocktown: But he loves PSTricks answer. – Display Name Nov 18 '18 at 12:36
1

Yes, but it's technically not a correct answer. Although I love it too (its shorter compared to the TikZ answer). But as he says he is teaching, when he teaches TikZ, he shouldn't come up with pstricks. Could be confusing. – clocktown Nov 18 '18 at 12:37
One more downvote detected. – Display Name Nov 18 '18 at 12:41
6

but always no need vor downvoting! – Nov 18 '18 at 14:34
3

@clocktown: This site is not meant for just one person to get an answer to a particular problem. If someone comes across this need, but in pstricks, should they post another question? Just because it is not directly helpful to the OP, this a perfectly valid answer. IMHO, a downvote should be reserved for answers which do not address the question, or for ones in which the answer may have other major issues (even if they don't show up in code provided). – Peter Grill Nov 19 '18 at 04:30
1

BTW, the above comment was meant for the down-voter, not saying it was you. Just because you provided a possible reason for the downvote, I didn't want to make an assumption here. – Peter Grill Nov 19 '18 at 04:31

score 9 · Answer 4 · answered Nov 19 '18 at 10:13

Similar to nidhin's one but drawn with thick lines with round caps instead of rectangles:

\documentclass[tikz, border=2mm]{standalone}
%\usepackage{tikz}
\begin{document}
\begin{tikzpicture}[
    myline/.style={%
        line cap=round, 
        line join=round,
        line width=#1}]
    \draw[myline=10mm] (1.2,0.65) -- (3.25,2)--(3.9,4.5);
    \draw[preaction={draw, myline=12mm, white}, myline=11mm] (3.95,4.6) -- (5.25,2.5)--(2.5,2.25);
    \draw[myline=7mm] (6.6,5.7) -- (6.6,4.35)--(8.25,3.35);
    \draw[myline=18mm] (4.2,4.85)--(6.1,5.75);
    \draw[preaction={draw, myline=8mm, white}, myline=7mm] (6.2,5.8) -- (4.8,6.75)--(3,6.4);
    \fill (8.1,6) circle(1cm);
    \draw[myline=2pt] (4.8,1) -- ++(2,0);
    \draw[myline=2pt] (6,1.3) -- ++(1.6,0);
    \draw[myline=2pt] (5.6,0.7) -- ++(1.6,0);

    \draw[myline=2pt] (0.5,5) -- ++(2,0);
    \draw[myline=2pt] (1.2,5.3) -- ++(1.6,0);
    \draw[myline=2pt] (1.1,4.7) -- ++(1.6,0);

\end{tikzpicture}
\end{document}

samcarter_is_at_topanswers.xyz · Answer 5 · 2018-11-19T14:31:14.073

A similar pictogram to the one you show in your question is available as vector image from https://upload.wikimedia.org/wikipedia/commons/b/b0/Running_icon_-_Noun_Project_17825.svg

This opens a couple of possibilities:

use the svg package to include the graphic (needs shell-escape to compile and inkscape installed)
Use and external program like inkscape to convert the graphic to pdf, which then can be included with \includegraphics in your document
Convert the .svg to tikz, which can for example be done with inkscape:

\documentclass{standalone}

\usepackage{tikz}

\begin{document}

\begin{tikzpicture}
\fill (2.7298,2.9966) .. controls (2.6046,2.9966) and (2.5032,2.8951) .. (2.5032,2.7702) .. controls (2.5032,2.6453) and (2.6046,2.5438) .. (2.7298,2.5438) .. controls (2.8547,2.5438) and (2.9560,2.6453) .. (2.9560,2.7702) .. controls (2.9560,2.8952) and (2.8547,2.9966) .. (2.7298,2.9966) -- cycle(1.8120,2.9130) .. controls (1.7960,2.9125) and (1.7807,2.9106) .. (1.7674,2.9074) -- (1.3128,2.7960) .. controls (1.2596,2.7830) and (1.2161,2.7320) .. (1.2161,2.6827) .. controls (1.2161,2.6333) and (1.2596,2.6035) .. (1.3129,2.6163) -- (1.7107,2.7116) .. controls (1.7640,2.7244) and (1.8460,2.7118) .. (1.8930,2.6837) -- (2.0218,2.6065) .. controls (2.0689,2.5784) and (2.0689,2.5322) .. (2.0221,2.5037) -- (1.6233,2.2623) .. controls (1.5764,2.2339) and (1.5162,2.1788) .. (1.4894,2.1396) .. controls (1.4626,2.1006) and (1.5647,1.8858) .. (1.5882,1.8363) -- (1.7125,1.5730) .. controls (1.7360,1.5235) and (1.7103,1.4815) .. (1.6555,1.4815) -- (1.1510,1.4815) .. controls (1.0962,1.4815) and (1.0551,1.4383) .. (1.0596,1.3837) -- (1.0660,1.3196) .. controls (1.0704,1.2650) and (1.1189,1.2345) .. (1.1738,1.2345) -- (2.0524,1.2345) .. controls (2.1071,1.2345) and (2.1361,1.2629) .. (2.1166,1.3142) -- (1.9628,1.7126) .. controls (1.9433,1.7638) and (1.9151,1.8455) .. (1.9002,1.8982) -- (1.8951,1.9147) .. controls (1.8801,1.9674) and (1.9066,2.0323) .. (1.9539,2.0599) -- (2.2306,2.2209) .. controls (2.2779,2.2485) and (2.3414,2.2829) .. (2.3717,2.2977) .. controls (2.4020,2.3125) and (2.4391,2.2815) .. (2.4541,2.2287) -- (2.5489,1.8960) .. controls (2.5638,1.8433) and (2.6199,1.8096) .. (2.6734,1.8212) -- (3.2002,1.9352) .. controls (3.2537,1.9468) and (3.2975,1.9933) .. (3.2975,2.0386) .. controls (3.2975,2.0839) and (3.2531,2.1140) .. (3.1990,2.1056) -- (2.8194,2.0463) .. controls (2.7653,2.0379) and (2.7083,2.0740) .. (2.6930,2.1265) -- (2.5884,2.4840) .. controls (2.5730,2.5365) and (2.5205,2.5997) .. (2.4716,2.6244) -- (1.9532,2.8861) .. controls (1.9165,2.9046) and (1.8603,2.9147) .. (1.8120,2.9130) -- cycle(0.4593,2.4347) .. controls (0.4045,2.4347) and (0.3596,2.4167) .. (0.3596,2.3994) .. controls (0.3596,2.3821) and (0.4045,2.3641) .. (0.4593,2.3641) -- (1.5070,2.3641) .. controls (1.5618,2.3641) and (1.6067,2.3821) .. (1.6067,2.3994) .. controls (1.6067,2.4167) and (1.5618,2.4347) .. (1.5070,2.4347) -- cycle(0.5811,2.2935) .. controls (0.5263,2.2935) and (0.4815,2.2755) .. (0.4815,2.2582) .. controls (0.4815,2.2409) and (0.5263,2.2229) .. (0.5811,2.2229) -- (1.3545,2.2229) .. controls (1.4092,2.2229) and (1.4542,2.2409) .. (1.4542,2.2582) .. controls (1.4542,2.2755) and (1.4093,2.2935) .. (1.3545,2.2935) -- cycle(0.6622,2.1523) .. controls (0.6074,2.1523) and (0.5626,2.1342) .. (0.5626,2.1170) .. controls (0.5626,2.0997) and (0.6075,2.0817) .. (0.6622,2.0817) -- (1.3041,2.0817) .. controls (1.3588,2.0817) and (1.4037,2.0997) .. (1.4037,2.1170) .. controls (1.4037,2.1342) and (1.3588,2.1523) .. (1.3041,2.1523) -- cycle(1.5539,1.1639) .. controls (1.4991,1.1639) and (1.4177,1.1442) .. (1.3730,1.1125) -- (1.1237,0.9389) .. controls (1.0790,0.9072) and (1.0684,0.8463) .. (1.1001,0.8016) -- (1.1495,0.7328) .. controls (1.1812,0.6881) and (1.2422,0.6799) .. (1.2851,0.7140) -- (1.7881,1.1079) .. controls (1.8309,1.1420) and (1.8211,1.1639) .. (1.7663,1.1639) -- cycle;
\end{tikzpicture}
\end{document}

Man running icon with TikZ

5 Answers5

EDIT:

Linked