html绘制图标,HTML – 如何使用SVG CSS绘制X标志？

我需要创建一个“X”复选标记的动画(​​失败).

我找到了一个动画“v”复选标记的好例子(为了成功).

代码使用曲线贝塞尔设计.

我试过阅读并试图做一个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: 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;

}

}