Как нарисовать знак “Х” с помощью SVG и CSS?

345

13 февраля 2017, 15:52

Мне нужно создать анимацию знака "Х" для отказа от действий.

Я нашел отличный пример анимированного знака "V" для подтверждения успешных действий.
Этот символ сделан с помощью кода Кривой Безье . Я пробовал читать код и пытаюсь сделать знак "Х", но без успеха.
Можете ли вы, пожалуйста помочь мне ?
Ссылка для реализации знака "V" на кодепен.

.checkmark__circle { 
  stroke-dasharray: 166; 
  stroke-dashoffset: 166; 
  stroke-width: 2; 
  stroke-miterlimit: 10; 
  stroke: #7ac142; 
  fill: none; 
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
} 
.checkmark { 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  display: block; 
  stroke-width: 2; 
  stroke: #fff; 
  stroke-miterlimit: 10; 
  margin: 10% auto; 
  box-shadow: inset 0px 0px 0px #7ac142; 
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
} 
.checkmark__check { 
  transform-origin: 50% 50%; 
  stroke-dasharray: 48; 
  stroke-dashoffset: 48; 
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
} 
@keyframes stroke { 
  100% { 
    stroke-dashoffset: 0; 
  } 
} 
@keyframes scale { 
  0%, 100% { 
    transform: none; 
  } 
  50% { 
    transform: scale3d(1.1, 1.1, 1); 
  } 
} 
@keyframes fill { 
  100% { 
    box-shadow: inset 0px 0px 0px 30px #7ac142; 
  } 
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> 
  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" /> 
  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /> 
</svg>

Ассоциация с SOEN @EVH671

Answer 1

Вам просто нужно изменить определение пути (path), для формирования знака "X" и заменить pattern черточки и её смещение, чтобы компенсировать изменение длины пути.

С дополнительным элементом <Path>, и применяя некоторые дополнительные CSS свойства, вы можете нарисовать "X" за два преобразования.

.checkmark__circle { 
  stroke-dasharray: 166; 
  stroke-dashoffset: 166; 
  stroke-width: 2; 
  stroke-miterlimit: 10; 
  stroke: #7ac142; 
  fill: none; 
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
} 
.checkmark { 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  display: block; 
  stroke-width: 2; 
  stroke: #fff; 
  stroke-miterlimit: 10; 
  margin: 10% auto; 
  box-shadow: inset 0px 0px 0px #7ac142; 
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
} 
.checkmark__check { 
  transform-origin: 50% 50%; 
  stroke-dasharray: 29; 
  stroke-dashoffset: 29; 
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
} 
@keyframes stroke { 
  100% { 
    stroke-dashoffset: 0; 
  } 
} 
@keyframes scale { 
  0%, 100% { 
    transform: none; 
  } 
  50% { 
    transform: scale3d(1.1, 1.1, 1); 
  } 
} 
@keyframes fill { 
  100% { 
    box-shadow: inset 0px 0px 0px 30px #7ac142; 
  } 
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> 
  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" /> 
  <path class="checkmark__check" fill="none" d="M16 16 36 36 M36 16 16 36" /> 
</svg>