中秋の名月でAIと時計をデザインするーGoogleサイトで作るグループウェア(182)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
企業DXや学校DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
AIの利用に悩んでいる方
①AIとつくる中秋の名月アナログ時計
みなさんこんにちは。Claude使ってますか？
ところで、もうすぐ中秋の名月ということで、月見〇〇のCMも増えてまいりました。
今回は、アナログ時計ジェネレータプロ（9月中に有料公開します）を使って、中秋の名月風の高級時計を制作してみました。
これは、noteの見出しの月の画像を参考画像にして、AIと協働で作ったものです。
今回は、埋め込みHTMLコードも公開いたします。
<!doctype html><html lang=ja>
<head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cinzel&family=Poppins&family=Cormorant+Garamond&family=Quicksand&family=Comfortaa&family=Josefin+Sans&family=Playfair+Display&family=Oswald&family=Fjalla+One&family=BIZ+UDGothic&family=BIZ+UDPGothic&family=Old+Standard+TT&family=Noto+Serif&family=Crimson+Text&family=Kameron&family=Copse&family=Titillium+Web&family=Graduate&family=Changa+One&family=Special+Elite&family=Stardos+Stencil&family=Iceland&family=Ultra&family=Sankofa+Display&family=Edu+VIC+WA+NT+Beginner:wght@400;500;600;700&family=Kalnia+Glaze:wght@300;400;500;600;700&family=Shadows+Into+Light&family=Fredericka+the+Great&family=Orbitron:wght@400;500;600;700;800;900&family=Parisienne&family=Antic+Didone&family=EB+Garamond&family=Cormorant&family=Montserrat&family=Lato&family=Hind&family=Questrial&family=Anton&family=Libre+Baskerville&family=Roboto&family=Open+Sans&family=Jost&display=swap" rel=stylesheet>
<title>アナログ時計 Ver2.6.7</title></head><body><center>
<svg id=clock width=400 height=400 viewBox="0 0 100 100"><defs>
<radialGradient id=faceGradient cx=50% cy=50% r=50% fx=50% fy=50%>
<stop offset=0% stop-color=#f9f1de />
<stop offset=70% stop-color=#f2d17f />
<stop offset=100% stop-color=#f5b516 />
</radialGradient>
<radialGradient id=borderGradient cx=30% cy=30% r=70% fx=15% fy=15%>
<stop offset=0% stop-color=#a1a1a1 />
<stop offset=50% stop-color=#545454 />
<stop offset=100% stop-color=#241e1e />
</radialGradient>
<linearGradient id=innerBorderGradient x1=90% y1=0% x2=0% y2=100%>
<stop offset=0% stop-color=#899e9e />
<stop offset=20% stop-color=#474747 />
<stop offset=50% stop-color=#000000 />
<stop offset=80% stop-color=#474747 />
<stop offset=100% stop-color=#899e9e />
</linearGradient>
<style>body::-webkit-scrollbar{display:none}.clock-face{fill:url(#faceGradient);stroke:url(#borderGradient);stroke-width:5}.inner-border{fill:none;stroke:url(#innerBorderGradient);stroke-width:8.5}.tick{stroke:#000000}.number{fill:#f2d17f;font-size:6.5px;font-family:Playfair Display;text-anchor:middle;dominant-baseline:central}.date-bg{fill:#f2d17f}.date{fill:#000000;font-size:5px;font-family:Playfair Display;text-anchor:middle;dominant-baseline:central}.day-bg{fill:#f2d17f}.day{fill:#000000;font-size:5px;font-family:Playfair Display;text-anchor:middle;dominant-baseline:central}.logo{fill:#000000;font-size:4.3px;font-family:Playfair Display;text-anchor:middle;dominant-baseline:central}.center-dot{fill:#000000}</style></defs><circle class=clock-face cx=50 cy=50 r=45 />
<circle class=inner-border cx=50 cy=50 r=30.9 />
<g id=ticks>
<line class=tick x1=89 y1=50 x2=87.9 y2=50 stroke-width=1 /><line class=tick x1=88.79 y1=54.08 x2=88.19 y2=54.01 stroke-width=0.5 /><line class=tick x1=88.15 y1=58.11 x2=87.56 y2=57.98 stroke-width=0.5 /><line class=tick x1=87.09 y1=62.05 x2=86.52 y2=61.87 stroke-width=0.5 /><line class=tick x1=85.63 y1=65.86 x2=85.08 y2=65.62 stroke-width=0.5 /><line class=tick x1=83.77 y1=69.5 x2=82.82 y2=68.95 stroke-width=1 /><line class=tick x1=81.55 y1=72.92 x2=81.07 y2=72.57 stroke-width=0.5 /><line class=tick x1=78.98 y1=76.1 x2=78.54 y2=75.69 stroke-width=0.5 /><line class=tick x1=76.1 y1=78.98 x2=75.69 y2=78.54 stroke-width=0.5 /><line class=tick x1=72.92 y1=81.55 x2=72.57 y2=81.07 stroke-width=0.5 /><line class=tick x1=69.5 y1=83.77 x2=68.95 y2=82.82 stroke-width=1 /><line class=tick x1=65.86 y1=85.63 x2=65.62 y2=85.08 stroke-width=0.5 /><line class=tick x1=62.05 y1=87.09 x2=61.87 y2=86.52 stroke-width=0.5 /><line class=tick x1=58.11 y1=88.15 x2=57.98 y2=87.56 stroke-width=0.5 /><line class=tick x1=54.08 y1=88.79 x2=54.01 y2=88.19 stroke-width=0.5 /><line class=tick x1=50 y1=89 x2=50 y2=87.9 stroke-width=1 /><line class=tick x1=45.92 y1=88.79 x2=45.99 y2=88.19 stroke-width=0.5 /><line class=tick x1=41.89 y1=88.15 x2=42.02 y2=87.56 stroke-width=0.5 /><line class=tick x1=37.95 y1=87.09 x2=38.13 y2=86.52 stroke-width=0.5 /><line class=tick x1=34.14 y1=85.63 x2=34.38 y2=85.08 stroke-width=0.5 /><line class=tick x1=30.5 y1=83.77 x2=31.05 y2=82.82 stroke-width=1 /><line class=tick x1=27.08 y1=81.55 x2=27.43 y2=81.07 stroke-width=0.5 /><line class=tick x1=23.9 y1=78.98 x2=24.31 y2=78.54 stroke-width=0.5 /><line class=tick x1=21.02 y1=76.1 x2=21.46 y2=75.69 stroke-width=0.5 /><line class=tick x1=18.45 y1=72.92 x2=18.93 y2=72.57 stroke-width=0.5 /><line class=tick x1=16.23 y1=69.5 x2=17.18 y2=68.95 stroke-width=1 /><line class=tick x1=14.37 y1=65.86 x2=14.92 y2=65.62 stroke-width=0.5 /><line class=tick x1=12.91 y1=62.05 x2=13.48 y2=61.87 stroke-width=0.5 /><line class=tick x1=11.85 y1=58.11 x2=12.44 y2=57.98 stroke-width=0.5 /><line class=tick x1=11.21 y1=54.08 x2=11.81 y2=54.01 stroke-width=0.5 /><line class=tick x1=11 y1=50 x2=12.1 y2=50 stroke-width=1 /><line class=tick x1=11.21 y1=45.92 x2=11.81 y2=45.99 stroke-width=0.5 /><line class=tick x1=11.85 y1=41.89 x2=12.44 y2=42.02 stroke-width=0.5 /><line class=tick x1=12.91 y1=37.95 x2=13.48 y2=38.13 stroke-width=0.5 /><line class=tick x1=14.37 y1=34.14 x2=14.92 y2=34.38 stroke-width=0.5 /><line class=tick x1=16.23 y1=30.5 x2=17.18 y2=31.05 stroke-width=1 /><line class=tick x1=18.45 y1=27.08 x2=18.93 y2=27.43 stroke-width=0.5 /><line class=tick x1=21.02 y1=23.9 x2=21.46 y2=24.31 stroke-width=0.5 /><line class=tick x1=23.9 y1=21.02 x2=24.31 y2=21.46 stroke-width=0.5 /><line class=tick x1=27.08 y1=18.45 x2=27.43 y2=18.93 stroke-width=0.5 /><line class=tick x1=30.5 y1=16.23 x2=31.05 y2=17.18 stroke-width=1 /><line class=tick x1=34.14 y1=14.37 x2=34.38 y2=14.92 stroke-width=0.5 /><line class=tick x1=37.95 y1=12.91 x2=38.13 y2=13.48 stroke-width=0.5 /><line class=tick x1=41.89 y1=11.85 x2=42.02 y2=12.44 stroke-width=0.5 /><line class=tick x1=45.92 y1=11.21 x2=45.99 y2=11.81 stroke-width=0.5 /><line class=tick x1=50 y1=11 x2=50 y2=12.1 stroke-width=1 /><line class=tick x1=54.08 y1=11.21 x2=54.01 y2=11.81 stroke-width=0.5 /><line class=tick x1=58.11 y1=11.85 x2=57.98 y2=12.44 stroke-width=0.5 /><line class=tick x1=62.05 y1=12.91 x2=61.87 y2=13.48 stroke-width=0.5 /><line class=tick x1=65.86 y1=14.37 x2=65.62 y2=14.92 stroke-width=0.5 /><line class=tick x1=69.5 y1=16.23 x2=68.95 y2=17.18 stroke-width=1 /><line class=tick x1=72.92 y1=18.45 x2=72.57 y2=18.93 stroke-width=0.5 /><line class=tick x1=76.1 y1=21.02 x2=75.69 y2=21.46 stroke-width=0.5 /><line class=tick x1=78.98 y1=23.9 x2=78.54 y2=24.31 stroke-width=0.5 /><line class=tick x1=81.55 y1=27.08 x2=81.07 y2=27.43 stroke-width=0.5 /><line class=tick x1=83.77 y1=30.5 x2=82.82 y2=31.05 stroke-width=1 /><line class=tick x1=85.63 y1=34.14 x2=85.08 y2=34.38 stroke-width=0.5 /><line class=tick x1=87.09 y1=37.95 x2=86.52 y2=38.13 stroke-width=0.5 /><line class=tick x1=88.15 y1=41.89 x2=87.56 y2=42.02 stroke-width=0.5 /><line class=tick x1=88.79 y1=45.92 x2=88.19 y2=45.99 stroke-width=0.5 />
</g>
<g id=numbers>
<text class=number x=50 y=19 transform="rotate(0 50 19)">XII</text><text class=number x=65.5 y=23.15 transform="rotate(30 65.5 23.15)">I</text><text class=number x=76.85 y=34.5 transform="rotate(60 76.85 34.5)">II</text><text class=number x=81 y=50 transform="rotate(90 81 50)">III</text><text class=number x=76.85 y=65.5 transform="rotate(120 76.85 65.5)">IIII</text><text class=number x=65.5 y=76.85 transform="rotate(150 65.5 76.85)">V</text><text class=number x=50 y=81 transform="rotate(180 50 81)">VI</text><text class=number x=34.5 y=76.85 transform="rotate(210 34.5 76.85)">VII</text><text class=number x=23.15 y=65.5 transform="rotate(240 23.15 65.5)">VIII</text><text class=number x=19 y=50 transform="rotate(270 19 50)">IX</text><text class=number x=23.15 y=34.5 transform="rotate(300 23.15 34.5)">X</text><text class=number x=34.5 y=23.15 transform="rotate(330 34.5 23.15)">XI</text>
</g>
<g id=date>
<text id=date-text class=date x=50 y=62></text>
</g>
<g id=day>
<text id=day-text class=day x=50 y=68></text>
</g>
<text class=logo x=50 y=31>LUNAR</text>
<g id=hour></g><g id=minute></g><g id=second></g><circle class=center-dot cx=50 cy=50 r=2.9 />
</svg>
<script>const s={faceColor:"#f2d17f",borderColor:"#545454",borderWidth:5,numberColor:"#f2d17f",hourHandColor:"#000000",minuteHandColor:"#000000",secondHandColor:"#000000",dateColor:"#000000",dayColor:"#000000",dateFont:"Playfair Display",dateFontSize:"5",dayFont:"Playfair Display",dayFontSize:"5",dateBackgroundColor:"#f2d17f",dayBackgroundColor:"#f2d17f",size:"400",fontSize:"6.5",showDate:!0,showDay:!0,showTicks:!0,tickColor:"#000000",majorTickLength:"1.1",minorTickLength:"0.6",majorTickWidth:"1",smoothSecond:!0,logo:"LUNAR",logoSize:"4.3",logoPosition:"31",font:"Playfair Display",logoFont:"Playfair Display",logoColor:"#000000",centerDotColor:"#000000",centerDotSize:"2.9",hourHandShape:"lance",minuteHandShape:"lance",secondHandShape:"baton",hourHandLength:"25.6",hourHandWidth:"3.6",minuteHandLength:"39",minuteHandWidth:"3.5",secondHandLength:"42",secondHandWidth:"0.5",showNumbers:!0,showLogo:!0,numberPosition:"31",dateBackgroundWidth:17,dateBackgroundHeight:5,dayBackgroundWidth:"16",dayBackgroundHeight:5,datePositionX:"50",datePositionY:"62",dayPositionX:"50",dayPositionY:"68",tickPosition:"39",faceMaterial:"radial",borderMaterial:"radial-highlight",hourHandTailLength:"0",minuteHandTailLength:"0",secondHandTailLength:14,showDateBackground:!1,showDayBackground:!1,innerBorderColor:"#474747",innerBorderWidth:"8.5",innerBorderPosition:"30.9",innerBorderMaterial:"metallic",showInnerBorder:!0,timezone:"local",numberPattern:"roman",importFile:"C:\\fakepath\\golden-moon-pampas-clock-config.json"},romanNumerals=["XII","I","II","III","IIII","V","VI","VII","VIII","IX","X","XI"],days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function hexToHSL(n){let t,a,o=parseInt(n.slice(1,3),16)/255,e=parseInt(n.slice(3,5),16)/255,s=parseInt(n.slice(5,7),16)/255,$=Math.max(o,e,s),r=Math.min(o,e,s),i=($+r)/2;if($===r)t=a=0;else{let n=$-r;switch(a=i>.5?n/(2-$-r):n/($+r),$){case o:t=(e-s)/n+(e<s?6:0);break;case e:t=(s-o)/n+2;break;case s:t=(o-e)/n+4}t/=6}return[360*t,100*a,100*i]}function hslToHex(n,t,a){a/=100;const o=t*Math.min(a,1-a)/100,e=t=>{const e=(t+n/30)%12,s=a-o*Math.max(Math.min(e-3,9-e,1),-1);return Math.round(255*s).toString(16).padStart(2,"0")};return`#${e(0)}${e(8)}${e(4)}`}function getCustomGradient(n,t,a,o=!1){const[e,s,$]=hexToHSL(n);let r;switch(a){case"glossy":r=`<stop offset="0%" stop-color="${hslToHex(e,Math.min(100,s+10),Math.min(100,$+20))}"/>\n <stop offset="50%" stop-color="${n}"/>\n <stop offset="100%" stop-color="${hslToHex(e,Math.min(100,s+10),Math.max(0,$-20))}"/>\n `;break;case"metallic":const a=hslToHex(e,Math.min(100,s-10),Math.min(100,$+30));r=`\n <stop offset="0%" stop-color="${a}"/>\n <stop offset="20%" stop-color="${n}"/>\n <stop offset="50%" stop-color="${hslToHex(e,Math.min(100,s+20),Math.max(0,$-30))}"/>\n <stop offset="80%" stop-color="${n}"/>\n <stop offset="100%" stop-color="${a}"/>\n `;break;case"pearl":const o=hslToHex(e,Math.max(0,s-20),Math.min(100,$+15));r=`\n <stop offset="0%" stop-color="${o}"/>\n <stop offset="25%" stop-color="${n}"/>\n <stop offset="50%" stop-color="${o}"/>\n <stop offset="75%" stop-color="${n}"/>\n <stop offset="100%" stop-color="${o}"/>\n `;break;case"satin":r=`\n <stop offset="0%" stop-color="${hslToHex(e,Math.min(100,s+5),Math.min(100,$+10))}"/>\n <stop offset="40%" stop-color="${n}"/>\n <stop offset="60%" stop-color="${hslToHex(e,Math.min(100,s+10),Math.max(0,$-10))}"/>\n <stop offset="100%" stop-color="${n}"/>\n `;break;case"radial":return r=`\n <radialGradient id="${t}" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">\n <stop offset="0%" stop-color="${hslToHex(e,Math.min(100,s-10),Math.min(100,$+20))}"/>\n <stop offset="70%" stop-color="${n}"/>\n <stop offset="100%" stop-color="${hslToHex(e,Math.min(100,s+10),Math.max(0,$-20))}"/>\n </radialGradient>\n `,r;case"radial-highlight":return r=`\n <radialGradient id="${t}" cx="30%" cy="30%" r="70%" fx="15%" fy="15%">\n <stop offset="0%" stop-color="${hslToHex(e,Math.max(0,s-20),Math.min(100,$+30))}"/>\n <stop offset="50%" stop-color="${hslToHex(e,s,$)}"/>\n <stop offset="100%" stop-color="${hslToHex(e,Math.min(100,s+10),Math.max(0,$-20))}"/>\n </radialGradient>\n `,r;default:return""}return`<linearGradient id="${t}" x1="${o?"90":"0"}%" y1="0%" x2="${o?"0":"100"}%" y2="100%">\n ${r}\n </linearGradient>`}function drawHand(n,t,a,o,e,s,$=0){try{const n=t*Math.PI/180,r=50+a*Math.sin(n),i=50-a*Math.cos(n),h=50-$*Math.sin(n),c=50+$*Math.cos(n);switch(s){case"line":return`<line x1="${h}" y1="${c}" x2="${r}" y2="${i}" stroke="${e}" stroke-width="${o}" stroke-linecap="round"/>`;case"triangle":{const t=2*o,a=50+t/2*Math.cos(n),s=50+t/2*Math.sin(n),$=50-t/2*Math.cos(n);return`<path d="M${h},${c} L${a},${s} L${r},${i} L${$},${50-t/2*Math.sin(n)} Z" fill="${e}"/>`}case"arrow":{const n=.25*a,s=.6*o,r=.3*o,i=o,h=.7*a,c=Math.min($,h),l=`\n M50,${50-a}\n L${50-i/2},${50-a+n}\n H${50-r/2}\n V50\n H${50+r/2}\n V${50-a+n}\n H${50+i/2}\n Z\n `,M=`\n M${50-r/2},${50-a+n}\n Q${50-s/2},${50-a/2} ${50-s/2},50\n L${50+s/2},50\n Q${50+s/2},${50-a/2} ${50+r/2},${50-a+n}\n Z\n `,d=c>0?`\n M${50-s/2},50\n Q${50-s/2},${50+c/2} ${50-r/2},${50+c}\n L${50+r/2},${50+c}\n Q${50+s/2},${50+c/2} ${50+s/2},50\n Z\n `:"";return`\n <g transform="rotate(${t} 50 50)">\n <path d="${l}" fill="${e}" />\n <path d="${M}" fill="${e}" />\n ${c>0?`<path d="${d}" fill="${e}" />`:""}\n </g>\n `}case"diamond":{const t=2*o,s=.33*a,$=50+s*Math.sin(n)+t/2*Math.cos(n),l=50-s*Math.cos(n)+t/2*Math.sin(n),M=50+s*Math.sin(n)-t/2*Math.cos(n);return`<path d="M${h},${c} L${$},${l} L${r},${i} L${M},${50-s*Math.cos(n)-t/2*Math.sin(n)} Z" fill="${e}"/>`}case"baton":{const t=2*o,s=.8*a,$=50+s*Math.sin(n)+t/2*Math.cos(n),l=50-s*Math.cos(n)+t/2*Math.sin(n),M=50+s*Math.sin(n)-t/2*Math.cos(n);return`<path d="M${h},${c} L${$},${l} L${r},${i} L${M},${50-s*Math.cos(n)-t/2*Math.sin(n)} Z" fill="${e}"/>`}case"losange":{const t=2*o,s=.5*a,$=50+s*Math.sin(n)+t/2*Math.cos(n),l=50-s*Math.cos(n)+t/2*Math.sin(n),M=50+s*Math.sin(n)-t/2*Math.cos(n);return`<path d="M${h},${c} L${$},${l} L${r},${i} L${M},${50-s*Math.cos(n)-t/2*Math.sin(n)} Z" fill="${e}"/>`}case"leaf":{const t=2.5*o,s=.9,$=50+a*s*Math.sin(n),r=50-a*s*Math.cos(n),i=.5,l=50+a*i*Math.sin(n),M=50-a*i*Math.cos(n),d=l+t/2*Math.cos(n),f=M+t/2*Math.sin(n),m=l-t/2*Math.cos(n);return`<path d="M${h},${c} \n Q${d},${f} ${$},${r} \n Q${m},${M-t/2*Math.sin(n)} ${h},${c}" \n fill="${e}"/>`}case"pentagon":{const t=1*o,s=.9*a,$=h+t/2*Math.cos(n),l=c+t/2*Math.sin(n),M=h-t/2*Math.cos(n),d=c-t/2*Math.sin(n),f=50+s*Math.sin(n)+t/2*Math.cos(n),m=50-s*Math.cos(n)+t/2*Math.sin(n),p=50+s*Math.sin(n)-t/2*Math.cos(n);return`<path d="M${$},${l} L${f},${m} L${r},${i} L${p},${50-s*Math.cos(n)-t/2*Math.sin(n)} L${M},${d} Z" fill="${e}"/>`}case"jaeger":return`\n <path d="M${h},${c} L${r},${i}" stroke="${e}" stroke-width="${o}" fill="none"/>\n <circle cx="${r}" cy="${i}" r="${2*o}" fill="${e}"/>\n `;case"breguet":{const n=.25*a,s=.6*o,r=.3*o,i=.9*o,h=.8*o,c=.24*o,l=.7*a,M=Math.min($,l),d=`\n M0,${-a}\n L${-i/2},${-a+n}\n H${i/2}\n Z\n `,f=`\n <circle cx="0" cy="${-a+n+h}" \n r="${h}" \n fill="none" stroke="${e}" stroke-width="${c}" />\n `,m=`\n M${-r/2},${-a+n+2*h}\n Q${-s/2},${-a/2} ${-s/2},0\n L${s/2},0\n Q${s/2},${-a/2} ${r/2},${-a+n+2*h}\n Z\n `,p=M>0?`\n M${-s/2},0\n Q${-s/2},${M/2} ${-r/2},${M}\n L${r/2},${M}\n Q${s/2},${M/2} ${s/2},0\n Z\n `:"";return`\n <g transform="translate(50,50) rotate(${t})">\n <path d="${d}" fill="${e}" />\n ${f}\n <path d="${m}" fill="${e}" />\n ${M>0?`<path d="${p}" fill="${e}" />`:""}\n </g>\n `}case"spade":{const n=10,s=.8*o,r=.4*o,i=.7*a,h=Math.min($,i),c=`\n M50,${50-a}\n C${50-s/2},${50-a+.3*n} ${50-s},${50-a+.5*n} ${50-s},${50-a+.7*n}\n Q${50-s},${50-a+n} 50,${50-a+n}\n Q${50+s},${50-a+n} ${50+s},${50-a+.7*n}\n C${50+s},${50-a+.5*n} ${50+s/2},${50-a+.3*n} 50,${50-a}\n Z\n `,l=`\n M${50-r/2},${50-a+n}\n Q${50-s/2},${50-a/2} ${50-s/2},50\n L${50+s/2},50\n Q${50+s/2},${50-a/2} ${50+r/2},${50-a+n}\n Z\n `,M=h>0?`\n M${50-s/2},50\n Q${50-s/2},${50+h/2} ${50-r/2},${50+h}\n L${50+r/2},${50+h}\n Q${50+s/2},${50+h/2} ${50+s/2},50\n Z\n `:"";return`\n <g transform="rotate(${t} 50 50)">\n <path d="${c}" fill="${e}" />\n <path d="${l}" fill="${e}" />\n ${h>0?`<path d="${M}" fill="${e}" />`:""}\n </g>\n `}case"rectangle":{const t=o/2,a=r+t*Math.cos(n),s=i+t*Math.sin(n),$=r-t*Math.cos(n),l=i-t*Math.sin(n),M=h+t*Math.cos(n),d=c+t*Math.sin(n),f=h-t*Math.cos(n);return`\n <polygon points="${a},${s} ${$},${l} ${f},${c-t*Math.sin(n)} ${M},${d}" fill="${e}"/>\n `}case"trapezium":{const t=1.5*o,a=.9*o,s=h+o/2*Math.cos(n),$=c+o/2*Math.sin(n),l=h-o/2*Math.cos(n),M=c-o/2*Math.sin(n),d=50+t/2*Math.cos(n),f=50+t/2*Math.sin(n),m=50-t/2*Math.cos(n),p=50-t/2*Math.sin(n),u=r+a/2*Math.cos(n),g=i+a/2*Math.sin(n),L=r-a/2*Math.cos(n);return`\n <path d="M${s},${$} L${d},${f} L${u},${g} L${L},${i-a/2*Math.sin(n)} L${m},${p} L${l},${M} Z" fill="${e}"/>\n `}case"custom":{const n=Math.max(0,Math.min(a,50));if(0===n)return"";const s=.7*n,r=Math.min($,s),i=n+r,h=.01,c=Math.max(h,i/510),l=510*(1-r/i),M=Math.max(.1,o/2),d=51.75;return`\n <g transform="translate(50,50) rotate(${t}) scale(${c}) translate(-${d},${-l})">\n ${`\n <g fill="${e}" stroke="${e}" stroke-width="${o/c/2.5}">\n <path d="M ${d} 100 \n L ${d+(91.52-d)*M} 148.92 \n C ${d+(98.95-d)*M} 158.06 \n ${d+(103-d)*M} 169.48 \n ${d+(103-d)*M} 181.25 \n C ${d+(103-d)*M} 194.84 \n ${d+(97.6-d)*M} 207.88 \n ${d+(87.99-d)*M} 217.49 \n C ${d+(78.38-d)*M} 227.1 \n ${d+(65.34-d)*M} 232.5 \n ${d} 232.5 \n C ${d-(d-38.16)*M} 232.5 \n ${d-(d-25.12)*M} 227.1 \n ${d-(d-15.51)*M} 217.49 \n C ${d-(d-5.9)*M} 207.88 \n ${d-(d-.5)*M} 194.84 \n ${d-(d-.5)*M} 181.25 \n C ${d-(d-.5)*M} 169.48 \n ${d-(d-4.55)*M} 158.06 \n ${d-(d-11.98)*M} 148.92 Z" />\n <path d="M ${d} 300 \n C ${d-(d-15.18)*M} 359.79 \n ${d-(d-15.18)*M} 450.21 \n ${d} 510 \n C ${d+(88.3-d)*M} 450.21 \n ${d+(88.3-d)*M} 359.79 \n ${d} 300 Z" />\n <ellipse cx="${d}" cy="215" rx="${5*M}" ry="215" />\n </g>\n `}\n </g>\n `}case"baroque":{const n=897.69,s=14.41,r=405.53+s,i=861.03,h=i-s,c=50,l=48.5,M=Math.max(0,Math.min(a*(l/c),l)),d=i-r,f=2*M,m=Math.min($,f),p=M/d,u=Math.max(.01,o/100);return`\n <g transform="translate(50,50) rotate(${t})">\n <g transform="scale(${u}, ${p}) translate(${-n},${-(h-m/p)})">\n <path\n d="m 918.89,594.96 c 0,0 -9.71,-11.31 -21.2,-11.08 -11.48,-0.23 -21.2,11.08 -21.2,11.08 -21.2,-26.49 0,-35.32 0,-35.32 0.21,-17.92 13.67,-22.5 21.2,-23.67 7.53,1.17 20.99,5.75 21.2,23.67 0,0 21.2,8.83 0,35.32 z m -21.2,266.07 c -7.96,0 -14.41,-6.45 -14.41,-14.41 0,-7.96 6.45,-14.41 14.41,-14.41 7.96,0 14.41,6.45 14.41,14.41 0,7.96 -6.45,14.41 -14.41,14.41 z m 29.52,-305.4 c 1.61,-20.87 -14.44,-24.88 -20.07,-28.9 -5.61,-4.01 0,-109.97 0,-121.21 0,-11.24 -9.45,-12.04 -9.45,-12.04 0,0 -9.45,0.8 -9.45,12.04 0,11.24 5.63,117.2 0,121.21 -5.61,4.01 -21.67,8.03 -20.07,28.9 0,0 -13.64,8.03 -12.84,16.86 0.8,8.83 13.64,24.89 13.64,24.89 l -9.63,3.21 c 0,0 17.65,6.42 20.87,19.27 2.97,11.86 10.55,151.1 -0.57,199.49 -8.83,5.86 -14.65,15.88 -14.65,27.28 0,18.07 14.64,32.71 32.71,32.71 18.07,0 32.72,-14.65 32.72,-32.71 0,-11.39 -5.83,-21.42 -14.67,-27.28 -11.11,-48.39 -3.53,-187.63 -0.57,-199.49 3.21,-12.84 20.88,-19.27 20.88,-19.27 l -9.64,-3.21 c 0,0 12.85,-16.05 13.65,-24.89 0.8,-8.83 -12.85,-16.86 -12.85,-16.86"\n fill="${e}"\n />\n </g>\n </g>\n `}case"lance":{const n=826.22,s=12.91,r=571.53+s,i=1007.24,h=i-s,c=50,l=50,M=Math.max(0,Math.min(a*(l/c),l)),d=i-r,f=1*M,m=Math.min($,f),p=M/d,u=Math.max(.01,o/100);return`\n <g transform="translate(50,50) rotate(${t})">\n <g transform="scale(${u}, ${p}) translate(${-n},${-(h-m/p)})">\n <path\n d="m 826.22,1007.24 c -7.13,0 -12.91,-5.78 -12.91,-12.91 0,-7.13 5.78,-12.91 12.91,-12.91 7.13,0 12.91,5.78 12.91,12.91 0,7.13 -5.78,12.91 -12.91,12.91 z m 7.8,-41.13 c 0.64,-12.7 11.46,-19.35 11.46,-19.35 v -9.63 h -11.24 c 12.04,-15.25 9.63,-52.98 3.21,-75.46 -6.42,-22.48 -4.01,-65.02 -4.01,-65.02 0,0 16.86,-3.21 11.24,-7.22 -12.04,-8.83 -10.43,-39.33 -10.43,-39.33 h 14.45 v -10.44 h -14.45 c 8.03,-21.67 2.41,-61.01 0,-71.44 -2.41,-10.43 0,-58.6 0,-75.45 0,-16.86 -8.03,-20.87 -8.03,-20.87 v 0 c 0,0 -8.03,4.01 -8.03,20.87 0,16.86 2.41,65.02 0,75.45 -2.41,10.44 -8.03,49.77 0,71.44 h -14.45 v 10.44 h 14.45 c 0,0 1.61,30.5 -10.44,39.33 -5.62,4.01 11.24,7.22 11.24,7.22 0,0 2.41,42.54 -4.01,65.02 -6.42,22.48 -8.83,60.2 3.21,75.46 h -11.24 v 9.63 c 0,0 10.82,6.64 11.46,19.35 -12.39,3.42 -21.49,14.74 -21.49,28.22 0,16.18 13.12,29.3 29.3,29.3 16.18,0 29.3,-13.12 29.3,-29.3 0,-13.47 -9.11,-24.8 -21.5,-28.22"\n fill="${e}"\n />\n </g>\n </g>\n `}case"fleurdelis":{const n=225.88,s=506.08,r=967.98,i=50,h=29,c=Math.max(0,Math.min(a*(h/i),h)),l=r-s,M=1*c,d=Math.min($,M),f=c/l,m=Math.max(.01,o/100);return`\n <g transform="translate(50,50) rotate(${t})">\n <g transform="scale(${m}, ${f}) translate(${-n},${-(r-d/f)})">\n <path\n d="m 301.83,506.08 c -7.22,19.27 -24.08,34.32 -49.97,26.49 0,0 7.83,-16.25 0.6,-21.07 -7.22,-4.82 -14.45,-7.83 -17.46,-14.45 -1.4,-3.08 -5.28,-3.94 -9.03,-3.98 -3.75,0.04 -7.63,0.9 -9.03,3.98 -3.01,6.62 -10.23,9.63 -17.46,14.45 -7.23,4.82 0.6,21.07 0.6,21.07 -25.89,7.83 -42.74,-7.22 -49.97,-26.49 -7.22,-19.27 14.45,-33.71 14.45,-33.71 4.82,21.67 27.69,12.04 27.69,12.04 11.44,10.84 28.9,-8.43 24.38,-12.04 -4.51,-3.61 -3.31,-13.85 -3.31,-13.85 10.23,-14.45 -14.45,-24.08 -14.45,-24.08 8.35,-13.79 19.52,-17.06 27.09,-17.5 7.57,0.44 18.74,3.7 27.09,17.5 0,0 -24.68,9.63 -14.45,24.08 0,0 1.2,10.23 -3.31,13.85 -4.52,3.61 12.94,22.88 24.38,12.04 0,0 22.88,9.63 27.69,-12.04 0,0 21.67,14.45 14.45,33.71 z m -75.86,62.46 c -9.16,-11.62 -25.29,-25.13 -25.29,-25.13 5.03,-2.51 17.9,-14.92 25.29,-22.24 7.38,7.33 20.26,19.73 25.29,22.24 0,0 -16.12,13.52 -25.29,25.13 z m 24.94,399.3 c 0,13.77 -11.17,24.94 -24.94,24.94 -13.77,0 -24.94,-11.17 -24.94,-24.94 0,-13.77 11.17,-24.94 24.94,-24.94 13.77,0 24.94,11.17 24.94,24.94 z m 34.66,-512.33 c -11.44,-1.2 -15.05,-0.6 -15.65,-16.86 -0.6,-16.26 -27.69,-28.9 -31.91,-34.92 -4.21,-6.02 6.02,-137.87 6.02,-166.76 0,-40.98 -18.06,-68.63 -18.06,-68.63 0,0 -18.06,27.65 -18.06,68.63 0,28.9 10.23,160.74 6.02,166.76 -4.21,6.02 -31.31,18.66 -31.91,34.92 -0.6,16.25 -4.21,15.65 -15.65,16.86 -11.44,1.2 -33.71,20.47 -28.3,48.16 5.42,27.69 23.48,35.52 34.32,37.33 0,0 1.81,24.68 18.06,23.48 16.25,-1.2 23.48,3.01 25.89,13.85 2.41,10.84 -5.42,4.21 -12.64,6.02 -7.22,1.81 -5.42,15.05 4.82,15.05 10.23,0 10.23,13.85 3.61,43.35 -6.62,29.5 -17.46,153.52 3.01,198.67 2.41,7.22 -28.29,4.21 -24.68,25.89 1.81,4.82 16.86,-6.62 22.88,1.81 6.02,8.43 -4.82,14.45 -7.83,19.27 -2.43,3.89 5.76,14.48 8.67,24.12 -25.59,5.43 -44.79,28.14 -44.79,55.35 0,27.3 19.33,50.08 45.04,55.41 -2.63,4.21 -7.04,5.73 -6.86,10.82 0.25,7.22 11.79,10.23 5.77,21.07 -6.02,10.84 -23.48,0 -23.48,0 -5.42,20.47 22.28,30.1 22.28,30.1 -0.6,31.91 13.85,36.73 13.85,36.73 0,0 14.45,-4.82 13.85,-36.73 0,0 27.69,-9.63 22.28,-30.1 0,0 -17.46,10.84 -23.48,0 -6.02,-10.84 5.52,-13.85 5.77,-21.07 0.18,-5.08 -4.23,-6.6 -6.86,-10.82 25.71,-5.33 45.04,-28.11 45.04,-55.41 0,-27.21 -19.2,-49.92 -44.79,-55.35 2.91,-9.64 11.1,-20.22 8.67,-24.12 -3.01,-4.82 -13.85,-10.84 -7.83,-19.27 6.02,-8.43 21.07,3.01 22.88,-1.81 3.61,-21.67 -27.09,-18.66 -24.68,-25.89 20.47,-45.15 9.63,-169.17 3.01,-198.67 -6.62,-29.5 -6.62,-43.35 3.61,-43.35 10.23,0 12.04,-13.24 4.82,-15.05 -7.22,-1.81 -15.05,4.82 -12.64,-6.02 2.41,-10.84 9.63,-15.05 25.89,-13.85 16.25,1.2 18.06,-23.48 18.06,-23.48 10.84,-1.81 28.9,-9.63 34.32,-37.33 5.42,-27.69 -16.86,-46.96 -28.3,-48.16"\n fill="${e}"\n />\n </g>\n </g>\n `}case"spade2":{const n=35.5,s=0,r=505,i=50,h=50,c=Math.max(0,Math.min(a*(h/i),h)),l=r-s,M=.5*c,d=Math.min($,M),f=c/l,m=Math.max(.01,o/30);return`\n <g transform="translate(50,50) rotate(${t})">\n <g transform="scale(${m}, ${f}) translate(${-n},${-(r-d/f)})">\n <path d="M35.5 77.5 L68.84 181.85C69.94 185.29 70.5 188.88 70.5 192.5C70.5 211.83 54.83 227.5 35.5 227.5C16.17 227.5 0.5 211.83 0.5 192.5C0.5 188.88 1.06 185.29 2.16 181.85ZM30.5 108L30.5 -27L30.5 -27L35.5 -37L40.5 -27L40.5 -27L40.5 108L35.5 108ZM35.5 265C10.5 333.33 10.5 436.67 35.5 505C60.49 436.67 60.49 333.33 35.5 265ZM30.5 340L30.5 205L30.5 205L35.5 195L40.5 205L40.5 205L40.5 340L35.5 340Z" fill="${e}"/>\n </g>\n </g>\n `}case"teardrop":{const n=35.5,s=0,r=510,i=50,h=50,c=Math.max(0,Math.min(a*(h/i),h)),l=r-s,M=.5*c,d=Math.min($,M),f=c/l,m=Math.max(.01,o/71);return`\n <g transform="translate(50,50) rotate(${t})">\n <g transform="scale(${m}, ${f}) translate(${-n},${-(r-d/f)})">\n <path d="M35.5 82.5 L68.84 186.85C69.94 190.29 70.5 193.88 70.5 197.5C70.5 216.83 54.83 232.5 35.5 232.5C16.17 232.5 0.5 216.83 0.5 197.5C0.5 193.88 1.06 190.29 2.16 186.85Z" fill="${e}"/>\n <path d="M35.5 300C10.5 359.79 10.5 450.21 35.5 510C60.49 450.21 60.49 359.79 35.5 300Z" fill="${e}"/>\n <ellipse cx="35.5" cy="215" rx="${7.5}" ry="215" fill="${e}"/>\n </g>\n </g>\n `}default:return console.warn(`Unknown hand shape: ${s}`),""}}catch(n){return console.error(`Error in drawHand function: ${n.message}`),""}}function getTimezoneOffset(n){if("local"===n)return-(new Date).getTimezoneOffset();if("UTC"===n)return 0;{const t=n.match(/GMT([+-])(\d+)/);if(t){return("+"===t[1]?1:-1)*parseInt(t[2],10)*60}}return 0}function u(){const n=new Date,t=getTimezoneOffset(s.timezone)+n.getTimezoneOffset(),a=new Date(n.getTime()+6e4*t),o=a.getHours()%12,e=a.getMinutes(),$=a.getSeconds(),r=30*(o+e/60),i=6*(e+$/60),h=6*($+a.getMilliseconds()/1e3);document.getElementById("hour").innerHTML=drawHand("hour",r,25.6,3.6,"#000000","lance",0),document.getElementById("minute").innerHTML=drawHand("minute",i,39,3.5,"#000000","lance",0),document.getElementById("second").innerHTML=drawHand("second",h,42,.5,"#000000","baton",14),e!==u.lastMinute&&(document.getElementById("date-text").textContent=`${a.getMonth()+1}/${a.getDate()}`,document.getElementById("day-text").textContent=days[a.getDay()],u.lastMinute=e),setTimeout((()=>requestAnimationFrame(u)),33.33)}u.lastMinute=-1,u()</script>
</center>
</body></html>上から５番目の、
<svg id=clock width=400 height=400 viewBox="0 0 100 100">
の、widthとheightを120や200のように小さくすれば、画面表示で小さな時計になります。
②おわりに
プロ版では、かなりバリエーションを増やしましたので、デザインするAI側もデザインがしやすくなっているようで、突拍子もないデザインはなくなってきました。
さらに、今回気がついたのですが、すでにデザインされているサンプル時計のJSONファイル（デフォルト表示のJSONではありません）と、参考写真をAIにアップロードして設定JSONを生成させると、２つのミックスで時計のデザインを作ってくれました。
これは、新しい発見でした。
もちろん、AIだけで完璧なデザインは無理なので、人間が最後に手を入れています。
このように季節ごとに、飾る時計を着せ替えられるといいですね。
Googleサイトに、中秋の名月時計を、飾ってお楽しみください。