QuickLaTeX: tikZ graphics

QuickLaTeX is free online service which allows LaTeX usage on the web pages.

QuickLaTeX supports tikZ graphics since version 3.7.1.

User can insert tikZ code snippets directly on the page (in WordPress editor) between \begin{tikzpicture} ... \end{tikzpicture} commands. QuickLaTeX will render it into image and place on the page.

By default, tikz is not included into QuickLaTeX preamble, so user has to include tikz package in the local preamble manually using [+preamble] ... [/preamble] shortcodes.

Let’s check few examples. Plotting:

\begin{tikzpicture}

% Include tikz into local preamble
[+preamble]
\usepackage{tikz}
\usepackage{pgfplots}
\usepgfplotslibrary{fillbetween}
\usetikzlibrary{patterns}
\usepackage{color}
[/preamble]
\begin{axis}[
         axis equal,
         %domain=-3:3,
         grid,
         grid style={dashed,gray!30},
         smooth,
         xmin=-2, xmax=2,
         ymin=-1.5, ymax=3.5,
         axis lines=middle,
         xlabel=$x$,
         xlabel style={below, anchor=north east,inner xsep=0pt},
         xtick={-2,...,2},
         ylabel=$y$,
         ylabel style={above,anchor=north east,inner ysep=0pt},
         ytick={-1,...,3},
         samples=100,
         %legend cell align=left,
         %legend pos=outer north east,
         legend style={at={(1,1)},xshift=0cm,anchor=north east,nodes=right,fill=none}
 ]
 \addplot[red,name path=f1,mark=none,domain=-2:2,line legend,thick] {3-x^2};
 \addlegendentry{$f_{1}(x)$}

 \addplot[blue,name path=f2,mark=none,domain=-1.4:1.4, line legend,thick] {3*x^2-1};
 \addlegendentry{$f_{2}(x)$}

\path[name path=lower,intersection segments={of=f1 and f2,sequence=B0 --A1}];
\addplot[pattern=north west lines, pattern color=green]fill between[of=f2 and lower];
\addlegendentry{$\cal{A}$}
\end{axis}
\end{tikzpicture}

QuickLaTeX will render it on the page as:

Rendered by QuickLaTeX.com

A little more elaborate example is Rotated triangle by Martin Scharrer:

\begin{tikzpicture}
[+preamble]
     \usepackage[usenames,dvipsnames,pdftex]{xcolor}
     \usepackage{tikz,ifthen}
[/preamble]
    \coordinate (A) at (0,0);
    \coordinate (B) at (-60:12cm);
    \coordinate (C) at (240:12cm);
    \foreach \density in {20,30,...,160}{%
        \draw[fill=MidnightBlue!\density] (A)--(B)--(C)--cycle;
        \path
             (A) coordinate (X)
          -- (B) coordinate[pos=.15](A)
          -- (C) coordinate[pos=.15](B)
          -- (X) coordinate[pos=.15](C);
    }
\end{tikzpicture}

Rendered by QuickLaTeX.com

User can scale drawings with \begin{tikzpicture}[scale=N] .... \end{tikzpicture} as usual, e.g. [scale=0.5]:

Rendered by QuickLaTeX.com

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00)
Loading...

5 Comments

  1. sadfdf
    Posted May 14, 2017 at 10:33 pm | #

    can’t display:

    Rendered by QuickLaTeX.com

    • Posted May 17, 2017 at 9:30 am | #

      Somehow new version of TikZ doesn’t work with [scale=2]. If we remove it – everything works fine (as you see).

  2. Daniele Malesani
    Posted November 21, 2021 at 5:13 am | #

    Hello. I seem to have trouble making QuickLatex recognize dvips color names when used in pgfplots graphics. The best example I can find is… from this very page: the beautiful sequence of nested rotated triangles appears in grey scales, while the color should be MidnightBlue (the other example looks fine, but does not use dvipsnames). If I check the original link (https://texample.net/tikz/examples/rotated-triangle/#c604), the figure does look in blue shades.

    I have tried to put the [dvipsnames] option in the general preamble of the site:

    \usepackage[dvipsnames]{xcolor}

    or to pass the global option to the class:

    \documentclass[dvipsnames]{article}

    and finally to use

    \PassOptionsToPackage{dvipsnames}{xcolor}

    I also tried the [dvipsnames] option in the local preamble (exactly like in the example above). Nothing seems to work for me.

    Thank you in advance for any insights.

  3. Posted September 7, 2023 at 11:52 pm | #

    Hi Pavel,

    You’re doing a great job.
    I have a question: how can we include or import ready made figures in quicklatex? Like npg, jpg, eps, pdf files etc.?
    Thank you,
    Sincerely,
    Andrei

    • Posted September 10, 2023 at 9:18 am | #

      Please use WordPress editor (or HTML) to insert the image files into your posts.
      QuickLaTeX only renders the code, it cannot work with external files.

Post a Comment

Your email is never published nor shared.

Use native LaTeX syntax to include formulas: $ ... $, \[ ... \], etc. Do not forget to preview comment before posting.

Also you may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Subscribe without commenting