Javascript Python Logo
2024. 12. 16. 13:06ㆍ개발/javascript
Javascript Python Logo
function createPythonLogo() {
const xmlns = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(xmlns, "svg");
svg.setAttribute("viewBox", "0 0 200 200");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
// Background Circle
const bgCircle = document.createElementNS(xmlns, "circle");
bgCircle.setAttribute("cx", "100");
bgCircle.setAttribute("cy", "100");
bgCircle.setAttribute("r", "95");
bgCircle.setAttribute("fill", "#f7f7f7");
bgCircle.setAttribute("stroke", "#4B8BBE");
bgCircle.setAttribute("stroke-width", "10");
svg.appendChild(bgCircle);
// Upper Python Head
const upperHead = document.createElementNS(xmlns, "path");
upperHead.setAttribute("d", "M50 50 C30 70, 30 130, 50 150 L90 150 C110 150, 110 130, 90 120 C70 110, 70 90, 90 80 L50 50 Z");
upperHead.setAttribute("fill", "#FFD43B");
svg.appendChild(upperHead);
const upperEye = document.createElementNS(xmlns, "circle");
upperEye.setAttribute("cx", "60");
upperEye.setAttribute("cy", "90");
upperEye.setAttribute("r", "5");
upperEye.setAttribute("fill", "#000");
svg.appendChild(upperEye);
// Lower Python Head
const lowerHead = document.createElementNS(xmlns, "path");
lowerHead.setAttribute("d", "M150 50 C170 70, 170 130, 150 150 L110 150 C90 150, 90 130, 110 120 C130 110, 130 90, 110 80 L150 50 Z");
lowerHead.setAttribute("fill", "#4B8BBE");
svg.appendChild(lowerHead);
const lowerEye = document.createElementNS(xmlns, "circle");
lowerEye.setAttribute("cx", "140");
lowerEye.setAttribute("cy", "110");
lowerEye.setAttribute("r", "5");
lowerEye.setAttribute("fill", "#000");
svg.appendChild(lowerEye);
// Tongues
const tongues = [
{ x1: 60, y1: 150, x2: 50, y2: 170 },
{ x1: 60, y1: 150, x2: 70, y2: 170 },
{ x1: 140, y1: 50, x2: 130, y2: 30 },
{ x1: 140, y1: 50, x2: 150, y2: 30 },
];
tongues.forEach(({ x1, y1, x2, y2 }) => {
const tongue = document.createElementNS(xmlns, "line");
tongue.setAttribute("x1", x1);
tongue.setAttribute("y1", y1);
tongue.setAttribute("x2", x2);
tongue.setAttribute("y2", y2);
tongue.setAttribute("stroke", "#FF6347");
tongue.setAttribute("stroke-width", "3");
svg.appendChild(tongue);
});
// Fun Banner
const text = document.createElementNS(xmlns, "text");
text.setAttribute("x", "100");
text.setAttribute("y", "190");
text.setAttribute("font-family", "Arial, sans-serif");
text.setAttribute("font-size", "15");
text.setAttribute("text-anchor", "middle");
text.setAttribute("fill", "#333");
text.textContent = "Python, but fun!";
svg.appendChild(text);
// Append SVG to the document body
document.body.appendChild(svg);
}
// Call the function to create the logo
createPythonLogo();
'개발 > javascript' 카테고리의 다른 글
The classList API (0) | 2014.09.16 |
---|---|
$.ajax beforeSend (0) | 2014.01.12 |
날자 객체 Date Object (0) | 2014.01.05 |
Google maia.js - the "Twitter Bootstrap" made by Google with Closure (0) | 2013.09.04 |
[canvas] 간단히 만들어보는 HTML5 애니메이션 (0) | 2013.08.25 |