File size: 2,968 Bytes
52ef263 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Parameter space background grid -->
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f0f0f0" stroke-width="0.5"/>
</pattern>
<!-- Gradient definitions -->
<radialGradient id="redGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#FF6B6B;stop-opacity:0.5"/>
</radialGradient>
<radialGradient id="blueGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#4ECDC4;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#4ECDC4;stop-opacity:0.5"/>
</radialGradient>
<radialGradient id="tealGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#45B7D1;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#45B7D1;stop-opacity:0.5"/>
</radialGradient>
</defs>
<!-- Background -->
<rect width="200" height="200" fill="url(#grid)"/>
<!-- Central composition circle with subtle shadow -->
<circle cx="100" cy="100" r="45" fill="#4A90E2" opacity="0.15"/>
<!-- Circles positioned at exact equilateral triangle vertices -->
<!-- Top vertex: (100, 70) -->
<!-- Bottom right vertex: (134.6, 115) = (100 + 40*cos(30°), 100 + 40*sin(30°)) -->
<!-- Bottom left vertex: (65.4, 115) = (100 - 40*cos(30°), 100 + 40*sin(30°)) -->
<circle cx="100" cy="70" r="35" fill="url(#redGradient)"/>
<circle cx="134.6" cy="115" r="35" fill="url(#blueGradient)"/>
<circle cx="65.4" cy="115" r="35" fill="url(#tealGradient)"/>
<!-- Connecting lines forming perfect equilateral triangle -->
<line x1="100" y1="70" x2="134.6" y2="115" stroke="#555" stroke-width="2.5" opacity="0.4"/>
<line x1="134.6" y1="115" x2="65.4" y2="115" stroke="#555" stroke-width="2.5" opacity="0.4"/>
<line x1="65.4" y1="115" x2="100" y2="70" stroke="#555" stroke-width="2.5" opacity="0.4"/>
<!-- Bolder expansion arrows -->
<!-- Right arrow -->
<path d="M 155 100 L 180 100 L 168 88 M 180 100 L 168 112"
fill="none"
stroke="#444"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"/>
<!-- Left arrow -->
<path d="M 45 100 L 20 100 L 32 88 M 20 100 L 32 112"
fill="none"
stroke="#444"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"/>
<!-- Bottom arrow -->
<path d="M 100 155 L 100 180 L 88 168 M 100 180 L 112 168"
fill="none"
stroke="#444"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"/>
<!-- Top arrow -->
<path d="M 100 45 L 100 20 L 88 32 M 100 20 L 112 32"
fill="none"
stroke="#444"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
|