daydream

A small matrix web client written in rust
git clone git://archive.git.mtrnord.blog/daydream-mx/daydream.git
Log | Files | Refs | README | LICENSE

sun-loading-animation.scss (1298B)

      1 .sun-animation {
      2   $c: #f4c042;
      3   $t: 5s;
      4 
      5   svg {
      6     width: 400px;
      7     height: 300px;
      8   }
      9 
     10   svg * {
     11     stroke: $c;
     12     stroke-linecap: round;
     13     vector-effect: non-scaling-stroke;
     14   }
     15 
     16   [id='line'] {
     17     stroke-width: 3;
     18   }
     19 
     20   svg text {
     21     font: .875em century gothic, verdana, sans-serif;
     22   }
     23 
     24   [id='mover'] {
     25     animation: sun-motion $t cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
     26   }
     27 
     28   [id='main'] {
     29     fill: transparent;
     30     stroke-width: 7;
     31   }
     32 
     33   [id='eyes'] {
     34     animation: eye-motion $t ease-out infinite;
     35 
     36     circle {
     37       fill: $c;
     38     }
     39   }
     40 
     41   [id='ray'] {
     42     stroke-width: 4;
     43   }
     44 
     45   [id='rays'] {
     46     animation: rot $t linear infinite;
     47   }
     48 
     49   @keyframes rot {
     50     to {
     51       transform: rotate(.25turn);
     52     }
     53   }
     54 
     55   @keyframes eye-motion {
     56     0%, 20%, 49%, 100% {
     57       transform: translate(-13px);
     58     }
     59     21%, 25%, 29%, 47% {
     60       transform: translate(13px) scaleY(1);
     61     }
     62     27% {
     63       transform: translate(13px) scaleY(0);
     64     }
     65     48% {
     66       transform: translate(0);
     67     }
     68   }
     69 
     70   @keyframes sun-motion {
     71     0%, 99%, 100% {
     72       transform: translateY(-16px);
     73     }
     74     50% {
     75       transform: translateY(-29px);
     76     }
     77     52%, 98% {
     78       transform: translate(4px) scaleY(1.25);
     79     }
     80     53%, 97% {
     81       transform: translateY(23px);
     82     }
     83   }
     84 
     85 }