← Back to dashboard

isometric smartphone with secure payment shield

Model: openai | Tier: complex | ID: a4aa7e6a-e3a5-4893-965b-fb15c315745f_6e96693019b6f402 | 24 elements

0.632
Editability
1.000
Coverage
0.632
Purity
0.152
Crosstalk
0.402
Compact
0.802
Locality
0.970
Contiguity
full
Showing: full SVG

Concept Groups

white smartphone outline: 0 1 2 3 4 6 16 18 23
light blue screen area: 5
blue credit card overlay: 7 8 9 10 17
gold shield with white checkmark: 15 19 20 21 22
top-right corner of smartphone: 11 12 13 14
bottom-left shadow:

Elements — click to highlight

#TagConceptPurityContributions
0 rect white smartphone out
1.000
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.000
bottom-left
0.000
1 ellipse white smartphone out
0.536
white smartp
0.013
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.005
bottom-left
0.007
2 rect white smartphone out
0.932
white smartp
0.570
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.023
bottom-left
0.019
3 path white smartphone out
0.929
white smartp
0.115
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.004
bottom-left
0.004
4 rect white smartphone out
0.921
white smartp
0.187
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.009
bottom-left
0.007
5 rect light blue screen ar
0.462
white smartp
0.031
light blue s
0.317
blue credit
0.000
gold shield
0.000
top-right co
0.154
bottom-left
0.183
6 rect white smartphone out
0.931
white smartp
0.045
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.002
bottom-left
0.001
7 rect blue credit card ove
0.376
white smartp
0.000
light blue s
0.620
blue credit
0.892
gold shield
0.000
top-right co
0.448
bottom-left
0.416
8 path blue credit card ove
0.370
white smartp
0.000
light blue s
0.037
blue credit
0.054
gold shield
0.000
top-right co
0.029
bottom-left
0.026
9 path blue credit card ove
0.375
white smartp
0.000
light blue s
0.013
blue credit
0.018
gold shield
0.000
top-right co
0.009
bottom-left
0.009
10 text blue credit card ove
0.379
white smartp
0.000
light blue s
0.010
blue credit
0.020
gold shield
0.000
top-right co
0.011
bottom-left
0.011
11 rect top-right corner of
0.470
white smartp
0.000
light blue s
0.001
blue credit
0.013
gold shield
0.000
top-right co
0.048
bottom-left
0.040
12 rect top-right corner of
0.463
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.001
bottom-left
0.001
13 path top-right corner of
0.508
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.000
bottom-left
0.000
14 path top-right corner of
0.517
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.001
bottom-left
0.000
15 circle gold shield with whi
0.551
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.010
top-right co
0.004
bottom-left
0.004
16 circle white smartphone out
1.000
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.000
bottom-left
0.000
17 circle blue credit card ove
0.314
white smartp
0.000
light blue s
0.000
blue credit
0.001
gold shield
0.000
top-right co
0.000
bottom-left
0.000
18 circle white smartphone out
1.000
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.000
bottom-left
0.000
19 path gold shield with whi
0.655
white smartp
0.000
light blue s
0.001
blue credit
0.001
gold shield
0.843
top-right co
0.211
bottom-left
0.230
20 path gold shield with whi
0.655
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.059
top-right co
0.015
bottom-left
0.016
21 path gold shield with whi
0.648
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.087
top-right co
0.023
bottom-left
0.024
22 path gold shield with whi
0.653
white smartp
0.000
light blue s
0.000
blue credit
0.000
gold shield
0.001
top-right co
0.000
bottom-left
0.000
23 rect white smartphone out
0.924
white smartp
0.038
light blue s
0.000
blue credit
0.000
gold shield
0.000
top-right co
0.002
bottom-left
0.001

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="700" viewBox="0 0 900 700"> <defs> <!-- Soft shadow --> <filter id="shadow" x="-30%" y="-30%" width="160%" height="160%"> <feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#000" flood-opacity="0.18"/> </filter> <!-- Phone body gradient --> <linearGradient id="phoneBody" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="#ffffff"/> <stop offset="1" stop-color="#f1f4f9"/> </linearGradient> <!-- Screen gradient --> <linearGradient id="screenGrad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#eaf3ff"/> <stop offset="1" stop-color="#d7e9ff"/> </linearGradient> <!-- Card gradient --> <linearGradient id="cardGrad" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="#2f86ff"/> <stop offset="1" stop-color="#1e5fd6"/> </linearGradient> <!-- Shield gradient --> <linearGradient id="shieldGrad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#ffd84a"/> <stop offset="1" stop-color="#f2b600"/> </linearGradient> <!-- Gold gradient --> <linearGradient id="goldGrad" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="#ffe08a"/> <stop offset="0.55" stop-color="#f6c44b"/> <stop offset="1" stop-color="#d79a1c"/> </linearGradient> <!-- Isometric tilt --> <g id="iso" transform="translate(450 350) skewX(-18) rotate(-10) translate(-450 -350)"/> </defs> <!-- Step-by-step analysis (embedded as comments) 1) Create an isometric (tilted) composition: a smartphone angled in 3D-like view. 2) Draw a white phone body with rounded corners and a soft shadow beneath. 3) Add a light-blue screen area inside the phone. 4) Place a blue credit card on the screen with visible number "1098 7654 3210". 5) Add a golden chip on the card and two golden coin-like circles near the card’s top-right. 6) Overlay a prominent yellow shield partially covering the phone screen. 7) Inside the shield, draw a white angular checkmark-like design to imply security. --> <!-- Background (clean, subtle) --> <rect width="900" height="700" fill="#ffffff"/> <!-- Group with isometric transform --> <g transform="translate(0 0)"> <g transform="translate(0 0)"> <!-- Apply isometric tilt to main illustration --> <g transform="translate(0 0) skewX(-18) rotate(-10 450 350)"> <!-- Phone shadow --> <ellipse cx="470" cy="560" rx="250" ry="60" fill="#000" opacity="0.08"/> <!-- Phone body --> <rect x="260" y="120" width="380" height="520" rx="44" fill="url(#phoneBody)" filter="url(#shadow)"/> <!-- Phone side highlight --> <path d="M610 130 C630 150 640 175 640 205 L640 555 C640 595 615 630 575 640 L600 640 C635 635 660 605 660 570 L660 200 C660 160 640 130 610 120 Z" fill="#e9eef6" opacity="0.7"/> <!-- Screen bezel --> <rect x="290" y="165" width="320" height="440" rx="28" fill="#ffffff" opacity="0.9"/> <!-- Screen --> <rect x="305" y="180" width="290" height="410" rx="22" fill="url(#screenGrad)"/> <!-- Speaker notch / top detail --> <rect x="420" y="150" width="80" height="10" rx="5" fill="#d7dde7"/> <!-- Credit card on screen --> <g transform="translate(0 0)"> <rect x="335" y="250" width="270" height="170" rx="18" fill="url(#cardGrad)" filter="url(#shadow)"/> <!-- Card subtle shine --> <path d="M350 260 L520 260 L420 420 L350 420 Z" fill="#ffffff" opacity="0.10"/> <path d="M520 260 L590 260 L590 320 L470 420 L420 420 Z" fill="#ffffff" opacity="0.06"/> <!-- Card number --> <text x="360" y="350" font-family="Arial, Helvetica, sans-serif" font-size="22" fill="#ffffff" opacity="0.95" letter-spacing="2"> 1098 7654 3210 </text> <!-- Gold chip --> <g transform="translate(0 0)"> <rect x="360" y="285" width="62" height="48" rx="8" fill="url(#goldGrad)"/> <rect x="368" y="293" width="46" height="32" rx="6" fill="none" stroke="#b97b10" stroke-opacity="0.55" stroke-width="2"/> <path d="M391 285 V333" stroke="#b97b10" stroke-opacity="0.55" stroke-width="2"/> <path d="M360 309 H422" stroke="#b97b10" stroke-opacity="0.55" stroke-width="2"/> </g> <!-- Two golden coin-like shapes near top right of card --> <g> <circle cx="565" cy="295" r="16" fill="url(#goldGrad)"/> <circle cx="590" cy="315" r="16" fill="url(#goldGrad)"/> <circle cx="565" cy="295" r="16" fill="none" stroke="#b97b10" stroke-opacity="0.35" stroke-width="2"/> <circle cx="590" cy="315" r="16" fill="none" stroke="#b97b10" stroke-opacity="0.35" stroke-width="2"/> </g> </g> <!-- Yellow shield overlay (partially covering screen/card) --> <g filter="url(#shadow)"> <!-- Shield shape --> <path d="M520 305 C560 285 595 285 635 305 L635 385 C635 450 592 500 578 510 C564 500 520 450 520 385 Z" fill="url(#shieldGrad)"/> <!-- Inner highlight --> <path d="M535 318 C568 303 588 303 620 318 L620 382 C620 432 590 470 578 478 C566 470 535 432 535 382 Z" fill="#ffffff" opacity="0.12"/> <!-- White angular checkmark-like design --> <path d="M555 390 L575 410 L610 360 L625 372 L578 440 L543 405 Z" fill="#ffffff"/> <!-- Small cut to make it more angular --> <path d="M575 410 L585 398 L610 360 L625 372 L600 410 Z" fill="#ffffff" opacity="0.35"/> </g> <!-- Home indicator / bottom detail --> <rect x="420" y="615" width="90" height="10" rx="5" fill="#d7dde7" opacity="0.9"/> </g> </g> </g> </svg>