Vektorgrafiken

“You don’t need something more to get more – that is what emergence means.” — Murray Gell-Mann, “Beauty and truth in physics”, 2007

Moiré-Effekt mit dem Bildschirm

Hier kann getestet werden, ob sich ein Moiré mit dem eigenen Bildschirm oder der Projektionsfläche ergibt. Achtung: grosse Unterschiede zwischen verschiedenen Applikationen!

• Geschachtelte Quadrate oder eine Kreisschar in Bewegung (.html), Zoom-Animation (.html)

Es werden sich auch aus den folgenden Bildern unbeabsichtigte Moiré-Effekte ergeben. Die meisten Navigatoren erlauben die ganze Ansicht zu vergrössern oder zu verkleinern; damit lassen sich diese Effekte verringern oder steigern.

Kreise, Strecken und Punkte

• Parallele Strecken und konzentrische Kreise mit äquidistanten Radien (.html), Verstärkung des Moiré-Effektes durch die Gerade-Ungerade-Farbfüllung (even-odd) (.svg)/(.pdf); nicht-konzentrische Kreise (.html), Kreismaschine (.html)
• Viele Kreise (.html), Vergrösserung (.html), farbig (.svg)/(.pdf)/(.png); abnehmende Konturstärke (.html), Grafik als Basisschachtelung (.svg)/(.pdf) (1 kB / 3 kB), kräftige Lineatur (.html), Kreisscharen auf Quadratecken (.svg)/(.pdf), Hexagon (.svg)/(.pdf), wachsende Kreise (.html)
• Fresnelsche Zonenplatte (.pdf); Überlagerungen (.html), (.html), «Fresnel-Spiralen» (.html)
• Strecken (.html), farbig (.html), Liniengitter (.html), mit zunehmendem Abstand (.html) Standbilder (.svg)/(.png), (.svg)/(.png); parallele Streckenzüge (.html); Drehstreckung (.svg)/(.png)
• Punkte • quadratische und rechteckige Basis (.html), (.html); Punktraster und Komplement (.html), (.html); Punktmuster rgb (.html), Phyllotaxis (.html)

Schwebung

• Schwebung (.svg) hören: 440 Hz und 444 Hz erklingen zusammen (.opus) [440 Hz (.opus); 444 Hz (.opus)]
  Periodizität einer Schwebung sehen: (.html), Überlagerung durch Verschieben eines Graphen (.html)
• Harmonische Schwingungen multiplizieren (.html)

Strahlen (sternförmige Objekte)

Einige der folgenden Vektoren werden im Navigator möglicherweise unzureichend wiedergegeben, wenn Kantenglättung (Anti-Aliasing) angewendet wird. Bitte prüfen Sie dies mit dem folgenden Bild (.pdf). Das entsprechende Vektorbild (.svg) sollte mindestens genauso gut aussehen.

• Stern 1: Dreiecke radial um Punkt (.html)
• Stern 2: radial um Kreis in Rechteck (.html), elliptisch (.html)
• Stern 3: Inversion am Quadrat (.html)
• Mehrfache farbige Überlagerungen (.svg)/(.pdf)/(.png), (.svg)/(.pdf)/(.png); Rotationen (.html), (.html), Ausschnitt (.html), farbadditiv (.html)
• Stern dreifarbig (Spiral- und Tunnelillusion) (.html)
• Kachelartig angeordnet und überlagert (.html), (.html), Geschachtelte Strahlen (.html)
• Einfache Strahlen und Korridor-Illusion (.html), Halbgeraden (.svg)/(.pdf), (.html), Speichenrad (.html)
• Strahlen in Rosette erstellen (.html), a = 0: Kreis (.html), a = 4 (.html)

Geschachtelte Quadrate

• Variable Konturstärke: Grafik als Basisschachtelung (.svg)/(.pdf) (1 kB / 2 kB), Rotation und Translation (.html)
• Feste Konturstärke: (.html), mehrfach überlagert (.html), Drehstreckung (.svg)/(.pdf), (.svg)/(.pdf)

Emergente Zeichen: «Linseneffekt»

• SQRT √ (.html), (.svg)/(.pdf)/(.png)
• Σ (.html), Linseneffekt (.html), invertiert (.html) | Spiralen (.html)
• 2er-Muster mit Scherung (.html)/(.pdf)/(.png)
• Zufällig verteilte abgestimmte Raster (.html), invertiert (.html)

