draw the flag in svg mode
Prompt
Draw the flag of Turkey in SVG.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flag of Turkey (SVG)</title>
<style>
html,body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="450" height="300" viewBox="0 0 450 300">
<!-- Background -->
<rect width="450" height="300" fill="#E30A17"/>
<!-- Crescent -->
<!-- Outer circle -->
<circle cx="180" cy="150" r="90" fill="#FFFFFF"/>
<!-- Inner circle (creates the crescent cut-out) -->
<circle cx="210" cy="150" r="70" fill="#E30A17"/>
<!-- Star -->
<polygon fill="#FFFFFF"
points="
240,110
249.405,137.056
278.044,137.640
255.218,154.944
263.512,182.360
240,166
216.488,182.360
224.782,154.944
201.956,137.640
230.595,137.056
"/>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Flag of Turkey</title>
</head>
<body style="margin:0; display:flex; justify-content:center; align-items:center; height:100vh; background:#fff;">
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800">
<rect width="1200" height="800" fill="#E30A17" />
<circle cx="400" cy="400" r="200" fill="#fff" />
<circle cx="450" cy="400" r="160" fill="#E30A17" />
<polygon fill="#fff" points="
538.2,400
580.9,341.2
511.8,363.7
469.1,304.9
469.1,377.5
400,400
469.1,422.5
469.1,495.1
511.8,436.3
580.9,458.8
" />
</svg>
</body>
</html>
```Drag to resize
# Turkish Flag
Here's the Turkish flag drawn using SVG:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flag of Turkey</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.flag-container {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="flag-container">
<svg width="600" height="400" viewBox="0 0 30 20" xmlns="http://www.w3.org/2000/svg">
<!-- Red background -->
<rect width="30" height="20" fill="#E30A17"/>
<!-- White circle -->
<circle cx="10" cy="10" r="5" fill="white"/>
<!-- Red crescent -->
<circle cx="11.2" cy="10" r="4" fill="#E30A17"/>
<!-- White star -->
<path d="M 16 10
L 16.59 11.76
L 18.5 11.76
L 16.96 12.88
L 17.54 14.64
L 16 13.52
L 14.46 14.64
L 15.04 12.88
L 13.5 11.76
L 15.41 11.76 Z"
fill="white"/>
</svg>
</div>
</body>
</html>
```
This SVG rendering follows the official specifications of the Turkish flag with its distinctive red background, white crescent, and five-pointed star. The flag has proper proportions according to official standards.Drag to resize
```html <svg width="200" height="281" viewBox="0 0 200 281" xmlns="http://www.w3.org/2000/svg"> <path d="M 100 10 L 10 190 L 190 190 L 100 10 Z" fill="#282828" stroke="#000000" stroke-width="2"/> <path d="M 20 190 L 180 190 L 100 110 L 20 190 Z" fill="#fff" stroke="#000000" stroke-width="2"/> <path d="M 180 190 L 10 190 L 50 110 L 180 190 Z" fill="#fff" stroke="#000000" stroke-width="2"/> </svg> ```
Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Turkey Flag</title>
</head>
<body>
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
<!-- Background - Red -->
<rect width="600" height="400" fill="#dc143c" />
<!-- Crescent - White -->
<path d="M 150 50 C 150 50, 100 20, 150 0 C 200 -20, 250 20, 250 50 C 250 50, 200 80, 150 50 Z"
fill="white" transform="translate(150,150) rotate(45)"/>
<!-- Star - White -->
<polygon points="200,70 215,85 230,70 245,85 260,70 245,55 230,60 215,55 200,70"
fill="white" transform="translate(150,150) rotate(45)"/>
</svg>
</body>
</html>
```Drag to resize
Below is the SVG code for the flag of Turkey. You can include this code in an HTML file to render the flag in a web browser.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flag of Turkey</title>
</head>
<body>
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<!-- Red background -->
<rect width="300" height="200" fill="#E30A17" />
<!-- White crescent and star -->
<path d="M150 100 C 150 120, 120 135, 90 135 C 60 135, 30 120, 30 100 C 30 80, 60 65, 90 65 C 120 65, 150 80, 150 100 Z" fill="white" />
<polygon points="150,65 180,90 150,115 135,90" fill="white" />
</svg>
</body>
</html>
```
### Explanation:
1. **Red Background**: The flag of Turkey has a red background, represented by the `<rect>` element with the color `#E30A17`.
2. **White Crescent and Star**: The crescent and star are drawn using a combination of `<path>` and `<polygon>` elements. The crescent is a half-ellipse shape, and the star is a simple polygon.
This SVG code will render the flag of Turkey in a web browser.Drag to resize
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" width="540" height="360">
<rect width="100%" height="100%" fill="#E30A17"/>
<g fill="white">
<circle cx="10" cy="10" r="5"/>
<circle cx="12" cy="10" r="3"/>
<path d="M15,4.9276 16.8062,10.75 23.1938,10.75 17.8094,14.618 20,20.0724 15,16.394 10,20.0724 12.1906,14.618 6.8062,10.75 13.1938,10.75Z"/>
</g>
</svg>Drag to resize
Here's the SVG code to draw the flag of Turkey:
```html
<!DOCTYPE html>
<html>
<head>
<title>Turkish Flag</title>
</head>
<body>
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<!-- Background: Red -->
<rect width="300" height="200" fill="#e30012"/>
<!-- White star -->
<circle cx="150" cy="100" r="30" fill="white"/>
<!-- Star points -->
<line x1="150" y1="70" x2="150" y2="90" stroke="white" stroke-width="10"/>
<line x1="170" y1="90" x2="150" y2="110" stroke="white" stroke-width="10"/>
<line x1="130" y1="90" x2="150" y2="110" stroke="white" stroke-width="10"/>
<line x1="150" y1="110" x2="150" y2="130" stroke="white" stroke-width="10"/>
<!-- Crescent moon -->
<path d="M150,100 Q170,70 150,40 Q130,70 150,100 Q170,130 150,160 Q130,130 150,100" fill="none" stroke="white" stroke-width="10"/>
</svg>
</body>
</html>
```
This SVG code creates a red rectangle as the background, adds a white star in the center, and draws a white crescent moon to the left of the star, all in the correct proportions for the Turkish flag.Drag to resize
```html
<svg width="900" height="600" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
<!-- Background rectangle for the flag -->
<rect width="900" height="600" fill="#E30A17"/>
<!-- White crescent -->
<circle cx="350" cy="300" r="150" fill="#FFFFFF"/>
<!-- Inner circle to create the crescent shape -->
<circle cx="410" cy="300" r="150" fill="#E30A17"/>
<!-- Star -->
<polygon
fill="#FFFFFF"
points="600,180 632,232 689,240 648,283 658,341 600,300 542,341 552,283 511,240 568,232"
transform="translate(0,0)"/>
<!-- Alternatively, to accurately position the star -->
<!--
<polygon fill="#FFFFFF" points="
540,150
577,184
629,189
592,225
605,275
540,250
475,275
488,225
451,189
503,184
"/>
-->
<!-- For precise positioning and correct shape of a 5-point star, a more detailed path is recommended -->
<!-- Here's an example using a precise 5-point star in a group -->
<g fill="#FFFFFF" transform="translate(600, 220) scale(1.2)">
<polygon points="
0,-50
14.43,-15.45
47.55,-15.45
23.18,5.91
29.39,39.55
0,20
-29.39,39.55
-23.18,5.91
-47.55,-15.45
-14.43,-15.45
"/>
</g>
</svg>
```Drag to resize
Here's the complete SVG code for drawing the flag of Turkey: ```html <!DOCTYPE html> <html> <head> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"> <!-- Background (red) --> <rect width="600" height="400" fill="#E30A17"/> <!-- White circle --> <circle cx="300" cy="200" r="120" fill="white"/> <!-- Red crescent --> <path d="M300 80A120 120 0 0 0 300 320A80 80 0 0 1 300 160A80 80 0 0 1 300 80Z" fill="#E30A17"/> <!-- White star --> <path d="M300 80L320 140H380L330 180L350 240L300 200L250 240L270 180L220 140H280L300 80Z" fill="white"/> </svg> </body> </html> ``` This SVG code creates: 1. A red rectangular background (#E30A17 is the official red color of the Turkish flag) 2. A white circle offset slightly to the left 3. A red crescent shape inside the white circle 4. A five-pointed white star placed at the right side of the crescent The proportions follow the official specifications of the Turkish flag (2:3 ratio). The flag will render at 600x400 pixels but can be scaled as needed.
Drag to resize
```html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"> <rect fill="#E30A17" x="0" y="0" width="3" height="2"/> <circle cx="1" cy="1" r="0.75" fill="white"/> <circle cx="0.9" cy="1" r="0.375" fill="white"/> </svg> ```
Drag to resize
```html <svg width="300" height="200" viewBox="0 0 3 2"> <rect x="0" y="0" width="3" height="2" fill="#FFFFFF" /> <rect x="0" y="0" width="1" height="2" fill="#FF0000" /> <rect x="2" y="0" width="1" height="2" fill="#FF0000" /> </svg> ```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flag of Turkey</title>
</head>
<body style="margin: 0; padding: 20px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh;">
<svg width="400" height="267" viewBox="0 0 400 267" xmlns="http://www.w3.org/2000/svg">
<!-- Red background -->
<rect width="400" height="267" fill="#E30A17"/>
<!-- White crescent -->
<g>
<!-- Outer circle -->
<circle cx="160" cy="133.5" r="53" fill="white"/>
<!-- Inner circle to create crescent -->
<circle cx="170" cy="133.5" r="42" fill="#E30A17"/>
</g>
<!-- White star -->
<g transform="translate(220, 133.5)">
<polygon points="0,-25 7.5,-7.5 25,0 7.5,7.5 0,25 -7.5,7.5 -25,0 -7.5,-7.5" fill="white"/>
</g>
</svg>
</body>
</html>
```Drag to resize
```html
<html>
<head>
<title>Turkish Flag</title>
</head>
<body>
<svg width="600" height="300" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
<!-- Red background -->
<rect width="600" height="300" fill="red" />
<!-- White crescent -->
<path d="M170 150 a75 75 0 1 1 0.01 0.01" fill="white" stroke="white" stroke-width="1" />
<path d="M190 150 a65 65 0 1 0 -0.01 -0.01" fill="red" /> <!-- Subtract to form crescent -->
<!-- White five-pointed star -->
<polygon points="220,130 240,180 190,150 290,150 240,120" fill="white" />
</svg>
</body>
</html>
```Drag to resize