Showing: full SVG
Concept Groups
red heart body: 0 1 2 3 4 12
central dark circular padlock: 6 8 10
white heart-shaped key: 7
light pink key shaft: 11 15
small black dot near padlock: 9 14
tiny white square near key tip: 5 13 16 17
Elements — click to highlight
| # | Tag | Concept | Purity | Contributions |
|---|---|---|---|---|
| 0 | path |
red heart body |
1.000
|
0.000 0.000 0.000 0.000 0.000 0.000 |
| 1 | path |
red heart body |
1.000
|
0.000 0.000 0.000 0.000 0.000 0.000 |
| 2 | path |
red heart body |
0.429
|
0.550 0.000 0.275 0.141 0.096 0.221 |
| 3 | path |
red heart body |
0.403
|
0.395 0.000 0.195 0.124 0.085 0.181 |
| 4 | path |
red heart body |
0.418
|
0.029 0.000 0.014 0.008 0.009 0.009 |
| 5 | path |
tiny white square ne |
0.292
|
0.022 0.000 0.033 0.046 0.020 0.050 |
| 6 | path |
central dark circula |
0.468
|
0.001 0.988 0.217 0.225 0.489 0.192 |
| 7 | circle |
white heart-shaped k |
0.241
|
0.003 0.000 0.003 0.002 0.003 0.002 |
| 8 | circle |
central dark circula |
0.454
|
0.000 0.001 0.000 0.000 0.000 0.000 |
| 9 | circle |
small black dot near |
0.381
|
0.000 0.000 0.001 0.001 0.002 0.001 |
| 10 | path |
central dark circula |
0.486
|
0.000 0.010 0.002 0.002 0.005 0.002 |
| 11 | rect |
light pink key shaft |
0.450
|
0.001 0.000 0.090 0.265 0.146 0.088 |
| 12 | path |
red heart body |
1.000
|
0.000 0.000 0.000 0.000 0.000 0.000 |
| 13 | rect |
tiny white square ne |
0.817
|
0.000 0.000 0.000 0.000 0.000 0.002 |
| 14 | circle |
small black dot near |
0.312
|
0.000 0.001 0.007 0.013 0.015 0.011 |
| 15 | circle |
light pink key shaft |
0.317
|
0.000 0.000 0.001 0.002 0.002 0.002 |
| 16 | path |
tiny white square ne |
0.342
|
0.000 0.000 0.157 0.163 0.125 0.231 |
| 17 | path |
tiny white square ne |
0.386
|
0.000 0.000 0.005 0.005 0.003 0.008 |
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<!-- Step-by-Step Analysis (in comments)
1) Compose a flat, minimalist icon on a transparent background (no backdrop rectangle).
2) Draw a red heart-shaped lock body (heart silhouette + slight highlight/shadow).
3) Add a white shackle above the heart, with a subtle inner cutout to read as a U-shape.
4) Place a dark teardrop-shaped keyhole centered on the heart.
5) Add small darker circular accents near the keyhole and subtle light highlights on the lock.
6) Draw a white key angled/positioned as if inserted into the keyhole.
- Key includes a heart-shaped bow (handle) and a simple bit.
-->
<defs>
<!-- Subtle highlight gradient for the lock -->
<linearGradient id="lockHighlight" x1="140" y1="130" x2="290" y2="360" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff6b6b" stop-opacity="0.55"/>
<stop offset="1" stop-color="#ff6b6b" stop-opacity="0"/>
</linearGradient>
<!-- Slight shadow gradient near bottom -->
<linearGradient id="lockShade" x1="220" y1="250" x2="260" y2="420" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b31217" stop-opacity="0"/>
<stop offset="1" stop-color="#8f0f13" stop-opacity="0.35"/>
</linearGradient>
<!-- Soft highlight on key -->
<linearGradient id="keyHighlight" x1="260" y1="350" x2="360" y2="290" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0.85"/>
</linearGradient>
</defs>
<!-- Shackle (white U shape) -->
<g>
<!-- Outer shackle -->
<path d="M196 160
C196 112 228 80 270 80
C312 80 344 112 344 160
L344 220
C344 232 336 240 324 240
C312 240 304 232 304 220
L304 162
C304 136 289 120 270 120
C251 120 236 136 236 162
L236 220
C236 232 228 240 216 240
C204 240 196 232 196 220
Z"
fill="#ffffff"/>
<!-- Inner cutout to emphasize U-shape (transparent by matching background via opacity) -->
<path d="M224 160
C224 127 245 104 270 104
C295 104 316 127 316 160
L316 220
C316 224 313 228 308 228
C303 228 300 224 300 220
L300 162
C300 144 287 132 270 132
C253 132 240 144 240 162
L240 220
C240 224 237 228 232 228
C227 228 224 224 224 220
Z"
fill="#ffffff" opacity="0.35"/>
</g>
<!-- Heart-shaped lock body -->
<g>
<!-- Heart silhouette -->
<path d="M256 418
C210 382 154 338 154 276
C154 232 188 204 226 204
C246 204 262 214 272 228
C282 214 298 204 318 204
C356 204 390 232 390 276
C390 338 334 382 288 418
C277 427 266 434 256 442
C246 434 235 427 256 418 Z"
fill="#e31b23"/>
<!-- Fix the small self-intersection from the last segment by overlaying a clean center cap -->
<path d="M256 438
C246 431 234 423 222 414
C178 380 166 346 166 276
C166 240 194 216 226 216
C246 216 261 227 270 244
C279 227 294 216 318 216
C350 216 378 240 378 276
C378 346 366 380 322 414
C310 423 298 431 288 438
C277 445 266 452 256 458
C246 452 235 445 256 438 Z"
fill="#e31b23" opacity="0.98"/>
<!-- Subtle highlight -->
<path d="M190 255
C200 230 222 218 242 224
C225 238 214 260 214 285
C214 324 246 356 270 380
C230 360 186 320 186 280
C186 271 187 263 190 255 Z"
fill="url(#lockHighlight)"/>
<!-- Subtle bottom shade -->
<path d="M206 345
C226 392 270 418 256 458
C240 450 224 440 210 428
C196 416 186 402 180 388
C184 370 194 356 206 345 Z"
fill="url(#lockShade)"/>
</g>
<!-- Keyhole (dark teardrop) + accents -->
<g>
<!-- Keyhole -->
<path d="M256 282
C236 282 222 298 222 318
C222 334 232 348 246 354
L246 382
C246 392 253 400 263 400
C273 400 280 392 280 382
L280 354
C294 348 304 334 304 318
C304 298 290 282 270 282
Z"
fill="#2b2b2b"/>
<!-- Small darker circular accents -->
<circle cx="214" cy="318" r="6" fill="#1f1f1f" opacity="0.55"/>
<circle cx="298" cy="320" r="5" fill="#1f1f1f" opacity="0.5"/>
<circle cx="240" cy="354" r="4.5" fill="#1f1f1f" opacity="0.45"/>
<!-- Subtle highlight on keyhole -->
<path d="M244 296
C236 302 232 312 234 322
C236 312 242 304 252 300
C258 298 262 298 268 300
C260 292 252 292 244 296 Z"
fill="#ffffff" opacity="0.18"/>
</g>
<!-- Key (white) positioned as if inserted -->
<g transform="translate(0,0) rotate(-18 318 340)">
<!-- Shaft -->
<rect x="286" y="330" width="132" height="22" rx="11" fill="url(#keyHighlight)"/>
<!-- Bit -->
<path d="M396 330
L430 330
L430 372
L412 372
L412 356
L396 356
Z"
fill="#ffffff" opacity="0.98"/>
<!-- Small notch -->
<rect x="408" y="352" width="14" height="12" rx="2" fill="#e9e9e9"/>
<!-- Collar near insertion -->
<circle cx="292" cy="341" r="14" fill="#ffffff"/>
<circle cx="292" cy="341" r="7" fill="#d9d9d9" opacity="0.9"/>
<!-- Heart-shaped bow (handle) -->
<path d="M248 342
C232 328 208 332 204 352
C200 372 222 386 248 404
C274 386 296 372 292 352
C288 332 264 328 248 342
Z"
fill="#ffffff"/>
<!-- Inner heart cut (subtle) -->
<path d="M248 354
C238 346 224 348 222 360
C220 372 234 380 248 390
C262 380 276 372 274 360
C272 348 258 346 248 354
Z"
fill="#f2f2f2"/>
</g>
</svg>