What do you think about logo? (#29)

fullstackPrincess · sergeysova · commit a032b31411e7 · 2019-07-27T10:17:21.000+03:00
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
 # redux-symbiote [![Build Status](https://travis-ci.org/sergeysova/redux-symbiote.svg?branch=master)](https://travis-ci.org/sergeysova/redux-symbiote) [![Coverage Status](https://coveralls.io/repos/github/sergeysova/redux-symbiote/badge.svg?branch=master)](https://coveralls.io/github/sergeysova/redux-symbiote?branch=master)
 [![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors)
 
+<img src="https://raw.githubusercontent.com/RusTorg/redux-symbiote/master/assets/logo.svg?sanitize=true" width="80" />
+
+
+
 Write your actions and reducers without pain
 
 ## Usage
diff --git a/assets/logo.svg b/assets/logo.svg
@@ -0,0 +1,225 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+  .st0{
+    fill:#764ABC;
+  }
+
+  .logo .dot1 {
+    animation: dot1 2s ease-out 1 normal;
+    animation-delay: 1.7s;
+    animation-fill-mode: forwards;
+  }
+  
+  .logo .dot2 {
+    animation: dot2 2s ease-out 1 normal;
+    animation-delay: 1.7s;
+    animation-fill-mode: forwards;
+  }
+  
+  .logo .dot3 {
+    animation: dot3 2s ease-out 1 normal;
+    animation-delay: 1.7s;
+    animation-fill-mode: forwards;
+  }
+  .st1 {
+    fill:none;
+    stroke:#764ABC;
+    stroke-width:5;
+    stroke-linejoin:bevel;
+    stroke-miterlimit:10;
+    stroke-dasharray: 100;
+  }
+  
+  .logo .st1 {
+    animation: dash 4s ease-in 1 normal;
+    animation-fill-mode: forwards;
+  }
+  
+  .logo {
+    animation: logo 5s ease-in-out 1 normal;
+    animation-fill-mode: forwards;
+    transform-origin: 50.1px 56px;
+  }
+  .logo2 {
+    animation: logo2 5s ease-in-out 1 normal;
+    animation-fill-mode: forwards;
+    transform-origin: 50.1px 56px;
+    opacity: 0;
+  }
+  
+  .st1.final {
+    stroke: #e74c3c!important;
+  }
+  
+  .st0.final {
+    fill: #e74c3c!important;
+  }
+  
+  
+  .logo2 .st1 {
+    animation: dash2 4s ease-in-out infinite alternate-reverse;
+  }
+     
+  @keyframes dash {
+    45% {
+      stroke-dashoffset: -100;
+    }
+    
+    79% {
+      stroke-dashoffset: -100;
+      stroke:#764ABC;
+    }
+    
+    90% {
+      stroke-dashoffset: 0;
+      stroke: #e74c3c;
+      stroke-dasharray: 100;
+    }
+    100% {
+      stroke: #e74c3c;
+      animation: blink 1s ease-in infinite normal;
+    }
+  }
+  
+  @keyframes dash2 {
+    0% {
+      stroke-dasharray: 100;
+    }
+    
+    20% {
+      stroke-dasharray: 20;
+    }
+    
+    40% {
+      stroke-dasharray: 16;
+    }
+    
+    60% {
+      stroke-dasharray: 12;
+    }
+    
+    80% {
+      stroke-dasharray: 8;
+    }
+    
+    100% {
+      stroke-dasharray: 5;
+    }
+    
+    
+  }
+  
+  @keyframes dot1 {
+    50% {
+      transform: translateX(5px) translateY(14px);
+      fill:#764ABC;
+    }
+    
+    60% {
+      fill:#e74c3c;
+    }
+    100% {
+      fill:#e74c3c;
+      transform: translateX(0) translateY(0);
+    }
+  }
+  
+  @keyframes dot2 {
+    50% {
+      transform: translateX(-15px) translateY(-4px);
+      fill:#764ABC;
+    }
+    60% {
+      fill:#e74c3c;
+    }
+    100% {
+      fill:#e74c3c;
+      transform: translateX(0) translateY(0);
+    }
+  }
+  
+  @keyframes dot3 {
+    50% {
+      transform: translateX(12px) translateY(-11px);
+      fill:#764ABC;
+    }
+    60% {
+      fill:#e74c3c;
+    }
+    100% {
+      fill:#e74c3c;
+      transform: translateX(0) translateY(0);
+    }
+  }
+  
+  
+  @keyframes logo {
+    
+    50% {
+      transform: rotate(300deg);
+    }
+    
+    75% {
+      transform: rotate(720deg);
+      opacity: 1;
+    }
+    
+    
+    76% {
+      transform: rotate(720deg);
+      opacity: 0;
+    }
+    
+    100% {
+      transform: rotate(720deg);
+      opacity: 0;
+    }
+  }
+  
+  
+  @keyframes logo2 {
+
+    74% {
+      opacity: 0;
+    }
+    
+    75% {
+      opacity: 1;
+    }
+    
+    100% {
+      opacity: 1;
+    }
+  }
+  </style>
+
+  <g class="logo">
+    <path class="st1" d="M67.8,36.2c-0.5-10.8-9.3-20.1-17.7-20.6c-4.3-0.3-9.4,1.6-13,5.1c-2.4,2.3-3.4,4.7-4.5,7.2
+      c-0.8,1.9-3.7,9.1-2.8,18.8c0.8,8.8,4.2,15.2,6.4,18.6"/>
+    <path class="st1" d="M22.9,51.1c-8.7,6.3-11.6,18.8-7.4,26.1c2.1,3.7,6.5,7,11.4,8.1c3.2,0.7,5.8,0.3,8.5-0.2
+      c2.1-0.4,9.7-1.9,17.3-8c6.9-5.5,10.4-11.9,12-15.6"/>
+    <path class="st1" d="M59.1,83.5c9.7,4.6,22.1,1.2,26.5-6c2.3-3.7,3-9.1,1.6-13.9c-0.9-3.2-2.5-5.2-4.3-7.4
+      c-1.3-1.6-6.3-7.6-15.3-11.3c-8.1-3.4-15.4-3.4-19.4-3.1"/>
+    <circle class="st0 dot1" cx="45.1" cy="41.8" r="5.6"/>
+      
+      
+    <circle class="st0 dot2" cx="65" cy="59.9" r="5.6"/>
+    <circle class="st0 dot3" cx="37.9" cy="66.9" r="5.6"/>
+  </g>
+  
+  
+  <g class="logo2">
+    <path class="st1 final" d="M67.8,36.2c-0.5-10.8-9.3-20.1-17.7-20.6c-4.3-0.3-9.4,1.6-13,5.1c-2.4,2.3-3.4,4.7-4.5,7.2
+      c-0.8,1.9-3.7,9.1-2.8,18.8c0.8,8.8,4.2,15.2,6.4,18.6"/>
+    <path class="st1 final" d="M22.9,51.1c-8.7,6.3-11.6,18.8-7.4,26.1c2.1,3.7,6.5,7,11.4,8.1c3.2,0.7,5.8,0.3,8.5-0.2
+      c2.1-0.4,9.7-1.9,17.3-8c6.9-5.5,10.4-11.9,12-15.6"/>
+    <path class="st1 final" d="M59.1,83.5c9.7,4.6,22.1,1.2,26.5-6c2.3-3.7,3-9.1,1.6-13.9c-0.9-3.2-2.5-5.2-4.3-7.4
+      c-1.3-1.6-6.3-7.6-15.3-11.3c-8.1-3.4-15.4-3.4-19.4-3.1"/>
+    <circle class="st0 dot1 final" cx="45.1" cy="41.8" r="5.6"/>
+      
+      
+    <circle class="st0 dot2 final" cx="65" cy="59.9" r="5.6"/>
+    <circle class="st0 dot3 final" cx="37.9" cy="66.9" r="5.6"/>
+  </g>
+</svg>
