JSFiddle - React, Tailwind, and code Playground

by rew222

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moon Phases SVG</title>
</head>
<body>
    <div id="o"></div>
    <script type="module"></script>
</body>
</html>

JavaScript

//import SunCalc from 'suncalc';

export function createMoonSvg(containerId) {
    const container = document.getElementById(containerId);

    if (!container) {
        console.error(`Container with id ${containerId} not found.`);
        return;
    }

    // Add CSS
    const style = document.createElement('style');
    style.textContent = `
        @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Finlandica:400|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Atkinson+Hyperlegible:400|Open+Sans+Condensed:300,700|Mohave:400|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);

        #moon {
            height: 300px;
            width: 300px;
            background-image: url("https://i.imgur.com/Rg4CeGt.jpg");
        }
        svg {
            border: 5px solid green;
        }
        circle {
            fill: url(#moonTexture);
            stroke: darkgrey;
            stroke-width: 2;
        }
        path.shadow {
            fill: black;
            filter: url(#blur);
        }
    `;
    document.head.appendChild(style);

    // Add SVG
    const svgNS = "http://www.w3.org/2000/svg";
    const xlinkNS = "http://www.w3.org/1999/xlink";

    const svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute("id", "moon");
    svg.setAttribute("width", "100%");
    svg.setAttribute("height", "100%");
    svg.setAttribute("viewBox", "0 0 200 200");

    const defs = document.createElementNS(svgNS, "defs");

    const filter = document.createElementNS(svgNS, "filter");
    filter.setAttribute("id", "blur");
    const feGaussianBlur = document.createElementNS(svgNS, "feGaussianBlur");
    feGaussianBlur.setAttribute("in", "SourceGraphic");
    feGaussianBlur.setAttribute("stdDeviation", "2");
    filter.appendChild(feGaussianBlur);
   ...