icon

svg chat GPT

horie.yuuto
loading
horie.yuuto
更新日:
# html,_chatGPT

svg chat GPT

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <title>${title}</title>
    <meta name="description" content="${description}" />
    
    <style>${style}</style>
  </head>
  <body>
    <svg width="400" height="400">
      <!-- 顔の描画 -->
      <circle cx="200" cy="200" r="180" fill="#f1c27d" stroke="#000" stroke-width="5" />
    
      <!-- 目の描画 -->
      <g>
        <circle cx="150" cy="180" r="30" fill="#fff" stroke="#000" stroke-width="5" />
        <circle cx="150" cy="180" r="10" fill="#000" />
      </g>
      <g>
        <circle cx="250" cy="180" r="30" fill="#fff" stroke="#000" stroke-width="5" />
        <circle cx="250" cy="180" r="10" fill="#000" />
      </g>
    
      <!-- 口の描画 -->
      <g>
        <path d="M 120,280 C 200,320 200,320 280,280" fill="none" stroke="#000" stroke-width="5" />
        <path d="M 120,280 C 200,270 200,270 280,280" fill="none" stroke="#f5deb3" stroke-width="20" />
      </g>
    
      <!-- 髪の描画 -->
      <g>
        <path d="M 80,100 C 100,60 300,60 320,100" fill="none" stroke="#000" stroke-width="20" />
        <path d="M 80,100 C 60,120 340,120 320,100" fill="none" stroke="#000" stroke-width="20" />
        <path d="M 80,100 C 90,130 310,130 320,100" fill="none" stroke="#000" stroke-width="20" />
      </g>
    
      <!-- イラストのタイトルの描画 -->
      <text x="50%" y="380" font-size="30" font-weight="bold" text-anchor="middle" fill="#f1c27d">Realistic Face Illustration</text>
    </svg>


    
    <script>${script}</script>
  </body>
</html>


body {
  margin: 0px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-image: url('https://picsum.photos/1200/630?blur=4&random=2023-04-03 00:23:01');
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  
  color: white;
  text-shadow: 1px 1px 2px #000;
}

window.addEventListener('load', () => {
  let message = 'Hello, Runstant!';
  console.log(message);
});