← Back to dashboard

Islamic geometric pattern, octagons and stars

Model: claude | Tier: complex | ID: 1bdb51ba-93d6-4172-80c0-73a13c8f766b_ba5680b0df955db1 | 14 elements

0.604
Editability
1.000
Coverage
0.604
Purity
0.338
Crosstalk
0.692
Compact
0.957
Locality
1.000
Contiguity
full
Showing: full SVG

Concept Groups

islamic geometric pattern:
octagons: 1 2 3 4 5 6 7 8 9 10 11 12 13
stars: 0

Elements — click to highlight

#TagConceptPurityContributions
0 rect stars
0.379
islamic geom
0.898
octagons
0.735
stars
0.998
1 path octagons
0.695
islamic geom
0.053
octagons
0.123
stars
0.001
2 path octagons
0.738
islamic geom
0.045
octagons
0.131
stars
0.002
3 path octagons
0.774
islamic geom
0.001
octagons
0.005
stars
0.000
4 ellipse octagons
0.664
islamic geom
0.000
octagons
0.001
stars
0.000
5 ellipse octagons
0.706
islamic geom
0.000
octagons
0.001
stars
0.000
6 ellipse octagons
0.730
islamic geom
0.000
octagons
0.000
stars
0.000
7 ellipse octagons
0.732
islamic geom
0.000
octagons
0.001
stars
0.000
8 ellipse octagons
0.740
islamic geom
0.000
octagons
0.000
stars
0.000
9 ellipse octagons
0.773
islamic geom
0.000
octagons
0.000
stars
0.000
10 ellipse octagons
0.754
islamic geom
0.001
octagons
0.002
stars
0.000
11 ellipse octagons
0.798
islamic geom
0.000
octagons
0.001
stars
0.000
12 ellipse octagons
0.770
islamic geom
0.000
octagons
0.001
stars
0.000
13 ellipse octagons
0.792
islamic geom
0.000
octagons
0.000
stars
0.000

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"> <defs> <!-- Islamic geometric pattern tile --> <pattern id="islamicPattern" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse"> <!-- Background --> <rect width="80" height="80" fill="#8fa387"/> <!-- Eight-pointed star center --> <polygon points="40,10 45,25 60,25 48,35 52,50 40,42 28,50 32,35 20,25 35,25" fill="#f5f5f0" stroke="#c5d4b8" stroke-width="1"/> <!-- Octagon shapes at corners --> <polygon points="0,0 15,0 20,5 20,15 15,20 5,20 0,15 0,5" fill="#c5d4b8" stroke="#f5f5f0" stroke-width="0.5"/> <polygon points="80,0 80,5 75,20 65,20 60,15 60,5 65,0" fill="#c5d4b8" stroke="#f5f5f0" stroke-width="0.5"/> <polygon points="0,80 5,80 20,75 20,65 15,60 5,60 0,65" fill="#c5d4b8" stroke="#f5f5f0" stroke-width="0.5"/> <polygon points="80,80 65,80 60,75 60,65 65,60 75,60 80,65 80,75" fill="#c5d4b8" stroke="#f5f5f0" stroke-width="0.5"/> <!-- Connecting geometric lines --> <line x1="20" y1="10" x2="35" y2="25" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="60" y1="10" x2="45" y2="25" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="20" y1="70" x2="35" y2="55" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="60" y1="70" x2="45" y2="55" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="10" y1="20" x2="25" y2="35" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="70" y1="20" x2="55" y2="35" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="10" y1="60" x2="25" y2="45" stroke="#f5f5f0" stroke-width="1.5"/> <line x1="70" y1="60" x2="55" y2="45" stroke="#f5f5f0" stroke-width="1.5"/> <!-- Small decorative elements --> <circle cx="40" cy="40" r="3" fill="#8fa387" stroke="#f5f5f0" stroke-width="1"/> <circle cx="0" cy="40" r="4" fill="#f5f5f0"/> <circle cx="80" cy="40" r="4" fill="#f5f5f0"/> <circle cx="40" cy="0" r="4" fill="#f5f5f0"/> <circle cx="40" cy="80" r="4" fill="#f5f5f0"/> </pattern> <!-- Clip path for the main pattern area --> <clipPath id="patternClip"> <rect x="0" y="0" width="360" height="360"/> </clipPath> </defs> <!-- Main pattern area --> <rect x="20" y="20" width="340" height="340" fill="url(#islamicPattern)" clip-path="url(#patternClip)"/> <!-- Decorative brown border - bottom edge --> <path d="M20,360 L20,370 Q20,380 30,380 L50,380 L50,375 L70,375 L70,385 L90,385 Q95,385 95,390 L95,400 L115,400 L115,385 Q115,380 120,380 L140,380 L140,390 L160,390 L160,380 L180,380 Q185,380 185,385 L185,400 L205,400 L205,385 L225,385 L225,395 L245,395 L245,380 Q245,375 250,375 L270,375 L270,390 L290,390 L290,380 L310,380 L310,395 L330,395 L330,385 Q330,380 335,380 L360,380 L360,360 Z" fill="#6b4423" stroke="#4a2f17" stroke-width="2"/> <!-- Decorative brown border - right edge --> <path d="M360,360 L370,360 Q380,360 380,350 L380,330 L375,330 L375,310 L385,310 L385,290 Q385,285 390,285 L400,285 L400,265 L385,265 Q380,265 380,260 L380,240 L390,240 L390,220 L380,220 L380,200 Q380,195 385,195 L400,195 L400,175 L385,175 L385,155 L395,155 L395,135 L380,135 Q375,135 375,130 L375,110 L390,110 L390,90 L380,90 L380,70 L395,70 L395,50 L385,50 Q380,50 380,45 L380,20 L360,20 Z" fill="#6b4423" stroke="#4a2f17" stroke-width="2"/> <!-- Corner piece --> <path d="M360,360 Q370,360 380,370 Q385,380 380,390 L400,400 L400,385 Q395,375 385,370 Q375,365 370,360 Z" fill="#5a3a1d" stroke="#4a2f17" stroke-width="1"/> <!-- Additional decorative curves on border --> <ellipse cx="55" cy="377" rx="8" ry="4" fill="#8b5a2b"/> <ellipse cx="125" cy="382" rx="8" ry="4" fill="#8b5a2b"/> <ellipse cx="195" cy="385" rx="8" ry="4" fill="#8b5a2b"/> <ellipse cx="265" cy="382" rx="8" ry="4" fill="#8b5a2b"/> <ellipse cx="335" cy="377" rx="8" ry="4" fill="#8b5a2b"/> <ellipse cx="377" cy="55" rx="4" ry="8" fill="#8b5a2b"/> <ellipse cx="382" cy="125" rx="4" ry="8" fill="#8b5a2b"/> <ellipse cx="385" cy="195" rx="4" ry="8" fill="#8b5a2b"/> <ellipse cx="382" cy="265" rx="4" ry="8" fill="#8b5a2b"/> <ellipse cx="377" cy="335" rx="4" ry="8" fill="#8b5a2b"/> </svg>