6

Animated sunrise - with glow

 2 years ago
source link: https://codepen.io/simonflk/pen/mdpEzbP
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Animated sunrise

0 unsaved changes
xxxxxxxxxx
<!-- SVG originally from https://www.svgrepo.com/svg/243799/sun -->
<!-- with edits, to group, reorder and add IDs/classes -->
<svg id="wake-up-svg" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
  <circle cx="400" cy="400" r="379.505" fill="url(#radial-glow)" id="glow" />
  <g id="flares" fill="#f78a68">
    <path id="flare-1" d="m497.607 170.745.308 105.839c-22.963-18.257-51.156-30.219-81.966-33.322l74.068-75.594c2.77-2.834 7.578-.872 7.59 3.077Z" />
    <path id="flare-2" d="M627.922 299.367c3.962-.038 5.987 4.744 3.192 7.552l-74.606 75.017c-3.5-30.694-15.834-58.721-34.399-81.453l.013-.013 105.8-1.103Z" />
    <path id="flare-3" d="M632.332 490.017c2.821 2.769.872 7.577-3.09 7.59l-105.839.308c18.27-22.963 30.232-51.156 33.335-81.966l75.594 74.068Z" />
    <path id="flare-4" d="M500.62 627.922c.038 3.962-4.744 5.987-7.552 3.192l-75.004-74.606c30.694-3.5 58.721-15.834 81.453-34.386l1.103 105.8Z" />
    <path id="flare-5" d="m384.038 556.739-74.068 75.594c-2.769 2.821-7.577.872-7.59-3.09l-.308-105.851c22.963 18.269 51.156 30.244 81.966 33.347Z" />
    <path id="flare-6" d="m277.878 499.518-105.812 1.102c-3.962.038-5.975-4.744-3.18-7.552l74.606-75.017c3.5 30.708 15.821 58.722 34.386 81.467Z" />
    <path id="flare-7" d="m170.745 302.38 105.864-.308c-18.27 22.963-30.245 51.156-33.348 81.966l-75.593-74.068c-2.834-2.77-.872-7.577 3.077-7.59Z" />
    <path id="flare-8" d="m306.918 168.886 75.017 74.606c-30.707 3.5-58.734 15.834-81.466 34.399l-1.103-105.826c-.038-3.961 4.745-5.974 7.552-3.179Z" />
  </g>
  <path id="sun" d="M557.534 400c0 5.385-.269 10.706-.795 15.95-3.103 30.809-15.065 59.003-33.335 81.966a157.34 157.34 0 0 1-23.886 24.206c-22.732 18.552-50.759 30.886-81.453 34.386h-.013a160.015 160.015 0 0 1-34.014.231c-30.809-3.103-59.003-15.078-81.966-33.348a157.177 157.177 0 0 1-24.194-23.873c-18.565-22.745-30.886-50.759-34.386-81.466v-.013a160.024 160.024 0 0 1-.231-34.001c3.103-30.809 15.078-59.003 33.348-81.966a157.638 157.638 0 0 1 23.86-24.181c22.732-18.565 50.759-30.899 81.466-34.399h.013A158.27 158.27 0 0 1 400 242.466c5.385 0 10.706.269 15.95.795 30.809 3.103 59.003 15.065 81.966 33.322a157.39 157.39 0 0 1 24.194 23.899c18.565 22.732 30.899 50.759 34.399 81.453A158.956 158.956 0 0 1 557.534 400Z" fill="#f0c419" />

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK