index.html

<!doctype html>

<html>
<head>
	<meta charset="utf-8">
	<script src="./output/tikzjax.js"></script>
	<link rel="stylesheet" href="./output/fonts.css">
</head>
<body>

<h1>tikz-cd</h1>
<script type="text/tikz" data-show-console="true">%
\usepackage{amssymb}
\usepackage{quiver}
\usepackage{tikz-cd}
\usetikzlibrary{decorations.pathmorphing}
\begin{document}
% https://q.uiver.app/?q=WzAsNyxbMSwxLCJhIl0sWzMsMSwiYiJdLFsxLDIsImMiXSxbMywyLCJjIl0sWzEsMCwiRiJdLFswLDAsIlxccHJvZCJdLFswLDEsIlxcc3VtIl0sWzAsMV0sWzAsMiwiIiwyLHsic3R5bGUiOnsiYm9keSI6eyJuYW1lIjoiZG90dGVkIn19fV0sWzIsMywiIiwyLHsic3R5bGUiOnsiYm9keSI6eyJuYW1lIjoiZGFzaGVkIn19fV0sWzEsMywiIiwyLHsic3R5bGUiOnsiYm9keSI6eyJuYW1lIjoic3F1aWdnbHkifX19XSxbNCwwLCIiLDMseyJzdHlsZSI6eyJ0YWlsIjp7Im5hbWUiOiJob29rIiwic2lkZSI6InRvcCJ9LCJib2R5Ijp7Im5hbWUiOiJiYXJyZWQifSwiaGVhZCI6eyJuYW1lIjoiaGFycG9vbiIsInNpZGUiOiJ0b3AifX19XSxbNSw2XSxbNyw5LCIiLDIseyJzaG9ydGVuIjp7InNvdXJjZSI6MjAsInRhcmdldCI6MjB9fV0sWzEyLDExLCIiLDMseyJzaG9ydGVuIjp7InNvdXJjZSI6MjAsInRhcmdldCI6MjB9fV0sWzAsOSwiIiwwLHsibGV2ZWwiOjEsInN0eWxlIjp7Im5hbWUiOiJjb3JuZXIifX1dLFsxNCwxMywiIiwzLHsiY3VydmUiOjMsImxldmVsIjoxLCJzdHlsZSI6eyJib2R5Ijp7Im5hbWUiOiJkYXNoZWQifX19XV0=
\begin{tikzcd}
	\prod & F \\
	\sum & a && b \\
	& c && c
	\arrow[""{name=0, anchor=center, inner sep=0}, from=2-2, to=2-4]
	\arrow[dotted, from=2-2, to=3-2]
	\arrow[""{name=1, anchor=center, inner sep=0}, dashed, from=3-2, to=3-4]
	\arrow[squiggly, from=2-4, to=3-4]
	\arrow[""{name=2, anchor=center, inner sep=0}, "\shortmid"{marking}, hook, harpoon, from=1-2, to=2-2]
	\arrow[""{name=3, anchor=center, inner sep=0}, from=1-1, to=2-1]
	\arrow[""{name=4, anchor=center, inner sep=0}, shorten <=4pt, shorten >=4pt, Rightarrow, from=0, to=1]
	\arrow[""{name=5, anchor=center, inner sep=0}, shorten <=6pt, shorten >=6pt, Rightarrow, from=3, to=2]
	\arrow["\lrcorner"{anchor=center, pos=0.125}, draw=none, from=2-2, to=1]
	\arrow[curve={height=18pt}, dashed, from=5, to=4]
\end{tikzcd}
\end{document}
</script>

<h1>pgfplots</h1>
<script type="text/tikz" data-show-console="true">%
\usepackage{pgfplots}
\pgfplotsset{compat=1.16}
\begin{document}
\begin{tikzpicture}
\begin{axis}[colormap/viridis]
\addplot3[
surf,
samples=18,
domain=-3:3
]
{exp(-x^2-y^2)*x};
\end{axis}
\end{tikzpicture}

\end{document}
</script>

<h1>tikzpicture</h1>
<script type="text/tikz" data-show-console="true">%
\begin{document}
  \begin{tikzpicture}[domain=0:4]
    \draw[very thin,color=gray] (-0.1,-1.1) grid (3.9,3.9);
    \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$};
    \draw[->] (0,-1.2) -- (0,4.2) node[above] {$f(x)$};
    \draw[color=red]    plot (\x,\x)             node[right] {$f(x) =x$};
    \draw[color=blue]   plot (\x,{sin(\x r)})    node[right] {$f(x) = \sin x$};
    \draw[color=orange] plot (\x,{0.05*exp(\x)}) node[right] {$f(x) = \frac{1}{20} \mathrm e^x$};
  \end{tikzpicture}
\end{document}
</script>

<h1>circuitikz</h1>
<script type="text/tikz" data-show-console="true">%
\usepackage{circuitikz}
\begin{document}
\begin{circuitikz}[american, voltage shift=0.5]
\draw (0,0)
to[isource, l=$I_0$, v=$V_0$] (0,3)
to[short, -*, i=$I_0$] (2,3)
to[R=$R_1$, i>_=$i_1$] (2,0) -- (0,0);
\draw (2,3) -- (4,3)
to[R=$R_2$, i>_=$i_2$]
(4,0) to[short, -*] (2,0);
\end{circuitikz}
\end{document}
</script>

<h1>pgfplots</h1>
<script type="text/tikz" data-show-console="true">%
\usepackage{pgfplots}
\pgfplotsset{compat=1.16}
\begin{document}
\begin{tikzpicture}
\begin{axis}[colormap/viridis]
\addplot3[
	surf,
	samples=18,
	domain=-3:3
]
{exp(-x^2-y^2)*x};
\end{axis}
\end{tikzpicture}
\end{document}
</script>

<h1>chemfig</h1>
<script type="text/tikz" data-show-console="true">%
\usepackage{chemfig}
\begin{document}
\chemfig{[:-90]HN(-[::-45](-[::-45]R)=[::+45]O)>[::+45]*4(-(=O)-N*5(-(<:(=[::-60]O)-[::+60]OH)-(<[::+0])(<:[::-108])-S>)--)}
\end{document}
</script>

<h1>chemfig</h1>
<script type="text/tikz" data-show-console="true">%
\usepackage{chemfig}
\begin{document}
\definesubmol\fragment1{
    (-[:#1,0.85,,,draw=none]
    -[::126]-[::-54](=_#(2pt,2pt)[::180])
    -[::-70](-[::-56.2,1.07]=^#(2pt,2pt)[::180,1.07])
    -[::110,0.6](-[::-148,0.60](=^[::180,0.35])-[::-18,1.1])
    -[::50,1.1](-[::18,0.60]=_[::180,0.35])
    -[::50,0.6]
    -[::110])
    }
\chemfig{
!\fragment{18}
!\fragment{90}
!\fragment{162}
!\fragment{234}
!\fragment{306}
}
\end{document}
</script>

</body>
</html>