Skip to content

Instantly share code, notes, and snippets.

@uniskela

uniskela/index.html

Created December 13, 2023 14:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save uniskela/7fe9c92c2049b84ad97f129e87b71661 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save uniskela/7fe9c92c2049b84ad97f129e87b71661 to your computer and use it in GitHub Desktop.
Download ZIP
Spiral v3
Raw
index.html
<div class="wrapper">
<div class='clock'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<defs>
<path id="spiral" fill="none" d="m75 75-.08.01-.07.03-.07.04-.06.07-.04.07-.03.09-.01.1c-.01.05.01.06.01.11s.02.05.03.11.03.05.06.11l.07.1c.04.05.05.05.1.09l.11.09c.06.04.07.03.14.06l.15.05c.08.02.08.02.17.02l.17.01c.08 0 .1-.01.19-.03l.18-.05c.09-.03.1-.04.19-.09l.18-.11c.09-.06.08-.07.16-.15l.16-.17c.08-.09.07-.09.13-.19s.06-.11.11-.23l.08-.24c.04-.12.03-.13.05-.26s.01-.14.01-.27 0-.15-.02-.29l-.06-.28-.1-.29c-.05-.14-.07-.14-.14-.28s-.09-.13-.18-.26-.11-.13-.22-.25-.13-.11-.26-.22-.14-.1-.29-.19-.16-.08-.33-.16-.17-.06-.34-.12-.19-.04-.37-.07-.2-.02-.39-.02-.2 0-.39.02-.2.03-.4.07-.2.06-.4.13-.19.09-.38.18-.19.11-.37.24-.17.13-.34.28-.16.16-.3.33-.14.18-.27.37-.12.21-.23.42-.09.22-.17.45-.07.23-.12.47-.04.25-.06.5-.01.25 0 .51.03.25.07.51.06.26.13.51.09.25.2.5.13.24.27.48.15.23.33.45.18.21.39.41.21.19.44.36.24.17.49.32.27.13.54.25.29.1.58.18.3.07.6.12.31.03.62.04.32-.01.63-.04.32-.05.63-.12.32-.09.62-.19.31-.13.6-.28.29-.17.57-.36.27-.2.53-.43.25-.24.48-.49.21-.28.41-.57.19-.3.35-.61.15-.33.28-.67.1-.34.19-.7.06-.36.1-.73.02-.37.02-.74-.03-.38-.08-.76-.08-.37-.18-.74-.12-.37-.26-.73-.17-.35-.36-.7-.22-.33-.45-.65-.26-.31-.54-.6-.29-.28-.61-.54-.33-.24-.68-.46-.36-.2-.74-.38-.39-.16-.79-.29-.41-.11-.83-.19-.42-.06-.86-.09-.43-.01-.87.02-.43.04-.87.12-.43.11-.85.24-.42.16-.84.34-.4.21-.79.45-.37.26-.73.55-.35.31-.67.64-.31.35-.6.72-.26.4-.5.81-.22.42-.41.86-.16.46-.29.92-.11.48-.19.96-.05.49-.07.98.02.5.06 1 .08.49.18.98.14.49.3.97.2.47.43.93.25.45.54.88.31.42.65.82.36.38.75.73.41.34.85.65.45.28.92.53.49.23 1 .43.51.16 1.04.3.54.1 1.09.17.55.04 1.11.04.56-.03 1.11-.1.56-.1 1.11-.24.54-.17 1.07-.38.52-.23 1.03-.5.49-.31.96-.64.46-.37.89-.76.41-.42.8-.87.35-.47.68-.96.3-.52.57-1.06.24-.55.44-1.12.17-.58.3-1.18.09-.6.15-1.21.02-.62 0-1.23-.05-.62-.15-1.24-.13-.61-.3-1.21-.21-.6-.46-1.18-.28-.57-.59-1.12-.36-.54-.74-1.05-.42-.49-.87-.96-.48-.43-.99-.84-.53-.38-1.09-.73-.58-.31-1.18-.59-.62-.24-1.25-.45-.65-.16-1.31-.28-.67-.09-1.34-.13-.68 0-1.36.04-.68.08-1.35.2-.67.17-1.33.38-.64.24-1.27.53-.62.33-1.21.7-.58.4-1.13.84-.52.48-1.02.98-.46.54-.89 1.11-.4.6-.76 1.22-.33.64-.61 1.31-.25.68-.45 1.38-.16.72-.27 1.44-.07.73-.1 1.47.02.74.09 1.48.11.74.27 1.47.2.72.45 1.43.29.7.62 1.38.38.66.8 1.29.46.61.95 1.2.53.55 1.1 1.08.6.48 1.23.94.66.41 1.35.78.71.33 1.44.62.75.24 1.52.44.77.15 1.56.25.8.06 1.6.06.8-.04 1.6-.14.8-.14 1.58-.33.78-.24 1.54-.53.74-.34 1.47-.72.7-.43 1.37-.9.65-.52 1.27-1.07.58-.59 1.13-1.22.51-.67.98-1.36.42-.73.8-1.48.34-.77.63-1.57.24-.82.43-1.65.13-.84.22-1.7.03-.86.01-1.72-.07-.86-.19-1.72-.18-.85-.41-1.69-.29-.83-.62-1.64-.38-.79-.82-1.56-.48-.74-1.01-1.45-.57-.68-1.18-1.33-.66-.61-1.35-1.17-.73-.53-1.49-1.01-.79-.44-1.61-.83-.84-.33-1.7-.62-.89-.23-1.78-.41-.91-.12-1.83-.19-.92-.01-1.85.04-.92.1-1.83.26-.91.21-1.8.49-.88.32-1.74.71-.83.43-1.64.92-.78.53-1.53 1.12-.71.63-1.38 1.31-.63.71-1.22 1.47-.54.79-1.04 1.62-.44.86-.83 1.74-.33.91-.61 1.85-.23.94-.39 1.91-.11.97-.15 1.95.01.99.09 1.97.14.98.33 1.95.26.96.58 1.91.37.92.8 1.83.49.88 1.03 1.72.6.82 1.24 1.6.69.74 1.43 1.43.78.65 1.61 1.26.86.55 1.75 1.05.93.45 1.88.84.98.33 1.98.6 1.01.21 2.04.36 1.04.08 2.09.1 1.04-.04 2.09-.15 1.03-.18 2.06-.41 1.01-.3 2.01-.67.97-.42 1.92-.9.91-.55 1.8-1.15.85-.65 1.65-1.36.77-.75 1.49-1.56.67-.84 1.28-1.73.57-.93 1.07-1.89.45-1 .84-2.02.32-1.05.58-2.11.19-1.08.32-2.18.06-1.1.05-2.21-.08-1.1-.22-2.21-.22-1.09-.5-2.17-.34-1.06-.75-2.11-.48-1.01-1.02-2-.6-.96-1.26-1.88-.71-.88-1.48-1.71-.82-.79-1.69-1.52-.92-.69-1.88-1.32-.99-.57-2.02-1.07-1.07-.45-2.16-.83-1.11-.31-2.25-.55-1.14-.18-2.3-.28-1.17-.03-2.34.01-1.16.11-2.32.29-1.15.26-2.28.58-1.12.4-2.21.86-1.06.53-2.08 1.13-1 .66-1.95 1.38-.9.78-1.76 1.61-.81.89-1.56 1.83-.7.98-1.33 2.01-.57 1.07-1.08 2.17-.44 1.13-.81 2.29-.3 1.18-.52 2.38-.15 1.22-.23 2.44 0 1.23.07 2.46.15 1.22.38 2.44.3 1.2.67 2.38.45 1.16.97 2.3.58 1.1 1.24 2.16.72 1.03 1.5 2.01.85.93 1.75 1.81.95.82 1.96 1.59 1.05.7 2.15 1.34 1.14.57 2.31 1.08 1.2.43 2.43.78 1.25.28 2.52.49 1.28.12 2.57.17 1.29-.03 2.58-.14 1.28-.2 2.55-.47 1.25-.34 2.48-.77 1.21-.5 2.38-1.07 1.14-.65 2.24-1.37 1.06-.78 2.06-1.63.96-.91 1.86-1.88.84-1.03 1.61-2.1.71-1.13 1.35-2.29.57-1.21 1.07-2.45.41-1.27.75-2.57.26-1.32.44-2.66.1-1.34.11-2.69-.06-1.35-.22-2.7-.23-1.34-.55-2.66-.4-1.3-.87-2.58-.56-1.25-1.2-2.47-.7-1.17-1.48-2.3-.85-1.09-1.77-2.12-.98-.97-2.02-1.89-1.09-.85-2.24-1.63-1.2-.72-2.44-1.35-1.28-.57-2.59-1.05-1.34-.4-2.71-.72-1.38-.24-2.78-.39-1.41-.07-2.83-.04-1.41.1-2.81.3-1.39.28-2.77.65-1.35.45-2.67.98-1.29.62-2.55 1.31-1.21.78-2.37 1.62-1.11.92-2.16 1.91-.99 1.04-1.92 2.16-.86 1.16-1.65 2.38-.71 1.27-1.34 2.58-.56 1.35-1.02 2.73-.39 1.42-.69 2.85-.21 1.46-.33 2.92-.03 1.47.03 2.95.15 1.47.4 2.93.33 1.44.75 2.87.5 1.4 1.1 2.76.67 1.33 1.43 2.62.84 1.24 1.75 2.43.99 1.13 2.05 2.21 1.12 1 2.3 1.94 1.24.86 2.53 1.65 1.34.71 2.73 1.34 1.42.54 2.87.99 1.49.36 2.99.63 1.52.18 3.05.27 1.54-.01 3.07-.11 1.53-.2 3.04-.49 1.5-.38 2.97-.86 1.44-.56 2.85-1.22 1.37-.74 2.69-1.56 1.27-.91 2.48-1.89 1.16-1.06 2.24-2.18 1.02-1.2 1.97-2.45.86-1.32 1.65-2.68.7-1.42 1.31-2.87.53-1.5.96-3.02.34-1.56.58-3.13.15-1.58.2-3.18-.05-1.6-.2-3.19-.24-1.58-.59-3.15-.43-1.55-.97-3.07-.62-1.48-1.34-2.93-.81-1.4-1.7-2.75-.97-1.3-2.03-2.53-1.13-1.17-2.33-2.27-1.27-1.03-2.6-1.98-1.39-.86-2.83-1.64-1.48-.69-3.01-1.29-1.57-.51-3.17-.92-1.62-.31-3.26-.52-1.65-.11-3.31-.12-1.65.09-3.3.29-1.64.3-3.26.69-1.6.5-3.16 1.09-1.52.69-3.01 1.48-1.43.87-2.81 1.83-1.32 1.05-2.58 2.17-1.18 1.21-2.29 2.48-1.03 1.35-1.98 2.75-.86 1.47-1.64 2.98-.67 1.56-1.25 3.17-.49 1.63-.87 3.3-.28 1.69-.46 3.4-.07 1.71-.03 3.43.14 1.72.39 3.43.35 1.69.8 3.36.56 1.64 1.21 3.24.76 1.57 1.61 3.08.94 1.47 1.98 2.87 1.12 1.34 2.32 2.61 1.28 1.2 2.63 2.32 1.42 1.03 2.9 1.98 1.54.85 3.13 1.61 1.63.66 3.31 1.22 1.71.46 3.45.81 1.76.25 3.53.39 1.78.02 3.56-.06 1.77-.19 3.53-.49 1.75-.4 3.46-.92 1.69-.62 3.33-1.34 1.6-.82 3.15-1.75 1.49-1.01 2.92-2.12 1.36-1.19 2.64-2.47 1.21-1.35 2.33-2.78 1.03-1.5 1.97-3.06.85-1.61 1.59-3.28.64-1.71 1.18-3.46.43-1.78.75-3.59.2-1.82.3-3.66-.02-1.84-.15-3.68-.24-1.83-.6-3.65-.46-1.79-1.04-3.55-.69-1.73-1.48-3.41-.89-1.63-1.88-3.21-1.09-1.51-2.27-2.96-1.27-1.38-2.63-2.67-1.43-1.21-2.94-2.33-1.57-1.03-3.21-1.96-1.69-.84-3.43-1.56-1.79-.62-3.61-1.13-1.85-.4-3.73-.68-1.89-.17-3.79-.22-1.9.07-3.8.25-1.89.3-3.75.72-1.84.53-3.65 1.17-1.76.75-3.48 1.61-1.67.97-3.27 2.03-1.54 1.17-3 2.43-1.39 1.35-2.69 2.78-1.21 1.51-2.33 3.09-1.02 1.65-1.94 3.37-.82 1.77-1.52 3.59-.59 1.86-1.07 3.75-.36 1.92-.61 3.87-.12 1.96-.12 3.92.12 1.96.35 3.92.36 1.94.84 3.85.59 1.89 1.3 3.74.83 1.8 1.76 3.55 1.04 1.69 2.18 3.32 1.24 1.55 2.58 3.03 1.43 1.4 2.94 2.7 1.59 1.22 3.25 2.33 1.73 1.01 3.52 1.92 1.85.79 3.75 1.47 1.93.56 3.9 1.01 1.99.32 4 .52 2.03.08 4.05.03 2.02-.18 4.03-.47 1.99-.42 3.96-.96 1.92-.66 3.81-1.44 1.84-.9 3.62-1.91 1.71-1.11 3.36-2.33 1.57-1.32 3.06-2.74 1.4-1.51 2.71-3.1 1.21-1.67 2.32-3.41 1-1.81 1.88-3.68.77-1.93 1.42-3.9.53-2.01.94-4.04.28-2.07.43-4.15.03-2.08-.07-4.17-.23-2.08-.59-4.14-.48-2.04-1.09-4.05-.73-1.97-1.59-3.89-.96-1.87-2.05-3.68-1.19-1.74-2.49-3.4-1.4-1.59-2.9-3.09-1.59-1.4-3.26-2.71-1.75-1.2-3.58-2.29-1.89-.98-3.84-1.85-2-.74-4.04-1.36-2.09-.49-4.2-.86S77.14 40.1 75 40s-2.15.03-4.29.19-2.14.29-4.25.71-2.09.55-4.14 1.23-2.01.8-3.97 1.73-1.9 1.04-3.73 2.21-1.76 1.27-3.44 2.65-1.59 1.48-3.1 3.06-1.4 1.67-2.7 3.43-1.19 1.83-2.27 3.74-.96 1.97-1.8 4-.71 2.07-1.3 4.19-.45 2.16-.77 4.34-.19 2.2-.24 4.4.08 2.21.3 4.42.35 2.18.84 4.35.62 2.13 1.37 4.22.88 2.05 1.88 4.04 1.13 1.92 2.37 3.78 1.35 1.77 2.82 3.47 1.56 1.6 3.22 3.1 1.76 1.4 3.6 2.7 1.91 1.17 3.9 2.23 2.05.94 4.16 1.75 2.15.68 4.35 1.23 2.22.41 4.47.68 2.27.14 4.54.14 2.27-.15 4.52-.43 2.24-.42 4.45-.97 2.18-.7 4.31-1.52 2.08-.96 4.1-2.04 1.95-1.2 3.82-2.53 1.79-1.44 3.5-2.98 1.6-1.65 3.1-3.4 1.4-1.84 2.68-3.76 1.16-2 2.2-4.07.91-2.13 1.68-4.31.65-2.23 1.15-4.5.37-2.3.59-4.62.08-2.33.02-4.66-.2-2.33-.55-4.64-.49-2.29-1.12-4.54-.76-2.22-1.66-4.39-1.04-2.11-2.2-4.15-1.29-1.97-2.7-3.86-1.52-1.81-3.15-3.51-1.74-1.61-3.57-3.11-1.92-1.38-3.93-2.65-2.08-1.14-4.23-2.15-2.21-.88-4.47-1.62-2.31-.6-4.65-1.07-2.37-.31-4.75-.48-2.4-.03-4.79.1-2.38.26-4.75.68-2.33.56-4.63 1.26-2.26.85-4.46 1.83-2.14 1.11-4.21 2.36-1.99 1.37-3.89 2.87-1.81 1.6-3.52 3.32-1.6 1.82-3.09 3.74-1.37 2.01-2.62 4.1-1.12 2.17-2.1 4.4-.85 2.29-1.55 4.63-.56 2.38-.97 4.79-.27 2.44-.38 4.89.04 2.46.22 4.91.34 2.43.83 4.85.63 2.38 1.41 4.72.92 2.29 1.99 4.52 1.2 2.17 2.53 4.26 1.46 2 3.03 3.92 1.7 1.81 3.51 3.52 1.9 1.6 3.91 3.08 2.09 1.35 4.27 2.58 2.25 1.09 4.56 2.04 2.37.81 4.79 1.47 2.45.51 4.94.87 2.5.21 5.02.26 2.51-.1 5.02-.35 2.49-.41 4.95-.97 2.43-.71 4.81-1.57 2.32-1 4.58-2.15 2.19-1.29 4.3-2.7 2.01-1.55 3.94-3.22 1.81-1.78 3.52-3.67 1.59-2 3.05-4.09 1.33-2.18 2.53-4.44 1.06-2.33 1.98-4.73.76-2.45 1.38-4.94.46-2.53.77-5.08.15-2.57.14-5.15-.17-2.58-.49-5.14-.48-2.54-1.12-5.05-.79-2.46-1.73-4.88-1.09-2.35-2.32-4.64-1.37-2.21-2.88-4.33-1.63-2.03-3.39-3.95-1.87-1.82-3.85-3.52-2.09-1.57-4.27-3.02-2.27-1.31-4.61-2.48-2.42-1.02-4.89-1.9-2.53-.72-5.1-1.29-2.6-.41-5.22-.66-2.64-.08-5.28-.01-2.63.24-5.24.63-2.59.56-5.14 1.28-2.51.87-4.96 1.89-2.38 1.18-4.69 2.5-2.22 1.46-4.36 3.05-2.03 1.73-3.96 3.57-1.81 1.97-3.49 4.04-1.56 2.18-2.99 4.44-1.28 2.36-2.42 4.79-.99 2.49-1.82 5.05-.68 2.6-1.19 5.25-.35 2.67-.54 5.36-.02 2.7.12 5.4.31 2.69.78 5.35.64 2.63 1.44 5.23.95 2.54 2.06 5.02 1.26 2.4 2.67 4.73 1.55 2.24 3.24 4.39 1.82 2.03 3.75 3.96 2.06 1.8 4.22 3.47 2.27 1.54 4.62 2.94 2.44 1.25 4.96 2.36 2.58.94 5.21 1.73 2.68.62 5.4 1.08 2.74.3 5.5.42 2.76-.05 5.52-.26 2.74-.39 5.45-.94 2.68-.72 5.31-1.6 2.57-1.04 5.08-2.24 2.43-1.35 4.78-2.85 2.25-1.64 4.39-3.42 2.04-1.91 3.96-3.94 1.79-2.15 3.45-4.4 1.51-2.36 2.88-4.8 1.22-2.53 2.29-5.13.9-2.66 1.64-5.37.57-2.76.97-5.55.23-2.81.28-5.63-.12-2.82-.41-5.63-.46-2.79-1.09-5.55-.8-2.72-1.77-5.39-1.13-2.6-2.42-5.14-1.44-2.45-3.04-4.8-1.73-2.26-3.6-4.41-2.01-2.04-4.13-3.94-2.24-1.78-4.59-3.41-2.44-1.49-4.98-2.83-2.61-1.18-5.29-2.2-2.74-.86-5.54-1.54-2.83-.52-5.69-.86-2.87-.16-5.76-.14-2.88.19-5.74.55-2.84.55-5.65 1.26-2.75.89-5.45 1.95-2.64 1.22-5.19 2.6-2.47 1.54-4.84 3.23-2.26 1.83-4.41 3.79-2.02 2.1-3.92 4.32-1.75 2.33-3.37 4.77-1.46 2.53-2.76 5.16-1.14 2.69-2.11 5.46-.81 2.82-1.44 5.69-.45 2.91-.72 5.84-.09 2.94-.01 5.88.27 2.94.72 5.86.63 2.89 1.43 5.73.98 2.79 2.12 5.52 1.32 2.66 2.79 5.23 1.64 2.48 3.42 4.86 1.92 2.26 3.99 4.41 2.19 2.01 4.5 3.89 2.43 1.74 4.96 3.32 2.62 1.43 5.33 2.69 2.79 1.1 5.64 2.02 2.9.75 5.84 1.32 2.98.38 5.98.59 3 .02 6.01-.14 2.99-.35 5.96-.88 2.93-.72 5.81-1.61 2.83-1.07 5.58-2.31 2.68-1.41 5.27-2.98 2.49-1.72 4.87-3.6 2.26-2.03 4.4-4.19 2-2.29 3.86-4.69 1.71-2.52 3.26-5.15 1.39-2.71 2.61-5.51 1.05-2.87 1.92-5.8.69-2.98 1.2-6 .32-3.05.45-6.11-.06-3.07-.3-6.13-.43-3.04-1.05-6.06-.8-2.97-1.78-5.89-1.16-2.86-2.5-5.64-1.5-2.69-3.17-5.3-1.83-2.49-3.81-4.87-2.12-2.26-4.37-4.38-2.39-1.99-4.89-3.82-2.62-1.68-5.33-3.2-2.81-1.35-5.69-2.52-2.96-1-5.97-1.81-3.05-.63-6.15-1.07-3.11-.25-6.24-.31-3.13.13-6.25.46-3.09.52-6.15 1.22-3.01.89-5.96 1.97-2.89 1.26-5.69 2.69-2.71 1.6-5.32 3.37-2.5 1.93-4.88 4-2.25 2.22-4.36 4.58-1.96 2.48-3.77 5.08-1.65 2.71-3.12 5.52-1.31 2.89-2.43 5.86-.94 3.04-1.7 6.13-.56 3.13-.93 6.3-.18 3.18-.16 6.37.22 3.19.63 6.36.6 3.14 1.4 6.24.99 3.05 2.16 6.03 1.35 2.91 2.88 5.73 1.71 2.72 3.57 5.34 2.03 2.5 4.21 4.87 2.32 2.24 4.77 4.33 2.58 1.94 5.28 3.71 2.8 1.61 5.7 3.05 2.98 1.26 6.04 2.33 3.12.88 6.29 1.57 3.21.5 6.44.79 3.25.1 6.5 0 3.24-.3 6.46-.8 3.19-.69 6.33-1.58 3.08-1.08 6.09-2.35 2.93-1.46 5.77-3.09 2.73-1.8 5.35-3.77 2.5-2.13 4.86-4.41 2.22-2.42 4.29-4.97 1.91-2.68 3.65-5.48 1.57-2.89 2.96-5.88 1.2-3.07 2.22-6.21.82-3.2 1.44-6.45.43-3.28.65-6.59.02-3.31-.17-6.62-.39-3.29-.97-6.56-.79-3.23-1.78-6.41-1.18-3.11-2.55-6.14-1.56-2.95-3.29-5.8-1.91-2.74-3.98-5.36-2.23-2.49-4.61-4.83-2.52-2.21-5.18-4.25-2.77-1.88-5.66-3.58-2.99-1.53-6.07-2.87-3.16-1.15-6.38-2.1-3.28-.76-6.61-1.31-3.35-.35-6.72-.49-3.38.06-6.74.34-3.35.47-6.66 1.16-3.27.88-6.48 1.97-3.14 1.28-6.19 2.75-2.97 1.66-5.82 3.49-2.75 2.01-5.36 4.19-2.48 2.33-4.81 4.82-2.18 2.62-4.19 5.38-1.84 2.87-3.51 5.86-1.47 3.08-2.76 6.25-1.09 3.24-1.98 6.55-.69 3.36-1.17 6.76-.27 3.42-.33 6.85.15 3.44.51 6.86.57 3.4 1.35 6.75.99 3.31 2.17 6.55 1.38 3.16 2.96 6.23 1.76 2.98 3.7 5.84 2.12 2.74 4.4 5.35 2.44 2.46 5.03 4.77 2.72 2.15 5.58 4.13 2.97 1.81 6.05 3.42 3.17 1.43 6.43 2.66 3.33 1.03 6.72 1.85 3.44.62 6.91 1.02 3.49.19 6.99.16 3.49-.24 6.96-.69 3.44-.67 6.84-1.54 3.34-1.09 6.61-2.38 3.18-1.48 6.27-3.16 2.98-1.87 5.85-3.92 2.73-2.22 5.33-4.61 2.44-2.55 4.73-5.24 2.12-2.82 4.06-5.78 1.76-3.07 3.33-6.24 1.37-3.27 2.54-6.62.97-3.41 1.72-6.88.54-3.51.86-7.06.1-3.55-.01-7.11-.33-3.55-.88-7.07-.77-3.48-1.74-6.92-1.19-3.37-2.58-6.66-1.6-3.2-3.38-6.3-1.98-2.99-4.14-5.85-2.33-2.73-4.82-5.31-2.65-2.42-5.45-4.68-2.93-2.09-5.98-3.99-3.17-1.71-6.44-3.23-3.36-1.31-6.79-2.42-3.5-.89-7.05-1.57-3.58-.46-7.19-.7-3.62-.01-7.24.19-3.6.43-7.17 1.08-3.52.86-6.99 1.94-3.4 1.3-6.71 2.79-3.22 1.71-6.33 3.6-2.99 2.09-5.84 4.35-2.72 2.44-5.28 5.04-2.4 2.76-4.63 5.66-2.04 3.03-3.9 6.18-1.66 3.27-3.12 6.63-1.25 3.45-2.29 6.97-.82 3.58-1.42 7.2-.38 3.66-.53 7.34.07 3.68.37 7.35.53 3.65 1.28 7.27.97 3.56 2.15 7.06 1.4 3.42 3.01 6.75 1.81 3.23 3.82 6.34 2.19 2.99 4.57 5.84 2.54 2.7 5.25 5.24 2.86 2.37 5.87 4.56 3.13 2 6.39 3.81 3.36 1.61 6.81 3.01 3.54 1.18 7.15 2.15 3.66.75 7.36 1.26 3.73.3 7.47.36 3.74-.17 7.46-.57 3.7-.62 7.36-1.47 3.59-1.08 7.12-2.37 3.44-1.51 6.79-3.23 3.24-1.92 6.35-4.04 2.98-2.3 5.82-4.79 2.68-2.66 5.19-5.48 2.34-2.96 4.49-6.07 1.96-3.24 3.71-6.59 1.55-3.46 2.89-7.01 1.11-3.62 2.01-7.31.66-3.74 1.1-7.51.2-3.8.17-7.6-.27-3.8-.77-7.58-.72-3.74-1.68-7.43-1.18-3.63-2.59-7.18-1.62-3.46-3.45-6.82-2.03-3.24-4.26-6.35-2.42-2.98-5.02-5.79-2.76-2.66-5.69-5.14-3.08-2.3-6.29-4.41-3.34-1.91-6.79-3.61-3.55-1.49-7.19-2.76-3.71-1.04-7.48-1.85-3.81-.59-7.66-.93-3.86-.11-7.73.01-3.85.37-7.68.97-3.78.83-7.51 1.9-3.65 1.29-7.23 2.8-3.47 1.74-6.84 3.68-3.24 2.15-6.34 4.49S31.8 28.49 29 31.2s-2.63 2.88-5.08 5.92-2.26 3.18-4.32 6.5-1.86 3.44-3.5 6.98-1.42 3.65-2.62 7.38-.96 3.79-1.69 7.64-.5 3.89-.76 7.81-.01 3.93.22 7.85.46 3.9 1.17 7.77.94 3.83 2.12 7.58 1.4 3.69 3.03 7.28 1.85 3.49 3.9 6.85 2.27 3.24 4.73 6.34 2.64 2.94 5.46 5.71 2.99 2.6 6.14 5.01 3.29 2.22 6.71 4.23 3.54 1.8 7.18 3.38 3.74 1.35 7.55 2.47 3.88.89 7.81 1.53 3.97.41 7.95.57 3.99-.08 7.97-.41 3.95-.57 7.86-1.39 3.86-1.05 7.65-2.34 3.7-1.52 7.31-3.26 3.49-1.96 6.86-4.14 3.23-2.38 6.32-4.95 2.92-2.76 5.66-5.7 2.57-3.1 4.94-6.35 2.16-3.4 4.12-6.92 1.73-3.64 3.25-7.38 1.28-3.83 2.32-7.73.8-3.96 1.36-7.97.31-4.03.38-8.08-.19-4.05-.62-8.08-.68-4-1.61-7.95-1.16-3.89-2.56-7.7-1.64-3.73-3.5-7.34-2.08-3.5-4.37-6.87-2.5-3.22-5.19-6.28-2.87-2.9-5.92-5.61-3.21-2.53-6.58-4.85-3.5-2.12-7.12-4.01-3.74-1.68-7.58-3.12-3.92-1.2-7.9-2.16-4.04-.72-8.12-1.18-4.11-.22-8.22-.18-4.1.29-8.18.83-4.05.79-8.03 1.83-3.92 1.28-7.76 2.8-3.74 1.75-7.36 3.73-3.5 2.2-6.86 4.61-3.21 2.61-6.25 5.42-2.87 2.99-5.54 6.15-2.49 3.33-4.76 6.8-2.06 3.6-3.89 7.33-1.61 3.84-2.97 7.77-1.13 4-2 8.07-.63 4.12-1 8.27-.11 4.17.03 8.35.39 4.15 1.04 8.28.91 4.08 2.06 8.1 1.4 3.95 3.03 7.8 1.88 3.75 3.98 7.38 2.32 3.5 4.85 6.85 2.73 3.19 5.66 6.2 3.1 2.84 6.38 5.48 3.43 2.43 7.01 4.65 3.71 2 7.54 3.77 3.93 1.53 7.95 2.81 4.1 1.04 8.25 1.83 4.19.53 8.42.8 4.23.02 8.46-.23 4.21-.51 8.38-1.27 4.12-1.02 8.17-2.29 3.97-1.51 7.84-3.27 3.75-2 7.38-4.22 3.49-2.44 6.82-5.09 3.17-2.85 6.16-5.9 2.8-3.22 5.39-6.61 2.39-3.54 4.55-7.23 1.93-3.81 3.63-7.74 1.46-4.03 2.66-8.14.95-4.18 1.65-8.41.43-4.27.6-8.56-.09-4.29-.45-8.58-.62-4.25-1.5-8.47-1.13-4.15-2.52-8.23-1.64-3.98-3.52-7.87-2.12-3.76-4.46-7.38-2.56-3.48-5.34-6.79-2.97-3.14-6.13-6.1-3.34-2.75-6.84-5.3-3.66-2.33-7.45-4.43-3.92-1.87-7.94-3.49-4.13-1.38-8.32-2.5S86.26 5 81.95 4.4s-4.34-.33-8.69-.39-4.36.2-8.69.67-4.3.73-8.55 1.73-4.19 1.25-8.29 2.76-4 1.76-7.89 3.77-3.76 2.24-7.38 4.71-3.46 2.68-6.75 5.58-3.11 3.09-6.03 6.37-2.71 3.46-5.21 7.07-2.27 3.77-4.3 7.67-1.8 4.02-3.34 8.14-1.29 4.21-2.32 8.5-.77 4.34-1.27 8.73-.23 4.41-.18 8.82.31 4.41.89 8.8.85 4.34 1.97 8.62 1.38 4.22 3.01 8.34 1.89 4.01 4.02 7.9 2.36 3.76 4.96 7.37 2.81 3.44 5.82 6.71 3.22 3.07 6.62 5.95 3.57 2.66 7.3 5.1 3.87 2.21 7.88 4.17 4.11 1.72 8.33 3.19 4.31 1.2 8.68 2.14 4.42.67 8.88 1.06 4.48.12 8.95-.03 4.47-.43 8.9-1.13 4.38-.97 8.69-2.21 4.24-1.5 8.37-3.26 4.02-2.02 7.92-4.27 3.75-2.49 7.34-5.21 3.42-2.94 6.65-6.08 3.04-3.33 5.87-6.85 2.61-3.69 4.99-7.53 2.14-3.98 4.04-8.09 1.64-4.22 3.01-8.53 1.12-4.39 1.96-8.85.56-4.5.85-9.02.01-4.54-.25-9.08-.55-4.51-1.37-8.98-1.1-4.42-2.46-8.76-1.63-4.26-3.52-8.4-2.14-4.03-4.52-7.92-2.62-3.74-5.46-7.31-3.06-3.39-6.33-6.59-3.45-3-7.09-5.78-3.8-2.55-7.75-4.87-4.09-2.07-8.3-3.89-4.32-1.55-8.72-2.84-4.48-1.02-9.02-1.76S79.6.18 75 0s-4.6.1-9.19.49-4.56.66-9.07 1.61-4.45 1.22-8.82 2.71-4.27 1.75-8.42 3.77-4.03 2.27-7.91 4.78-3.72 2.75-7.27 5.72-3.36 3.19-6.52 6.57-2.95 3.58-5.68 7.34-2.49 3.91-4.74 7.97-2 4.2-3.73 8.51-1.47 4.41-2.67 8.91-.91 4.56-1.55 9.18-.36 4.64-.42 9.31.22 4.66.72 9.3.79 4.6 1.86 9.15 1.34 4.47 2.96 8.86 1.89 4.28 4.04 8.44 2.4 4.02 5.04 7.9 2.88 3.7 5.98 7.22 3.31 3.33 6.82 6.44 3.7 2.9 7.57 5.57 4.03 2.43 8.2 4.6 4.3 1.92 8.71 3.57 4.51 1.38 9.09 2.48 4.65.81 9.34 1.34 4.72.25 9.44.2 4.71-.34 9.4-.97 4.65-.91 9.23-2.11 4.5-1.47 8.9-3.22 4.29-2.02 8.45-4.3 4.02-2.53 7.87-5.3 3.68-3.01 7.17-6.24 3.29-3.44 6.36-7.07 2.84-3.82 5.45-7.81 2.36-4.14 4.46-8.42 1.83-4.4 3.39-8.91 1.28-4.6 2.28-9.27.71-4.73 1.13-9.49.13-4.79-.03-9.57-.46-4.77-1.22-9.5-1.04-4.68-2.36-9.29-1.61-4.52-3.49-8.94-2.16-4.29-4.57-8.45-2.66-4.01-5.57-7.84-3.13-3.65-6.49-7.1-3.56-3.25-7.32-6.27-3.94-2.78-8.04-5.32-4.26-2.29-8.64-4.31S100.63.5 96.02-.97s-4.69-1.19-9.44-2.08-4.81-.6-9.64-.91-4.85-.01-9.69.28-4.82.58-9.59 1.46-4.71 1.17-9.35 2.63-4.54 1.74-8.96 3.76S35.05 6.46 30.9 9s-3.99 2.8-7.8 5.84-3.62 3.26-7.03 6.75-3.19 3.69-6.16 7.57-2.72 4.06-5.19 8.28-2.2 4.36-4.14 8.85-1.66 4.61-3.03 9.31-1.08 4.78-1.87 9.62S-4.81 70.1-5 75" />
</defs>
<g>
<text font-size="0.18em">
<textPath xlink:href="#spiral" startOffset="10">
</textPath>
</text>
</g>
</svg>
</div>
<div class='spinner'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span><span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
Raw
script.js
(function mainClock() {
const BASE_COUNT = 125;
const BASE_OFFSET = 10;
const DISPLAY_INTERVAL = 20;
const TOUR_DURATION = 60;
const GAP = 11.5;
const svg = document.querySelector("svg");
svg.style.animationDelay = `${BASE_COUNT * DISPLAY_INTERVAL + 1000}ms`;
const svgTexts = document.querySelector("svg g");
const now = new Date();
now.setMinutes(now.getMinutes() - BASE_COUNT);
const texts = Array.from({ length: BASE_COUNT }, () =>
document.querySelector("text").cloneNode(true)
);
texts.forEach((text, i) => {
console.log(now);
setTimeout(() => {
// text.setAttribute("font-size", `${0.2 + 0.0015 * i}em`);
now.setMinutes(now.getMinutes() + 1);
text.firstElementChild.textContent = now
.toLocaleTimeString("fr-FR", { hour: "numeric", minute: "numeric" })
.replace(":", "h");
text.firstElementChild.setAttribute(
"startOffset",
(i + 1) * GAP + BASE_OFFSET
);
svgTexts.appendChild(text);
}, i * DISPLAY_INTERVAL);
});
setTimeout(() => {
setInterval(() => {
const text = document.querySelector("text").cloneNode(true);
text.firstElementChild.textContent = new Date()
.toLocaleTimeString("fr-FR", { hour: "numeric", minute: "numeric" })
.replace(":", "h");
text.firstElementChild.setAttribute(
"startOffset",
svgTexts.children.length * GAP + BASE_OFFSET
);
svgTexts.appendChild(text);
}, TOUR_DURATION * 1000);
}, BASE_COUNT * DISPLAY_INTERVAL + 1000);
})();
Raw
style.scss
@import "compass/css3";
// Variables à adapter
$background: #111;
$spiral-squares-radius: 30px;
$spiral-squares-count: 60;
$spiral-border: 2px solid blue;
$spiral-background-color: radial-gradient(
circle,
rgba(131, 58, 180, 1) 0%,
rgba(250, 59, 59, 1) 50%,
rgba(252, 176, 69, 1) 100%
);
$spiral-opacity: 0.5;
$spiral-end-scale: 0.6;
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
background: $background;
}
.clock {
height: 100vh;
&,
&__wrapper {
display: flex;
align-items: center;
justify-content: center;
}
svg {
height: 100%;
animation: rotate 60s linear infinite;
text {
font-family: sans-serif;
fill: lightgray;
user-select: none;
animation: fade-in 0.5s linear;
}
}
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: grid;
animation-name: rotate 10s reverse infinite ease;
span {
grid-area: 1/1;
box-shadow: 0px 0px 38px 4px rgba(0, 0, 0, 0.43);
background: rgb(131, 58, 180);
background: $spiral-background-color;
border: $spiral-border;
border-radius: $spiral-squares-radius;
opacity: $spiral-opacity;
animation: spin 5s infinite ease;
@for $i from 1 through $spiral-squares-count {
&:nth-child(#{$i}) {
$angle: $i / $spiral-squares-count * 360;
width: ($i * 12) + px;
height: ($i * 12) + px;
margin-top: -($i * 12) / 2 + px;
margin-left: -($i * 12) / 2 + px;
z-index: $spiral-squares-count - $i;
transform: rotateZ(#{$angle}deg) scale(0.2);
animation-delay: $i * (2s / $spiral-squares-count);
}
}
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes rotate {
100% {
transform: rotateZ(1turn);
}
}
@keyframes spin {
50% {
transform: rotateZ(100deg) scale($spiral-end-scale);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment