remove circle

public/index.html

@@ -17,18 +17,17 @@
     <div id="root"></div>
     <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
       <defs>
+        <linearGradient id="boxGradientGrey" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
+          <stop offset="0%" stop-color="#dde0e6"></stop>
+          <stop offset="100%" stop-color="#dde0e6"></stop>
+        </linearGradient>
         <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
           <stop offset="0%" stop-color="#27FDC7"></stop>
           <stop offset="100%" stop-color="#0FC0F5"></stop>
         </linearGradient>
-        <linearGradient id="boxGradientInactive" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
-          <stop offset="0%" stop-color="#dde0e6"></stop>
-          <stop offset="100%" stop-color="#dde0e6"></stop>
-        </linearGradient>
-        <path id="todo__box__done" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
-        <path id="todo__box" stroke="url(#boxGradientInactive)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
         <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
-        <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
+        <path id="todo__box" stroke="url(#boxGradientGrey)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
+        <path id="todo__box__done" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
       </defs>
     </svg>
   </body>

src/App.css

@@ -127,34 +127,10 @@
   z-index: 1;
 }
 
-.todo__box,
-.todo__check {
-  /*transition: stroke-dashoffset 0.5s cubic-bezier(0.9, 0, 0.5, 1);*/
-}
 .todo__state:checked ~ .todo-list-title {
   text-decoration: line-through;
 }
-.todo__circle {
-  stroke: #27FDC7;
-  stroke-dasharray: 1 6;
-  stroke-width: 0;
-  transform-origin: 13.5px 12.5px;
-  transform: scale(0.4) rotate(0deg);
-  /*animation: none 0.5s linear;*/
-}
 
-@keyframes explode {
-  30% {
-    stroke-width: 3;
-    stroke-opacity: 1;
-    transform: scale(0.8) rotate(40deg);
-  }
-  100% {
-    stroke-width: 0;
-    stroke-opacity: 0;
-    transform: scale(1.1) rotate(60deg);
-  }
-}
 .todo__box {
   stroke-dasharray: 56.1053, 56.1053;
   stroke-dashoffset: 0;
@@ -167,11 +143,6 @@
   transition-duration: 0.25s;
 }
 
-.todo__circle {
-  animation-delay: 0.56s;
-  animation-duration: 0.56s;
-}
-
 .todo__state:checked ~ .todo__icon .todo__box {
   stroke-dashoffset: 56.1053;
   transition-delay: 0s;
@@ -184,10 +155,3 @@
   stroke-dashoffset: 0;
   transition-delay: 0s;
 }
-.todo__state:checked ~ .todo__icon .todo__circle {
-  /*animation-name: explode;*/
-}
-/* .todo-completed .todo__state:checked ~ .todo__icon .todo__circle {
-  animation-name: none;
-  animation: none;
-} */

src/App.js

@@ -196,7 +196,6 @@ class App extends Component {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" className="todo__icon">
               <use xlinkHref={`${icon}`} className="todo__box"></use>
               <use xlinkHref="#todo__check" className="todo__check"></use>
-              <use xlinkHref="#todo__circle" className="todo__circle"></use>
             </svg>
             <div className='todo-list-title'>
               <ContentEditable