AMOLED Screen

An AMOLED screen's defining visual feature is its PenTile RGBG diamond subpixel arrangement plus its true blacks, so I'm planning an SVG that zooms into a phone display to reveal that diamond subpixel pattern with a magnified inset for detail. Working out the diamond PenTile geometry... Greens alternate tilt orientation diagonally to create the classic PenTile look, so I'll place them at (0,0) and (20,20) tilted one way, and at (20,0) and (0,20) tilted the other. I'll render this magnified pattern inside a circular view on a black background with a subtle glow, lighting subpixels to show how full white versus partial color regions appear. Now I'm building out the full page structure with a dark body background, SVG filters for glow effects, gradients, and a rounded rectangle for the phone frame, plus labels like "True black," "Diamond PenTile," and "Self-emissive," and adding subtle animations like a glow pulse and shimmer sweep. Writing SVG code... Writing subpixel pattern code... Writing bloom filter layers... I'll add a gradient-masked black overlay to show the fade from lit to true black, plus labels like "Diamond PenTile · RGBG" with a leader line and annotations noting "subpixels off → 0 nits." I'm planning the overall composition at 960x640, positioning the phone illustration, magnifier circle, and text callouts, and considering a subtle pulse animation for the lit subpixels. I'll also add a shimmer sweep across the magnifier and a blinking clock colon, using system-ui fonts, with bloom/glow filters via Gaussian blur. Writing SVG code for the phone screen contents including the gradient orb, clock text, date, lock icon, and always-on dots... Working out the polygon coordinates connecting the small selection rectangle on the phone to the magnifier circle, so the cone shape visually links the zoomed detail to its source point... Refining the tangent points, I settle on (533,173) and (533,427) which give a radius close enough to 180 for the magnifier circle. I'm setting up the polygon connecting the cone to the magnifier ring with a subtle fill, then defining the ring itself with an outer thin stroke and a clip path for the circular content, starting with a black background rect inside. I'm layering the glow with bloom filter, a crisp pattern layer, an unlit gradient overlay for true-black shadowing, and a shimmer animation, then thinking about simplifying the RGB legend into small diamond swatches below the circle rather than leader lines, plus placing an "AMOLED" title with subtitle above the whole diagram. Now I'm working out coordinates: adjusting the magnified circle to center around (680,330) with radius 175 so it clears the title area, positioning the legend below it, and laying out the phone mockup on the left with its screen bounds and a caption underneath. Now I'm defining the pentile subpixel pattern for the SVG, setting up a repeating tile with green ellipses positioned at each corner and rotated alternately to create the diamond arrangement typical of an AMOLED display. I'm placing red and blue diamond subpixels between the greens, then setting up radial gradients for each color so the subpixels look emissive rather than flat, along with a linear gradient to represent dimmed or unlit regions of the display. I'm layering a rectangle with that dim gradient over the bottom-right of the magnifier to fade it toward true black, adding a small label there noting "0 nits · true black" for authenticity, then building a rotated shimmer highlight using a gradient rectangle animated to sweep across the circle on a repeating loop. For the rest of the phone mockup, I'm animating the clock's colon to blink, adding pulsing blurred magenta and cyan orbs clipped to the rounded screen as a wallpaper effect, and planning a punch-hole camera cutout. I'm sketching out the phone body with a dark metal gradient and highlighted edge stroke, plus small side button rects and bright corner brackets marking a magnified-region indicator on the screen. For the legend, I'm settling on three swatch shapes (diamond, oval, diamond) labeled R, G, B with a supporting note underneath. Now I'm placing the title "AMOLED" and subtitle text describing self-emissive pixels and Diamond PenTile layout, plus a "64×" magnification pill near the circle, positioning the legend items below, and adding a small caption for "Always-on display" under the phone. Writing SVG code... Adding edge gradients and clip paths... I'm sketching the phone dimensions and screen area, then thinking through an always-on display wallpaper concept: mostly black background with subtle magenta and cyan orbs at low opacity to keep colors vivid, plus a lock icon, time, date, and a soft neon arc near the bottom. I'm placing the magnifier region marker over a spot that overlaps one lit orb and black space, then working out the geometry for the cone connecting the marker to the magnified circle, checking the radius math so the points line up correctly. Writing SVG magnifier code... I'm shaping the dim gradient so black concentrates in the lower-right, then positioning a small "0 nits — true black" label near that corner, anchored so it fits inside the circle without spilling over. I'm also planning a "lit subpixels" label for the top-left area. Skipping the inline label to avoid overlap, I'll instead sketch a small magnification pill reading "64×" positioned just outside the circle's top-right edge, with a dark rounded rectangle and centered text. Now I'm laying out a legend row below with colored swatches and labels for red, green, and blue subpixels, plus a note explaining that pixels share subpixels in an RGBG PenTile arrangement. For the clock display, I'm splitting the time text into separate spans so the colon can blink with a CSS opacity animation. Below that, the date text sits at font 13 in a muted gray. I'm adding a small padlock icon near the top of the screen, positioned centered above the time, plus a punch-hole camera circle near the very top with a lens ring detail. Adding bottom icon circles and neon glow ellipses... Setting the marker rect and adding corner bracket details with faint white strokes, plus bloom and soft blur filters for glow effects, and a subtle diagonal highlight overlay on the phone glass for realism. Adding a text glow filter and a soft blurred shadow ellipse beneath the phone, plus a faint outer glow spilling from the magnifier circle to suggest lit subpixels beyond its edge. Adding ring strokes and pentile pattern... Adding green ellipse elements... I realize the tile boundaries are cutting off the shapes at the corners since neighboring tiles don't overlap into each other's edges. I need to add duplicate shapes at the tile edges (like x=60, y=60, and 60,60) so each quarter gets properly filled in by adjacent tiles instead of getting clipped. Then I'm checking that the rotation angles stay consistent across these duplicated positions, confirming the diagonal ones use +38° while the mid-edge ones use -38°, and verifying the fully interior diamonds don't need any duplication since they fit well within the tile bounds. Confirmed — that's the diamond pentile arrangement I wanted. Now I'm adding a darkening gradient overlay across the loupe area to simulate the vignette effect, and considering layering a subtle magenta/cyan radial tint on top for extra realism. I'm also sketching a shimmer effect inside the loupe using a rotated rect with a shine gradient that animates across the clipped circle, adjusting the x offsets so it sweeps correctly through the 505-855 span. Now I'm adding CSS keyframes for a blinking effect and a slow pulsing opacity animation to layer subtle motion into the design. I'm adding accessibility markup like role and title tags, placing the phone's side buttons, and adding a caption describing the always-on display concept. I'm also making sure the screen content is properly clipped within the phone's bounds and adding a reflection overlay for realism. Writing the code now... ## Your AMOLED screen — magnified to the subpixels 🔎 ```html AMOLED Screen ``` **What you're looking at:** the phone on the left is showing an always-on display, where the background isn't dark grey — it's *off*. The loupe blows up a 50 px patch 64× so you can see the actual emitter layout: chunky blue diamonds, smaller red diamonds (blue phosphors age fastest, so they get more area), and twice as many little green ovals tilted in alternating directions. Slide toward the bottom-right of the loupe and the emitters simply stop emitting — that's the infinite contrast trick no backlight can do.

Make a SVG of my AMOLED screen