Kurven und Pfade

• Stückweise lineare Approximation (ohne Bézier): Hyperbeln (.html), Hyperbelgitter (.html), Sinusschar (.html), Kotangens (.html), exponentiell gebogenes Liniengitter (.html)
• Quadratische Bézierkurven: Parabeln (.html)/(.html)
• Kubische Bézierkurven: sinusförmig (.html), Freihand-Kurven (.html)

PostScript^® (PS) ist Turing-vollständig; die Programme ergeben eine druckreife Vektorgrafik, welche z. B. mit ghostscript.com, GSview, inkscape.org oder okular.kde.org u. a. angezeigt werden kann.

• Schachbrettmuster mit ‹pattern› (.ps)/(.pdf) (0.4 kB/1.6 kB), Kreisscharen mit ‹eofill› (.ps)/(.pdf); (.ps)/(.pdf) (0.4 kB/44 kB)
• Polygonschar (.ps), skaliert (.ps), verdreht skaliert (.ps), Parabelschar (Bézier) (.ps), Sinusschar (lineare Approximation) (.ps), A4 4 zu 7 mm rautiert (.ps), Pfad (.ps), mit ‹clip› (.ps), Fonts (.ps), π mit ‹kshow› (.ps), Fadengrafik Quadrant (.ps), n-Eck (.ps), Drachen-Polygonzug O16 (.ps), Sierpiński-Dreieck O9 (.ps)

Sowohl SVG als auch die HTML Canvas haben viel von PS geerbt. Durch die Möglichkeit zu rechnen, bleiben die PS-Anweisungen mit ganzen Zahlen exakt (acht signifikante Stellen in der Ausführung); soll jedoch am Ende eine SVG-Datei entstehen, ist das direkte Schreiben dieser in puncto Lesbarkeit meistens vorzuziehen. Gleiches gilt für diverse LaTeX-Pakete (z. B. tug.org/metapost) oder das Python pyx-project.org. Die Grafiken sind redundant gruppiert und/oder enthalten unnötige Attribute: (.py)/(.svg), (.mp)/(.svg); immerhin beide ohne nutzloses Begrenzen (clipping).

Schachbrettmuster

• Translation und Rotation (.html), (.html), Rotation 3 Lagen (.svg)/(.png), (.html), (.html); 4/5 (.html), (.html), (.html)

Dreieckmuster

• Muster mit gleichseitigen oder gleichschenkligen ▲ (.html)
• 3 Lagen (.svg)/(.png), (.html), (.html), Anordnung in Kreuzform (.html), 4 (.html), (.html), 5 (.svg)/(.png), (.html); farbig (.html), (.html), (.html), (.html)
• Dreieck- und Quadratmuster gemischt 4 ▲ ◼ (.html), 5 (.html), farbig (.html), (.html)
• Drehstreckungen (.svg)/(.pdf) (Eckpunkt), (.svg)/(.pdf) (Schwerpunkt)

Wabenstruktur (Hexagonnetz)

• Überlagerung (.html), 3 Lagen (.html), 4 (.html), farbig kaleidoskopartig (.html) | Hexagon (Polygon, 10 Ziffern) (.svg), Test Überlagerung Hexagonnetz (.svg)/(.png)/(.pdf), Hexagonschar (.html)

Fensterrosen (rosettenartige Moirébilder)

• Verschieb- und skalierbar: Parkettierungen (.html), (.html), (.html), weitere Muster (verschiebbar) (.html), Darstellungsvergleich (Rendering) (.html)

Carreaux miraculeux

• Verschieb- und skalierbar (.html), rot-cyan (.html); andere Variante (.html); spitz zulaufend (.html)

Klammern, Wellen und 3D-Effekte

