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 mag LaTeX und Python, auch gern in Kombination. Hat Dir dieser Beitrag geholfen und möchtest Du Dich dafür bedanken? Dann unterstütze doch vielleicht die Dingfabrik Köln e.V. mit einem kleinen Beitrag. Details zur Bezahlung findest Du unter Spenden für die Dingfabrik.

More Posts - Website