← Back to dashboard

checkerboard frame with yellow diamond graphic

Model: medium_openai | Tier: medium | ID: cfa27aa4-7443-4ea4-bae7-c2bd746a2e23_bc2bcebb6af58fcf | 3 elements

0.720
Editability
1.000
Coverage
0.720
Purity
0.176
Crosstalk
0.900
Compact
0.914
Locality
1.000
Contiguity
full
Showing: full SVG

Concept Groups

top-right white square:
central yellow diamond: 2
middle checkerboard pattern: 0 1

Elements — click to highlight

#TagConceptPurityContributions
0 rect middle checkerboard
0.503
top-right wh
0.956
central yell
0.007
middle check
0.975
1 rect middle checkerboard
0.504
top-right wh
0.002
central yell
0.000
middle check
0.002
2 polygon central yellow diamo
0.937
top-right wh
0.043
central yell
0.993
middle check
0.024

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"> <!-- Step-by-step analysis (embedded as comments) 1) Create a full canvas with a central transparent "window" area (no fill) where content can show through. 2) Build a thick rectangular frame around that window. 3) Fill the frame with a classic checkerboard pattern using black and light beige squares. 4) Add a light yellow diamond shape in the bottom-left corner, positioned to overlap the checkered frame. 5) Keep the center area empty/transparent and ensure the checkerboard only appears in the border region. --> <defs> <!-- Checkerboard pattern: black + light beige --> <pattern id="checker" width="40" height="40" patternUnits="userSpaceOnUse"> <rect width="40" height="40" fill="#e8ddc6"/> <rect x="0" y="0" width="20" height="20" fill="#111111"/> <rect x="20" y="20" width="20" height="20" fill="#111111"/> </pattern> <!-- Mask to show pattern only in the frame (outer rect minus inner rect) --> <mask id="frameMask"> <!-- Black = hidden --> <rect x="0" y="0" width="800" height="600" fill="black"/> <!-- White = visible frame area --> <rect x="60" y="60" width="680" height="480" fill="white"/> <!-- Cut out the inner window (make it black again) --> <rect x="150" y="120" width="500" height="360" fill="black"/> </mask> <!-- Subtle shadow for the diamond --> <filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%"> <feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#000000" flood-opacity="0.25"/> </filter> </defs> <!-- Checkerboard frame (pattern clipped by mask) --> <rect x="0" y="0" width="800" height="600" fill="url(#checker)" mask="url(#frameMask)"/> <!-- Optional thin inner outline to emphasize the transparent window --> <rect x="150" y="120" width="500" height="360" fill="none" stroke="#1a1a1a" stroke-opacity="0.35" stroke-width="2"/> <!-- Light yellow diamond in bottom-left, overlapping the border --> <g filter="url(#softShadow)"> <!-- Diamond (rotated square) --> <polygon points="160,520 240,440 320,520 240,600" fill="#ffe36a" stroke="#d9b94a" stroke-width="4" /> </g> </svg>