• Klammern (.html); mit ‹pattern› (.html), wellenartiger 3D-Effekt (.html), (.svg)/(.pdf), dicht liegende Sinusschar (.html)/(.svg)/(.png); Spiralen (.html), (.svg)/(.pdf); Wellen (.svg)/(.pdf), Rosettenschar (.svg)/(.pdf), rotiert (.svg)/(.png); Grafiken mit Basisschachtelung (.svg)/(.webp), rotiert (.svg)/(.png), (.svg)/(.png); Rosetten selber erstellen (.html), Moiré-Kissen (.html), (.svg)/(.pdf)
• Moiré aus einer verallgemeinerten Lissajous-Figur zum Ausprobieren (.html), erste Fourier-Summanden (.html)
• Fadenmodelle (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), ist das nicht FaMo-s? (.svg)/(.pdf) (3.22 kB / 6.78 kB), (.svg)/(.pdf) im regulären Fünfeck (.svg)/(.pdf), (.svg)/(.pdf), reguläres Sechseck (.svg)/(.pdf), (.svg)/(.pdf)
• Linienabstand als Funktion des Sinus (.html)/(.svg)/(.pdf); als Funktion von SQRT (.svg)/(.pdf); mit Gaussverteilung (.html), (.svg), (.svg) [TeX Makro für die letzte Grafik: melusine.eu.org / ctan.org]; eine solche Grafik schmückte schon das Titelbild eines der berühmtesten Artikel zum Moiré-Effekt, jstor.org.

Maurer-Rosetten

• Maurer-Rosetten (.html): (.svg)/(.pdf), (.svg)/(.pdf); Füllfarbe (even-odd): (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf)
• Mit Kreisunterteilung (.html): (.png), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf); sin³ (.svg)/(.pdf), (.svg)/(.pdf), sin⁻³ (.svg)/(.png); Astroide (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), Fourier Dreiecksfunktion (.svg)/(.pdf)
• Animation im hellen Design I (.html), dunkel (.html), II (.html), dunkel (.html)

Verfolgungskurven (Polygonschachtelung)

• Gleichseitiges Dreieck kombiniert konstante Schrittweite (.svg)/(.pdf), konstante Geschwindigkeitsabnahme (exponentielle Schachtelung) (.svg)/(.pdf), (.svg)/(.pdf), Basisschachtelung im SVG (.txt)/(.svg)/(.pdf)
• Eine andere Variante im Dreieck (.html)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf)
• Quadrat, vierfach, mit Verstärkung des Moiré-Effektes durch Farbgebung (even-odd) (.svg)/(.pdf), (.svg)/(.pdf)
• Polygonschachtelung Pentagon (.svg)/(.pdf), überlagert (.svg)/(.pdf), (.pdf), inverse Schrittlänge (.svg)/(.pdf); geschachtelt (.svg)/(.pdf); affine Transformation mit MetaPost (.mp)/(.svg)
• Diagonal im 8-Eck: (.svg)/(.pdf) — Verfolgt vom Gedanken der Verfolgung? (.html)

Konforme Abbildungen

• Schachbrettmuster (.html); Transformation eines Quadratgitters unter der komplexen Sinusfunktion f(z)= sin(z), z = x + iy, mit –1 ≤ x ≤ 1 und –1 ≤ y ≤ 1, überlagert (.svg)/(.pdf), f(z) = z³ (.svg)/(.png), tan(z) (.png), (.svg)/(.png), 1/z: Inversion am Einheitskreis (.png)
• Transformation eines Dreieckgitters (.png) unter der komplexen Sinusfunktion (.png) (Ausschnitt); Inversion am Einheitskreis (.png), (.png), mit einem leicht veränderten Gitter (.png) ergibt sich wieder mit f(z) = 1/z eine jecke Form (.png), Gitter in Dreieckform (.png) zentriert um Schwerpunkt wieder mit 1/z (.png)/(.pdf), ohne Unterteilung der Schrittweite (.svg)/(.pdf), (.svg)/(.pdf), zentriert im Quadrat (.png)/(.pdf)
• Transformation eines Peano Polygonzuges, n = 4, unter der komplexen Funktion f(z) = z³ (.svg)/(.png), (.svg)/(.pdf), Gosper n = 5, z⁵ (.png), 1/z (.png)
• Verfolgungskurven im gleichseitigen Dreieck mit f(z) = z² (.svg)/(.pdf), tan(z) (.svg), 1/z (.svg)/(.pdf), 2x (.png), eofill (.webp)
  Verfolgungskurven im Quadrat mit f(z) = 1/z (.pdf), überlagert & eofill (.webp), z³ mit konstanter Schrittweite (.pdf)/(.webp), exp(z) (.svg)/(.pdf), cos(z) (.svg)/(.pdf)
  Verfolgungskurven im regulären Pentagon mit z³ und Farbverlauf (.svg)/(.pdf), Variante mit Pentagramm (.svg)/(.pdf), 1/z mit konstanter Schrittweite (.svg)/(.pdf)
• Konturplot (Realteil cyan, Imaginärteil rot) mit f(z) = 1/z (.png), f(z) = z^cos(z) (.png), f(z) = cos(1/z) (.png)

Fading Effekt

• Überlagerte auslaufende Muster mit Rotation und Translation (.html), Trikolore (.html), (.html), (.html)

Glass Muster und anderes

• Glass-Muster (.pdf), (.svg); Parallelen und Parabelschar (.html), emergenter Stern (.ps)/(.png), TeX-Makro für die letzte Grafik bei ctan.org.
• Einfache versteckte Formen (.html), Schriftzug (.html), Speichenrad (.html)
• Agfa1 (Rastergrafik) (.png), (.svg); Küchensiebe (.mp4)
• Rasterfolie (pinhole / stenopeic layer) 1. (.pdf), 2. (.pdf); Quadratgitter (.pdf)

Achtung! Browser auf mobilen Geräten, welche auf ‹SVG Tiny› zurückgreifen, stellen Vektorgrafiken mit dem Element ‹pattern› als grobe Rastergrafik dar.

Selbstähnliche Figuren können sowohl durch Schachtelungen im Text der Vektorgrafik selber als auch durch Erzeugen eines Pfades mit einem externen Programm erstellt werden. Kombinationen der beiden Methoden ergeben oft eine willkommene Optimierung hinsichtlich Darstellungszeit versus Datenmenge.

• Linienbaum (.svg)/(.pdf), Drachenbaum wikimedia.org, mit Zufallsfaktor r ∈ [0.6, 1] für die Astlänge (.svg)/(.pdf), HTML Canvas (.html), H-Baum (.svg)/(.pdf)
• von Koch-Kurven (.svg)/(.pdf), Schneeflocke (.svg)/(.pdf), baumartige Variante (.pdf), quadratische Versionen (.svg)/(.pdf), (.svg)/(.pdf), Variante mit Zufallsfaktor r ∈ [0, 1] angewandt auf Winkel und Schrittweite (.svg)/(.pdf)
• Peano-Kurve der Ordnung 2. Besonders schlagend sind in Grafiken dieses Typs relative Pfadkoordinaten: Auswurf meiner Vektorturtle 2.2 kB (.svg), optimiert durch Scour github.com mit Python ergibt 537 Bytes (.svg), rund 75% Reduktion! Es lohnt sich hier ein extra Skalierungsfaktor, um den schönen Pfad mit praktisch nur einstelligen ganzen Zahlen zu behalten; Ordnung 4 (.svg)/(.pdf) (9 bzw. 10 kB)
• Hilbert-Kurve der Ordnung 7 in einem Pfad (.svg)/(.pdf) (nur 32 bzw. 37 kB!), Ordnung 9, zusammengesetzt aus 4096 H4 Polygonzügen (.svg)/(.pdf) (nur 2.3(!) bzw. 19 kB). Freilich kann man auch von H1 ausgehen, allerdings mit einem etwas grösseren Dokument und einer längeren Darstellungszeit, vgl. Basisschachtelungen weiter unten (.svg)
• Polygonzug in Sierpiński-Dreieck der Ordnung 10 (.svg)/(.pdf), erzeugt durch die einfache Funktion (.txt); Gosper-Kurve der Ordnung 5 (.svg)/(.pdf), geschlossener Pfad (Szilard 1979, O4) (.svg)/(.pdf)
• Papierstreifenfalt- oder Drachen-Polygonzug der Ordnung 15 (.svg)/(.pdf) (nur 41 bzw. 63 kB, wobei der letzte Iterationsschritt durch SVG ‹href› erreicht wird)
• Basisschachtelungen in SVG-Dateien Vicsek-Fraktal (.svg)/(.pdf), T-Quadrat-Fraktal O(7) (.svg), O(8) (.svg)/(.pdf), Sierpiński-Dreieck von «Wereon» O(1) bis O(5) wikimedia.org, bis O(10) (.svg)/(.pdf); Sierpiński-Teppich von Johannes Rössel «Joey-das-WBF» O(6) wikimedia.org; solche Schachtelungen sind clever und extrem platzsparend, erforden aber zum Teil reichlich Zeit beim Rendern, wie die nächste Ordnung zeigt (.pdf)/(.svg), 4 kB, die es in sich haben!
  Variante mit Schweizer Kreuz O(0) - O(6) (.html); ein Kreuz ist ein Kreuz ist ein Kreuz (.svg)/(.pdf), farbenfroh: (.svg)/(.webp), (.svg)/(.webp)
  Rekursive Anordnung eines Zeichnungselements Fünfeck (.svg)/(.pdf) (1.2 kB / 2.7 kB), Sterne in Pentagon (.svg)/(.pdf), Eckige Spiralen (.svg)/(.pdf) (1.4 kB / 2.5 kB); mit einfachem Pfad (.svg)/(.pdf)
• Pythagorasbaum (.svg)/(.pdf): wunderschönes Programm von Guillaume Jacquenot github.com, das er auf Matlab geschrieben und ins dazu gut kompatible python.org übersetzt hat. Ermöglicht damit Hinzunahme der ‹Colormaps› der matplotlib.org und vieles mehr.
• Anstelle von rekursiv definierten Funktionen können «Lindenmayer-Systeme» (.html) implementiert werden. Gefällig und interaktiv hat dies Marek Fišer malsys.cz umgesetzt. Mit seinem «L-system processor» ist folgende Grafik erstellt (.svg)/(.pdf)
• Hyperbolische Geometrie mit Jeremy Tan Jie Rui, «Singapore's original vector hacker» gitlab.com/parclytaxel: (.svg)/(.pdf)

• Neon Farbeffekt (van Tuijl, Ehrenstein) (.html), Gitter (cyan-rot) (.svg)
• Isia Leviants Enigma Täuschung rot-gelb (.svg), (.svg), lichtgrün (.svg)/(.png), Quadrate (.svg), violett-lila (.svg)/(.png), (.svg)/(.png)
• Kanizsa euklidisch (.svg), sphärisch (.svg), hyperbolisch (.svg), (.svg)/(.png)
• Flächenkontrast (.svg)/(.html), Farbhintergrund (.html)/(.svg), Farbampel (.svg)/(.html)/(.pdf)
• Würfel (.svg)/(.pdf), (.svg)/(.pdf)
• Poggendorff (.html) | Reliefs (.svg), (.svg); + (.svg), (.svg); Verzerrung (.html), wobbelnde Quadrate (.svg)/(.html)
• Rot und blau (.svg), (.html), (.html)
• Einfacher Anaglyph (vorne - hinten) (.svg), (.html), 3D: Die Moka Express bitte immer am Griff fassen! (.jpg), (.jpg), (.jpg), (.jpg), (.jpg), (.jpg)
• Rotoreliefs (.html), (.html)

Für weitere optische Täuschungen siehe z. B.:

• Akiyoshi's illusion pages, ritsumei.ac.jp
• Optische Täuschungen & Sehphänomene, michaelbach.de
• Illusions d'optique, jeux-et-mathematiques.davalan.org
• Enlighting Mind, fisica.unifi.it

Einer der ersten, der sich wissenschaftlich mit der physiologischen Optik befasst, ist Hermann von Helmholtz: e-rara-21259, en français: gallica.bnf.fr.

Aus der ‹openclipart›

Penrose «Dreieck» openclipart.org [1a], [1b], «Wellen» [2], «Rotation» [3], «3D» [4], Farbvariante der «Fraser Spirale» [5], «Adelson Schatten» [6], Farbhintergrund [7], 3D [8].

Diese Dokumente sind für den Gebrauch auf einem Tablet oder mobilen Gerät mit Stiftfunktion gedacht. Bitte beim allfälligen Ausdrucken die Wahl auf «tatsächliche Grösse» («Fit to printable area: none») belassen. Die Lineaturstärke beträgt dem Standard von TikZ gemäss 0.4 pt. Diesen Standard habe ich, von Spezialblättern abgesehen, übernommen.

• A4, liniert 9 mm hellgrau (.svg)/(.pdf), kariert 4 mm azurblau (.svg)/(.pdf), kariert 5 mm azurblau (.svg)/(.pdf), «rautiert» 5 zu 9 mm azurblau (.svg)/(.pdf), 4 zu 7 mm (.svg)/(.pdf); Millimeterpapier (.svg)/(.pdf), einfach logarithmisch (.svg)/(.pdf); Polarkoordinaten (.svg)/(.pdf)
• Minimalistische Vektorgrafik mit dem Element ‹pattern› in Pixel, 1000 × 1000, 20 kariert azurblau (.svg)/(.pdf)
• Übungsheft / Cahier A4 4 mm (.pdf), A4 5 mm (.pdf), A4 liniert 9 mm (.pdf), Carnet A6 kariert 5 mm (.pdf), Carnet A6 liniert 9 mm (.pdf)
• Notenblatt (.svg)/(.pdf), Notenheft (.pdf), Carnet (.pdf), Notenblatt Klavier (MusiXTeX) (.svg)/(.pdf), ohne Schlüssel (.svg)/(.pdf)

Optimierte Darstellung von PDF und SVG Dokumenten

• SVG-Elemente in Pfade umwandeln? (.html), Python SVG Class Documentation and Optimisation Tools (.html)
• DVI, EPS und PDF in SVG konvertieren dvisvgm.de, Rastergrafiken mit PIL pypi.org
• PDFKit: pdfkit.org, CairoSVG: cairosvg.org, Reportlab: reportlab.com, PDF Association: pdfa.org
• Klein, einfach und genau: Funktionswerte direkt in SVG-Pfad schreiben (.c), (.py), (plot.svg), (plot_scour.svg). Auch beim schlanken Asymptote ist die Anzahl Punkte unter bester Kontrolle (.asy), der Export hingegen (.svg) kommt nicht ohne unnötige Transformationsmatrix aus, also lassen wir sie einfach weg (.svg)
• Besonders wendige Formen aus Liniensegmenten können mit SVG <stroke-linecap="round"> geschmeidig gemacht werden (.svg)/(.pdf). Ein ganzer Pfad ist hier wegen der Verjüngung der Konturstärke (noch?) nicht möglich.
• Browservergleich beim Rendern von Vektorgrafiken: Firefox 85.0 (.png), (.png), Brave 1.19.88 (Chromium) (.png), (.png)
• Kontrolle durch den Moiré-Effekt (.html)

Einige spezielle Vektor-Realisierungen

• Filtereffekte (.svg)/(.webp), (.svg), Animation eines Filterelements (.svg); SVG Filter Playground yoksel.github.io, Inkscape Filter Effects wiki.inkscape.org
• Vektorisierung von Rastergrafiken kleiner Auflösung (.jpg) durch PixelArt (Halbton-Effekt) (.pdf)/(.webp); ausgeflippt (.pdf)/(.webp), Kantenerkennung (.pdf), klassisch (.pdf), Deckkraft (.pdf). Erstellt durch ein einfaches Python-Programm mit Grössengewichtung: (.py) oder mit Abtastungsbereich (für grosse Dateien) und Gauss-Weichzeichnung (.py); Potrace von Peter Selinger sourceforge.net
• Fraktur mit <symbol> (.svg), Spirograph, 3D-Effekt durch <fill-rule="evenodd"> (.svg)/(.pdf)
• Parkettierungen ganzer Seiten (.html), (.html), (.html), (.html), (.html), (.html), (.html), (.html), (.html), (.html); Testdruck mit Firefox 141 mit [Ctrl] + [P] (.pdf) (2 kB); Chromium 144 druckt es mit skia.org wie SVG <pattern> als Halbton-Raster: (.pdf)
• VectorArt und Kurven-Gallerie (.html)

Formeln in HTML

Mathematik und HTML ist ein weites Feld (lange kein besonders ruhmreiches und ästhetisches…). Am besten erstellt man eine Vektorgrafik oder arbeitet via MathJax.org oder KaTeX.org, welche jedoch JavaScript voraussetzen.

• MathJax/JavaScript: SQRT Formula Creator CHTML (.html), SVG mit Dateispeicherung (.html), Euler Kettenbruch (.html), MathML (.html)
• KaTeX/JavaScript: Euler (.html), SQRT FormulaCreator (.html), Bsp. Stefan-Boltzmann-Gesetz (.html)
• SVG: Eulersche Zahl (.svg)/(.pdf), (.svg); Maxwell-Gleichungen (.svg)/(.webp); Dirac-Gleichung (.svg); Entropie eines Schwarzen Loches (.svg)/(.webp); Hawking Temperatur (.svg)/(.webp); Schaltung und Kettendivision (.svg), Multiplikation (.svg)/(.webp); Folgerichtigkeit (.svg)/(.webp)