Composición en azulÓleo sobre lienzo · 1923
Composición en azulÓleo sobre lienzo · 1923
Arrastra para mover · rueda o pellizca para ampliar
HTML + CSSOverlays
Painting zoom viewer with minimap
A framed painting opens full screen: wheel or pinch to zoom, drag with inertia and a minimap showing the visible area.
Settings
16px
1x
Code
<div class="uvq13-art"><svg class="def" aria-hidden="true" width="0" height="0"><symbol id="uvq13-art-p" viewBox="0 0 400 300"><rect width="400" height="300" fill="#efe6d2"/><rect x="250" y="160" width="134" height="124" fill="#1f2937"/><g fill="#f8f5ec"><rect x="271" y="176" width="9" height="9"/><rect x="289" y="176" width="9" height="9"/><rect x="307" y="176" width="9" height="9"/><rect x="262" y="185" width="9" height="9"/><rect x="280" y="185" width="9" height="9"/><rect x="298" y="185" width="9" height="9"/><rect x="271" y="194" width="9" height="9"/><rect x="289" y="194" width="9" height="9"/><rect x="307" y="194" width="9" height="9"/><rect x="262" y="203" width="9" height="9"/><rect x="280" y="203" width="9" height="9"/><rect x="298" y="203" width="9" height="9"/></g><circle cx="130" cy="125" r="88" fill="#1e3a8a"/><circle cx="130" cy="125" r="56" fill="none" stroke="#f59e0b" stroke-width="10"/><circle cx="130" cy="125" r="20" fill="#dc2626"/><path d="M20 270L380 40" stroke="#111" stroke-width="3"/><path d="M60 292L330 10" stroke="#111" stroke-width="1.2"/><path d="M226 286l60-104 60 104z" fill="#facc15" fill-opacity=".92"/><g fill="#111"><circle cx="234.4" cy="97.0" r="1.9"/><circle cx="334.6" cy="129.1" r="2.4"/><circle cx="285.9" cy="34.5" r="2.7"/><circle cx="325.4" cy="67.5" r="2.5"/><circle cx="287.0" cy="36.5" r="1.4"/><circle cx="337.3" cy="74.2" r="1.9"/><circle cx="259.5" cy="81.8" r="1.1"/><circle cx="245.2" cy="122.1" r="2.8"/><circle cx="259.0" cy="37.3" r="1.5"/><circle cx="306.1" cy="53.4" r="1.3"/><circle cx="265.0" cy="135.3" r="2.8"/><circle cx="263.6" cy="32.2" r="1.3"/><circle cx="285.8" cy="54.8" r="2.4"/><circle cx="313.2" cy="110.3" r="2.0"/><circle cx="356.9" cy="33.8" r="2.0"/><circle cx="282.1" cy="63.6" r="1.3"/><circle cx="349.5" cy="94.7" r="2.1"/><circle cx="286.3" cy="134.6" r="1.1"/><circle cx="266.5" cy="84.1" r="1.0"/><circle cx="314.4" cy="134.1" r="2.3"/><circle cx="341.8" cy="101.5" r="1.8"/><circle cx="334.0" cy="129.6" r="1.2"/><circle cx="303.2" cy="128.7" r="0.9"/><circle cx="305.4" cy="130.7" r="2.0"/><circle cx="328.7" cy="61.9" r="2.4"/><circle cx="296.8" cy="68.3" r="1.7"/><circle cx="320.4" cy="50.5" r="2.8"/><circle cx="249.3" cy="46.0" r="1.7"/><circle cx="372.5" cy="37.3" r="1.3"/><circle cx="293.5" cy="127.1" r="0.9"/><circle cx="334.9" cy="128.6" r="1.7"/><circle cx="292.9" cy="48.6" r="2.4"/><circle cx="275.2" cy="109.6" r="2.6"/><circle cx="232.7" cy="40.7" r="1.6"/><circle cx="258.9" cy="79.7" r="1.9"/><circle cx="343.6" cy="80.4" r="2.8"/><circle cx="281.5" cy="74.1" r="1.7"/><circle cx="350.4" cy="43.6" r="1.8"/><circle cx="317.4" cy="117.6" r="2.5"/><circle cx="269.1" cy="106.9" r="1.4"/><circle cx="297.6" cy="92.9" r="0.8"/><circle cx="347.9" cy="80.6" r="2.4"/><circle cx="249.7" cy="60.9" r="2.1"/><circle cx="329.9" cy="130.3" r="2.2"/><circle cx="341.4" cy="37.8" r="0.7"/><circle cx="369.9" cy="135.3" r="0.7"/></g><g stroke="#b91c1c" stroke-width="1.4"><path d="M36 292l30-60"/><path d="M42 292l30-60"/><path d="M48 292l30-60"/><path d="M54 292l30-60"/><path d="M60 292l30-60"/><path d="M66 292l30-60"/><path d="M72 292l30-60"/><path d="M78 292l30-60"/><path d="M84 292l30-60"/><path d="M90 292l30-60"/><path d="M96 292l30-60"/><path d="M102 292l30-60"/><path d="M108 292l30-60"/><path d="M114 292l30-60"/></g><rect x="18" y="18" width="70" height="26" fill="#dc2626"/><path d="M300 58q6-6 12 0q6-6 12 0" fill="none" stroke="#111" stroke-width="1.2"/><text x="340" y="294" font-size="6" font-family="Georgia,serif" font-style="italic" fill="#3f3f46">M. Ferrer 1923</text></symbol></svg><div class="wall"><button type="button" class="fire" aria-haspopup="dialog" aria-label="Enlarge painting"><svg viewBox="0 0 400 300" aria-hidden="true"><use href="#uvq13-art-p"/></svg></button><p class="pl"><b>Composition in blue</b><small>Oil on canvas · 1923</small></p></div><div class="vw" role="dialog" aria-modal="true" aria-label="Composition in blue"><div class="vp" tabindex="0" role="group" aria-label="Zoomable painting"><div class="cv"><svg viewBox="0 0 400 300" width="400" height="300" aria-hidden="true"><use href="#uvq13-art-p"/></svg></div></div><div class="cap"><b>Composition in blue</b><small>Oil on canvas · 1923</small></div><p class="hn">Drag to move · scroll or pinch to zoom</p><div class="tb"><button type="button" class="zo" aria-label="Zoom out">−</button><output>100 %</output><button type="button" class="zi" aria-label="Zoom in">+</button><button type="button" class="ft">Fit</button></div><div class="mm" aria-hidden="true"><svg viewBox="0 0 400 300"><use href="#uvq13-art-p"/></svg><i class="mr"></i></div><button type="button" class="x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Museum sites let you get close to the brushstrokes, and this viewer does the same for any SVG or image. The framed thumbnail opens a dark full screen view, the wheel zooms where the pointer is, two fingers pinch, a drag pans with inertia and a double click jumps in. It fits galleries, maps, plans and product detail.
The main color is the gilded frame and the minimap outline, the second one the viewing room. Swap the symbol for your own artwork, keep its viewBox in the script, and use arrows, plus, minus and zero to move, zoom and reset from the keyboard.