Drawing Bezier Curves with TikZ

To visualize an example for cubic-Bezier CSS animations (http://cubic-bezier.com) I decided to try TikZ. That was in fact a pretty good idea, as — with the help of Google (and mostly tex.stackexchange.com) I managed to complete the following example in just a few minutes:

\documentclass{article}
\usepackage[paperwidth=5.5cm,paperheight=5.3cm,left=0cm,right=0cm,bottom=0cm,top=0.25cm]{geometry}
\usepackage{tikz}
\definecolor{fom}{RGB}{0,153,139}
\begin{document}
 
\begin{tikzpicture}[x=4cm,y=4cm]
\draw[line width=1pt,lightgray] (0,0) -- (1,1); % gray line for the linear animation path
\draw (0,0) -- (1,0) -- (1,1) -- (0,1) -- (0,0); % frame
\draw (0,0) -- (0.17,0.67); % (0,0) to 2. point
\draw (1,1) -- (0.83,0.67); % (1,1) to 3. point
 
\draw [magenta,fill=magenta](0.17,0.67) circle (.5ex); %circle 1
\draw [fom,fill=fom](0.83,0.67) circle (.5ex); % circle 2
 
\draw[line width=1pt] (0,0) .. controls (0.17,0.67) and (0.83,0.67) .. (1,1); % cubic bezier curve
 
% labels
\node[label={[label distance=0.0cm,text depth=-1ex,rotate=90]left:Fortschritt in \%}] at (-0.1,.8) {};
\node[label={[label distance=0.0cm,text depth=-1ex]right:Zeit-Achse}] at (0,-0.1) {};
\end{tikzpicture}
\end{document}

The result is pretty impressive.

bez

Uwe

Uwe Ziegenhagen likes LaTeX and Python, sometimes even combined. Do you like my content and would like to thank me for it? Consider making a small donation to my local fablab, the Dingfabrik Köln. Details on how to donate can be found here Spenden für die Dingfabrik.

More Posts - Website