﻿
.wrap {
    font-size: 48px;
    font-weight: bold;
}

.circle-word {
    position: relative;
    display: inline-block;
    padding: 8px 200px;
}

    .circle-word svg {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 250px;
        height: 150px;
        transform: translate(-50%, -50%);
        
    }

.scribble-path {
    stroke: red;
    stroke-width: 6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* animation */
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: draw 3s ease-out infinite;
}

@keyframes draw {
    0% {
        stroke-dashoffset: 2000;
        opacity: 1;
    }

    70% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 2000;
        opacity: 0;
    }
}
