gnmHeadComponent.svg 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title desc">
  2. <title id="title">GNM 参数化人头组件</title>
  3. <desc id="desc">深色网格背景中的参数化三维人头线框预览</desc>
  4. <defs>
  5. <radialGradient id="bg" cx="50%" cy="44%" r="72%">
  6. <stop offset="0" stop-color="#26334b"/>
  7. <stop offset="0.55" stop-color="#111827"/>
  8. <stop offset="1" stop-color="#070b13"/>
  9. </radialGradient>
  10. <linearGradient id="skin" x1="0" y1="0" x2="1" y2="1">
  11. <stop offset="0" stop-color="#ffd4bd"/>
  12. <stop offset="0.52" stop-color="#d9a183"/>
  13. <stop offset="1" stop-color="#8e5948"/>
  14. </linearGradient>
  15. <linearGradient id="rim" x1="0" y1="0" x2="1" y2="0">
  16. <stop offset="0" stop-color="#5be7ff" stop-opacity="0"/>
  17. <stop offset="0.5" stop-color="#5be7ff"/>
  18. <stop offset="1" stop-color="#ae7bff" stop-opacity="0"/>
  19. </linearGradient>
  20. <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
  21. <feGaussianBlur stdDeviation="6" result="blur"/>
  22. <feMerge>
  23. <feMergeNode in="blur"/>
  24. <feMergeNode in="SourceGraphic"/>
  25. </feMerge>
  26. </filter>
  27. <pattern id="grid" width="28" height="28" patternUnits="userSpaceOnUse">
  28. <path d="M28 0H0V28" fill="none" stroke="#8bb7d8" stroke-opacity="0.08"/>
  29. </pattern>
  30. <clipPath id="headClip">
  31. <path d="M330 62c-68 0-111 45-112 116-1 43 14 88 42 116 13 13 26 21 43 27 8 3 14 13 16 26h61c2-13 8-23 16-26 17-6 30-14 43-27 28-28 43-73 42-116-1-71-44-116-111-116z"/>
  32. </clipPath>
  33. </defs>
  34. <rect width="640" height="360" rx="20" fill="url(#bg)"/>
  35. <rect width="640" height="360" rx="20" fill="url(#grid)"/>
  36. <circle cx="350" cy="186" r="137" fill="none" stroke="#5be7ff" stroke-opacity="0.16"/>
  37. <circle cx="350" cy="186" r="111" fill="none" stroke="#ae7bff" stroke-opacity="0.13" stroke-dasharray="5 9"/>
  38. <path d="M330 62c-68 0-111 45-112 116-1 43 14 88 42 116 13 13 26 21 43 27 8 3 14 13 16 26h61c2-13 8-23 16-26 17-6 30-14 43-27 28-28 43-73 42-116-1-71-44-116-111-116z" fill="url(#skin)" stroke="#ffdfcd" stroke-width="2.5"/>
  39. <g clip-path="url(#headClip)" fill="none" stroke="#6a3e36" stroke-opacity="0.34" stroke-width="1">
  40. <path d="M214 121c78 29 177 30 273 1M207 156c86 25 187 25 282 0M205 192c91 20 194 20 290-1M211 228c88 16 185 16 277-2M225 265c80 13 163 11 245-3M252 301c61 7 123 4 183-5"/>
  41. <path d="M265 49c-12 97-10 199 11 283M308 48c-5 98-2 204 9 299M350 45v305M392 48c5 98 2 204-9 299M435 52c12 96 10 196-11 280"/>
  42. <path d="M218 177l48-21 43 19 41-20 44 20 45-19 42 22M232 222l54-21 64 20 64-21 54 22M259 274l46-20 45 16 45-16 46 20"/>
  43. </g>
  44. <path d="M272 176c16-13 39-13 55 0-17 15-39 15-55 0zm101 0c16-13 39-13 55 0-17 15-39 15-55 0z" fill="#f5f3eb" stroke="#5f3d35" stroke-width="2"/>
  45. <ellipse cx="302" cy="176" rx="10" ry="12" fill="#5d4630"/>
  46. <ellipse cx="398" cy="176" rx="10" ry="12" fill="#5d4630"/>
  47. <circle cx="302" cy="176" r="4.5" fill="#0e0e11"/>
  48. <circle cx="398" cy="176" r="4.5" fill="#0e0e11"/>
  49. <path d="M350 178c-8 25-10 44-2 50 8 6 18 3 24-2" fill="none" stroke="#70483d" stroke-width="3" stroke-linecap="round"/>
  50. <path d="M310 257c24 14 56 14 80 0-20 29-60 29-80 0z" fill="#9d554f" stroke="#653b37" stroke-width="2"/>
  51. <path d="M242 313h216" stroke="url(#rim)" stroke-width="3" filter="url(#glow)"/>
  52. <g font-family="Inter,Arial,sans-serif" fill="#eef7ff">
  53. <text x="34" y="54" font-size="25" font-weight="700" letter-spacing="1">GNM HEAD</text>
  54. <text x="35" y="78" font-size="12" fill="#96b2ca" letter-spacing="2">PARAMETRIC COMPONENT</text>
  55. </g>
  56. <g font-family="Inter,Arial,sans-serif" font-size="11" fill="#91a9c0">
  57. <text x="35" y="300">253 IDENTITY</text>
  58. <text x="35" y="320">383 EXPRESSION</text>
  59. <text x="35" y="340">17,821 VERTICES</text>
  60. </g>
  61. <g transform="translate(532 36)" fill="none" stroke="#5be7ff" stroke-width="2" filter="url(#glow)">
  62. <path d="M0 10h54M44 0l10 10-10 10"/>
  63. </g>
  64. </svg>