TickWithCircle

by patelsan

HTML

<span class="tick">
  <svg class="tickicon">
    <path class="tickpath"></path>
  </svg>
</span>

CSS

.tick {
    color: rgb(13, 34, 54);
    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;
    border: 2px solid rgb(129, 199, 132);
    border-radius: 50% 50% 50% 50%;
    margin: 0px 14px 0px 0px;
    outline: rgb(13, 34, 54) none 0px;
    transition: all 0.15s ease-out 0s;
}

.tickicon {
    color: rgb(13, 34, 54);
    cursor: pointer;
    display: block;
    top: 34.5px;
    vertical-align: middle;
    width: 24px;
    transform: matrix(1, 0, 0, 1, 0, -12);
    transform-origin: 12px 12px;
    fill: rgb(255, 255, 255);
    stroke: rgb(129, 199, 132);
    stroke-dasharray: 33px;
    stroke-width: 2px;
    caret-color: rgb(13, 34, 54);
    animation: draw-checkbox 0.2s ease-in-out 0s 1 normal forwards running;
    margin: 20px 10px;
}

.tickpath {
    color: rgb(13, 34, 54);
    stroke: rgb(129, 199, 132);
    stroke-dasharray: 33px;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    d: path('M 22.9 3.7 l -15.2 16.6 l -6.6 -7.1');
}