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();