Magische Lupe

Im Science-Fiction-Film Sie Leben (John Carpenter, 1988) erlaubt eine spezielle Sonnenbrille einen Blick auf eine verborgene Realität. Diese Brille habe ich nachgebaut, hier in der Form einer Lupe.

Die Lupe zeigt versteckte Details.

Implementierung

Mit HTML und CSS kann ich leider nur rechteckige Ausschnitte aus einem Bild erzeugen, deshalb musste ich SVG nutzen:

Ein SVG-Element enthält zwei übereinandergelegte Bilder und darüber eine Lupen-Grafik.
Vom oberen Bild wird mit Hilfe eines clip-path-Attributes nur ein kleiner Ausschnitt angezeigt.
Die Lupe ist verschiebbar, bei einem Verschieben der Lupe wird auch der clip-path verschoben.

Als Ergebnis schaut man durch die verschiebbare Lupe in die verborgene Realität der Wichtel.

Zum Selbermachen: minimaler HTML-Code und Erklärung.