/*
animation created with https://app.svgator.com/,
I just improved the code a little bit.
It definitly need cleaning and more improvements
*/
/* For the pen */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
svg {
height: 100%;
width: 100%;
margin: auto;
}
/* The interesting stuff */
@-webkit-keyframes Bk-FZDiGZFM_rJZcsfZKM_Animation {
0%,
22% {
-webkit-transform: translate(-180px,-1150px);
transform: translate(-180px,-1150px);
}
to {
-webkit-transform: translate(-180px,-500px);
transform: translate(-180px,-500px);
}
}
@keyframes Bk-FZDiGZFM_rJZcsfZKM_Animation {
0%,
22% {
-webkit-transform: translate(-180px,-1150px);
transform: translate(-180px,-1150px);
}
to {
-webkit-transform: translate(-180px,-500px);
transform: translate(-180px,-500px);
}
}
@-webkit-keyframes HJ_LZPsGbYf_HyAYjGZKG_Animation {
0%,
22% {
-webkit-transform: translate(180px,-1150px);
transform: translate(180px,-1150px);
}
to {
-webkit-transform: translate(180px,0);
transform: translate(180px,0);
}
}
@keyframes HJ_LZPsGbYf_HyAYjGZKG_Animation {
0%,
22% {
-webkit-transform: translate(180px,-1150px);
transform: translate(180px,-1150px);
}
to {
-webkit-transform: translate(180px,0);
transform: translate(180px,0);
}
}
@-webkit-keyframes H11EWwiGWKM_r1FtjG-Kz_Animation {
0% {
-webkit-transform: translate(-180px,-500px);
transform: translate(-180px,-500px);
}
to {
-webkit-transform: translate(-180px,1200px);
transform: translate(-180px,1300px);
}
}
@keyframes H11EWwiGWKM_r1FtjG-Kz_Animation {
0% {
-webkit-transform: translate(-180px,-500px);
transform: translate(-180px,-500px);
}
to {
-webkit-transform: translate(-180px,1200px);
transform: translate(-180px,1300px);
}
}
@-webkit-keyframes rkIZbPjfZFf_BkVYsMbFG_Animation {
0% {
-webkit-transform: translate(180px,0);
transform: translate(180px,0);
}
to {
-webkit-transform: translate(180px,1200px);
transform: translate(180px,1200px);
}
}
@keyframes rkIZbPjfZFf_BkVYsMbFG_Animation {
0% {
-webkit-transform: translate(180px,0);
transform: translate(180px,0);
}
to {
-webkit-transform: translate(180px,1200px);
transform: translate(180px,1200px);
}
}
#r1Ql-vjM-tz * {
-webkit-animation-duration: 11s;
animation-duration: 11s;
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
animation-timing-function: cubic-bezier(0,0,1,1);
transform-box: fill-box;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
animation-iteration-count: infinite;
}
#B1LxZviGWtM {
fill: #89bad5;
}
#SyDxbDozbFz {
opacity: 0.8;
}
#Bk_e-PoMWtz {
fill: #93c6df;
}
#r1FgZvozWKf {
fill: #9dd2eb;
}
#rkslZPoG-KM {
fill: #89bad5;
}
#B1Al-wsf-Ff {
fill: #c2e3f2;
}
#HkJ--vofZtf {
fill: #fff;
}
#HJHbWPif-KM,
#HJmbZDjf-Yz,
#SJ--bPjMbKf {
fill: #e0e0e0;
}
#rkIZbPjfZFf {
fill: #fff;
}
#BJ6-WPof-YM,
#Bk4MWvoGZYM,
#BkBfWvizZtz,
#BkPbZPjMZtG,
#BysZWDjG-tz,
#H1ZGbDozbFM,
#HJPzWPoGWFz,
#HJq-WwsMZtM,
#HyLMbPsMZtM,
#HytWZwsMZtf,
#S1kG-wsf-Ff,
#S1xGbDoMZKG,
#SJXMWDsG-Fz,
#Skh-ZvsMZKz,
#SyCZ-wizWKf,
#rJObbvjzbKG,
#rkfMZDjf-Kf {
opacity: 0.8;
}
#HJKGWvoz-YG,
#SJe7-vsM-YG,
#SkazZPsMZYf,
#SkhGWwoG-Kz,
#Skif-vszZtf,
#SyqzWvjf-tf,
#rkyX-DiG-Yf,
#ryAzbDozbYM,
#ryuGZPofbKf {
opacity: 0.3;
}
#H1-Q-DsGbFG,
#H1QXWPoMWtf,
#S14X-PjMZKG,
#rJzX-Djz-Yf {
opacity: 0.8;
}
#B18XbPjM-FG,
#H19Q-DifbKG,
#Hy3QbvjMbFG,
#SJ_7bvifbYM,
#Sk6m-vjM-Ff,
#SkHXWPjzbFM,
#r1sm-PszWKM,
#rktQWPjGbKM,
#ryDm-wofWFM {
opacity: 0.3;
}
#BJAQWvsMWFG {
opacity: 0.8;
}
#H11EWwiGWKM {
fill: #fff;
}
#B1GEbwszWKM,
#BJ6VWvjGWFG,
#BJ9E-wjGZYf,
#BJuE-vsG-Fz,
#H1e4WDoz-YM,
#HJ1SWPiGbtz,
#HJHVWvofbYG,
#Hk4N-PjGZYf,
#HymEZPjGZFG,
#Sy2VZDoGWFz,
#SyxSZDiMbKM,
#r1bVbvoGWYz,
#rJF4-PozbtG,
#ry0VZDiMWKM,
#ry84ZPszWKM,
#ryi4bDiGbFz,
#ryvEbPiMWtf {
opacity: 0.8;
}
#BJfBZvoMbYM,
#BkSrZwozWYf,
#ByIH-vsGbFz,
#S1mS-wjM-Fz,
#S1wrZwoMZKf,
#Sy-HbPsMWFz,
#rJ_rZvozZKG,
#ryEBZviMWtG,
#ryYr-DoGZYM {
opacity: 0.3;
}
#BJTBbDozZFG,
#Hk3HZwsz-Yz,
#SJsBZviMWYG,
#SycHZwiMbYf {
opacity: 0.8;
}
#B1CrbDiG-KM,
#BJEUZvoGZFG,
#BJkUWwoG-Fz,
#H1HL-PoMZKG,
#HJgL-PozZYG,
#HkXLWwsGZYz,
#SJUU-wsfZtG,
#SJWUbvof-YM,
#Skz8WvsGbtM {
opacity: 0.3;
}
#B1wLZPoM-Yf {
opacity: 0.8;
}
#HJ_LZPsGbYf {
fill: #fff;
}
#B1gDWDozZKM,
#BJtwbPjMWFG,
#BkVPWwoM-Yz,
#BykP-PozZKz,
#HkOP-PiMWYz,
#S1aU-PiMWYM,
#SJ-DWwiMZYz,
#SJ7PbvsMZtf,
#SJCIWPiGbFf,
#SJIwbwiMZKf,
#SJvwWvjzbKG,
#SkGP-woMbFM,
#SkrPZPsMZKG,
#SksI-voM-tG,
#rk3IWwjfWtf,
#ry58WwjfWYG,
#ryY8bvsfZKz {
opacity: 0.8;
}
#B10vZvjM-Yz,
#B1cDbDofZFz,
#By3P-Pjz-KG,
#BykdWwoMZYG,
#HyWOWwszbKf,
#HysvWDifbFf,
#r1GdbvsfWFG,
#rJaPWvjzbtM,
#ryxuZwoM-KG {
opacity: 0.3;
}
#B14u-viMbKM,
#S18dbvsG-YG,
#SJSdbwsfWFz,
#SJm_bPjG-Kf {
opacity: 0.8;
}
#B1JtWDiM-tf,
#B1tdbwof-tM,
#BkquZPifZYz,
#HyRdbDszbKG,
#Hy_uWPoGZKM,
#Ski_bwoGZtf,
#SynOZviG-KG,
#ryD_ZDiMbYM,
#ryadbwjGbYG {
opacity: 0.3;
}
#ByeK-vsf-Kz {
opacity: 0.8;
}
#Bk-FZDiGZFM {
fill: #fff;
}
#BJ-cZvsGZtz,
#BJLKZDsfbFM,
#BkDF-voGbtf,
#Bkpt-voGbFG,
#H1OYWPsz-Ff,
#HJM5bwjf-Kf,
#Hk7YWPszZYf,
#HyCKbwoz-tM,
#HyHKWvifZtG,
#Hyntbwsz-tM,
#SJstbvjG-tf,
#Sy4tZPoGZFz,
#r15YbPof-FG,
#rJKKWPofWKf,
#rkGKbDsz-tM,
#rkyc-DoG-Fz,
#ryg9ZvoGZtM {
opacity: 0.8;
}
#BkS9-PiMbKf,
#HkN5bDjfbtG,
#HyO5ZwjzWYM,
#SkX5bPjzWKz,
#r18cZPozZKz,
#r1icZPofZYf,
#rJ55WvjGZYz,
#rJKqZDsG-Kf,
#rkvqZDjGbFM {
opacity: 0.3;
}
#B1T5bwoMWYf,
#SkJjZDszbtf,
#Sy0cbwjGWFM,
#ryn9ZPjz-tG {
opacity: 0.8;
}
#BJejbviGWYM,
#Bk_oZwjz-KG,
#H1SobwsMZYz,
#H1woWvjGZtf,
#HJ8s-vif-KG,
#HJMsZDjMZtG,
#HymibDifZtf,
#r1VobPizZtM,
#rk-iZPsz-Fz {
opacity: 0.3;
}
#HyYsbDoMbtM {
opacity: 0.8;
}
#rkIZbPjfZFf_BkVYsMbFG {
-webkit-animation-name: rkIZbPjfZFf_BkVYsMbFG_Animation;
animation-name: rkIZbPjfZFf_BkVYsMbFG_Animation;
-webkit-transform-origin: undefined;
transform-origin: undefined;
}
#Bk-FZDiGZFM_rJZcsfZKM,
#H11EWwiGWKM_r1FtjG-Kz,
#HJ_LZPsGbYf_HyAYjGZKG {
-webkit-animation-name: H11EWwiGWKM_r1FtjG-Kz_Animation;
animation-name: H11EWwiGWKM_r1FtjG-Kz_Animation;
-webkit-transform-origin: undefined;
transform-origin: undefined;
}
#Bk-FZDiGZFM_rJZcsfZKM,
#HJ_LZPsGbYf_HyAYjGZKG {
-webkit-animation-name: HJ_LZPsGbYf_HyAYjGZKG_Animation;
animation-name: HJ_LZPsGbYf_HyAYjGZKG_Animation;
}
#Bk-FZDiGZFM_rJZcsfZKM {
-webkit-animation-name: Bk-FZDiGZFM_rJZcsfZKM_Animation;
animation-name: Bk-FZDiGZFM_rJZcsfZKM_Animation;
}
!
