Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg width="240" height="240">
  
  <!--luna vuota-->
  <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="120" cy="10" r="10"></circle>
  
  <g>
    <circle id="circle" style="fill:#faf9dc" cx="202" cy="43" r="10"></circle>
    <circle id="circle" style="fill:#25305a" cx="191" cy="43" r="15"></circle>
    <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="202" cy="43" r="10"></circle>
  </g>
  
  <g>
    <circle id="circle" style="fill:#faf9dc" cx="230" cy="120" r="10"></circle>
    <circle id="circle" style="fill:#25305a" cx="200" cy="120" r="30"></circle>
    <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="230" cy="120" r="10"></circle>
  </g>
  
  <g>
    <circle id="circle" style="fill:#faf9dc" cx="202" cy="193" r="10"></circle>
    <circle style="fill:#25305a" cx="189" cy="193" r="15"></circle>
    <ellipse style="fill:#faf9dc" cx="202" cy="193" rx="5" ry="10" />
    <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="202" cy="193" r="10"></circle>
  </g>
  
  <circle id="circle" style="fill:#faf9dc" cx="120" cy="230" r="10"></circle>
  
  <g>
    <circle style="fill:#faf9dc;" cx="36" cy="193"  cx="202" cy="43" r="10"></circle>
    <circle style="fill:#25305a" cx="49" cy="193" r="15"></circle>
    <ellipse style="fill:#faf9dc" cx="36" cy="193" rx="5" ry="10" />
    <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="36" cy="193" r="10"></circle>
  </g>
  
   <g>
    <circle id="circle" style="fill:#faf9dc" cx="10" cy="120" r="10"></circle>
    <circle id="circle" style="fill:#25305a" cx="41" cy="120" r="30"></circle>
    <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="10" cy="120" r="10"></circle>
  </g>
  
  <g>
    <circle id="circle" style="fill:#faf9dc" cx="40" cy="43"  r="10"></circle>
    <circle id="circle" style="fill:#25305a" cx="51" cy="43" r="15"></circle>
    <circle style="stroke-width: 1px; stroke: #777;" fill="none" cx="40" cy="43" r="10"></circle>
  </g>

  <circle id="circle" style="fill:#faf9dc" cx="120" cy="120" r="95"></circle>
 
  <text x="117" y="39" fill="#888888">0</text>
  <text x="202" y="125" fill="#888888">6</text>
  <text x="112" y="210" fill="#888888">12</text>
  <text x="28" y="125" fill="#888888">18</text>
 
  <line x1="120" y1="120" x2="120" y2="60" style="stroke-width: 4px; stroke: #000000;" id="hourHand">
       <animatetransform attributeName="transform"
                         attributeType="XML"
                         type="rotate"
                         repeatCount="indefinite"/>
  </line>
  <line x1="120" y1="120" x2="120" y2="35" style="stroke-width: 3px; stroke: #000000;" id="minuteHand">
      <animatetransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        repeatCount="indefinite"/>
  </line>
  <line x1="120" y1="120" x2="120" y2="30" style="stroke-width: 2px; stroke: #68aec4;" id="secondHand">
      <animatetransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        repeatCount="indefinite"/>
  </line>
  
  <circle id="center" style="fill:#000000; stroke: #000000; stroke-width: 2px;" cx="120" cy="120" r="4"></circle>
</svg>
<p>OROLOGIO LUNARE by <a href="https://www.kitsandchips.com/" target="_blank">kitsandchips.com</a></p>
              
            
!

CSS

              
                body {
  background: #25305a;
  text-align: center;
}

p{
  color: #e0e1d9;
  font-family: Helvetica, sans-serif;
  font-size: 15px;
}

a{
  font-family: Helvetica, sans-serif;
  color: white;
}

svg {
   margin-top:20px;
}

              
            
!

JS

              
                // tempo di rivoluzione sinodica della Luna è variabile - quanto tempo passa fra l'ultima luna nuova e la prossima

var start = new Date("January 13, 2021 06:02:37"); // ultima Luna nuova 
var next = new Date("February 11, 2021 20:08:11"); // prossima Luna nuova 
var delta = Math.abs(next - start) / 1000;
var g = Math.floor(delta / 86400);
delta -= g * 86400;
var h = Math.floor(delta / 3600) % 24;
delta -= h * 3600;
var m = Math.floor(delta / 60) % 60;
delta -= m * 60;
var s = delta % 60;

// il mese sinodico in secondi
var moonRotationSec = (g * 24 * 3600) + (h * 3600) + (m * 60) + s;

// il giorno terrestre in secondi
var earthRotationSec = 1 * 3600 * 24;

// costante moltiplicativa per passare dai secondi terrestri a quelli lunari
var cm = earthRotationSec / moonRotationSec; 
// costante moltiplicativa per passare dalla velocità delle lancette terrestri a quelle lunari
var cmS = moonRotationSec / earthRotationSec; 

var now = new Date(); // adesso
var moonSec_slfm = Math.round((now.getTime() - start.getTime()) / 1000 * cm); // secondi lunari dall'ultima Luna nuova

var moonHours = Math.floor(moonSec_slfm / (3600)); // ore lunari passate dall'ultima Luna nuova
var remainingSec = moonSec_slfm % 3600;
var moonMinutes = Math.floor(remainingSec / (60)); // minuti lunari passati dall'ultima Luna nuova - escluse le ore
remainingSec = remainingSec % 60;
var moonSeconds = Math.floor(remainingSec); // secondi lunari passati dall'ultima Luna nuova

var hoursAngle = 360 * moonHours / 24 + moonMinutes / 4; // angolo inziale lancetta delle ore
var minuteAngle = 360 * moonMinutes / 60; // angolo lancetta dei minuti
var secAngle = 360 * moonSeconds / 60; // angolo lancetta dei secondi

$('#secondHand > *').attr('from', secAngle + " 120 120");
$('#secondHand > *').attr('to', secAngle + 360 + " 120 120");
$('#secondHand > *').attr('dur', 60 * cmS);
$('#minuteHand > *').attr('from', minuteAngle + " 120 120");
$('#minuteHand > *').attr('to', minuteAngle + 360 + " 120 120");
$('#minuteHand > *').attr('dur', 3600 * cmS);
$('#hourHand > *').attr('from', hoursAngle + " 120 120");
$('#hourHand > *').attr('to', hoursAngle + 360 + " 120 120");
$('#hourHand > *').attr('dur', 86400 * cmS);

/************************/
/* 24 pallini delle ore °/
/************************/

for(var i = 1; i <= 24; i++) {  
  if (i != 6 && i != 12 && i != 18 && i != 24){
    var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
    el.attr('cx', '120');
    el.attr('cy', '30');
    el.attr('r', '2');
    el.attr('transform', 'rotate(' + (i*360/24) + ' 120 120)');
    el.attr('style', 'fill: #†;');
    $('svg').append(el);
  }
}


  
  
  

              
            
!
999px

Console