<svg id='preloader' viewBox='0 0 100 100'>
    <defs>
        <mask id='mask-1' x='0' y='0' width='100' height='100'>
            <path id='path-1'  d='m6 2.6667c-0.89 5.89-8.34 15.87-2.67 17.67 4.74 1.5 2.01-15.06 6.67-13.33 4.73 1.75-8.19 12.45-3.67 14.67 6.6 3.24 6.98-20.4 13.67-17.33 4.73 2.17-7.78 13.27-3 15.33 4.9 2.12 4.59-15.45 9.33-13 3.65 1.89-7.62 9.72-4 11.67 5.31 2.85 5.44-16.64 11-14.33 3.93 1.63-5.57 10.97-1.67 12.67 5.94 2.58 6.37-17.53 12.33-15 3.6 1.53-4.94 10.16-1.33 11.67 4.08 1.71 4.57-12.66 8.33-10.33 3.85 2.38-9.58 10.06-5.67 12.33 2.96 1.72 2.86-9.71 6-8.33 4.57 2-7.38 12.28-3 14.67 7.94 4.32 11.1-22.72 19.33-19 3.75 1.69-4.39 10.57-0.67 12.33 6.25 2.96 9.23-17.27 15.33-14 3.86 2.07-6.03 11.27-2 13 3.49 1.5 3.56-10.61 7-9 3.3 1.54-5.74 9.38-2.33 10.67 4.28 1.62 2.42-13.7 6.67-12 2.88 1.15-5 7.43-2.33 9 2.64 1.56 4.12-8.05 6.67-6.33 6.04 4.07-14.41 16.88-8 20.33 2.03 1.1 1.81-6.4 4-5.67 3.16 1.06-3.51 8.98-0.33 10 3.81 1.22 3.22-12.04 6.67-10 6.04 3.56-2.98 20.78-9.67 18.67-5.56-1.76 7.79-15.27 2.33-17.33-6-2.26-4.56 17.96-10.67 16-6.46-2.07 7.28-18.84 0.67-20.33-4.61-1.04-1.2 14.56-5.67 13-4.45-1.56 7.87-11.53 3.67-13.67-6.48-3.29-7.3 20.5-13.67 17-4.83-2.66 10.34-13.34 5.33-15.67-8-3.72-5.77 26.6-13.67 22.67-7.5-3.73 16.86-19.66 9.33-23.33-6.35-3.1-4.01 20.71-10.67 18.33-5.93-2.12 8.66-15.89 3-18.67-6.7-3.29-8.69 19.75-15.33 16.33-6.55-3.37 10.93-18.4 4.33-21.67-6.63-3.28-8 19.88-14.67 16.67-3.97-1.91 6.47-11.49 2.33-13-6.26-2.29-3.76 19.69-10 17.33-3.18-1.2 5.03-8.47 2-10-4.56-2.31-5.54 13.11-10.33 11.33-3.75-1.39 3.52-10.91-0.33-12-3.71-1.05-2.6 10.63-6.33 9.67-2.81-0.72 2.17-8.06-0.67-8.67-6.56-1.41-14.98 13.56-9.67 17.67 4.1 3.17 6.89-13.35 11.33-10.67 4.64 2.8-9.07 13.04-4.33 15.67 5.02 2.79 6.65-15.46 11.67-12.67 5.44 3.03-10.56 15.19-5 18 5.79 2.92 6.42-12.02 12-15.33 1.16-0.69 3.18-1.74 4-0.67 2.67 3.53-9.28 9.45-5.67 12 5.78 4.07 9.02-18.78 15-15 4.49 2.83-9.78 12.11-5.33 15 4.87 3.17 7.64-14.93 12.67-12 4.35 2.54-7.99 12.08-3.67 14.67 5.4 3.24 8.55-15.81 14-12.67 4.13 2.38-7.25 11.83-3 14 5.46 2.79 7.01-16.71 12.33-13.67 3.54 2.02-7.22 9.68-3.67 11.67 4.88 2.73 5.99-15.14 11-12.67 4.47 2.21-7.47 12.45-3 14.67 5.15 2.55 6.27-15.72 11.33-13 4.06 2.18-7.73 11.16-3.67 13.33 3.75 2 4.59-11.7 8.33-9.67 3.15 1.71-6.07 8.48-3 10.33 3.29 1.99 4.97-9.88 8.33-8 4.96 2.78-8.52 13.7-3.67 16.67 2.09 1.28 3.81-6.26 5.67-4.67 2.65 2.27-3 6.4-5.33 9-1.48 1.65-3.37 5.04-5.33 4-4.62-2.44 5.62-13.99 0.67-15.67-6.8-2.3-5.77 20.58-12.33 17.67-5-2.22 8.74-13.94 3.67-16-5.54-2.25-4.01 18.07-9.33 15.33-5.27-2.71 11.77-12.82 7-16.33-5.52-4.07-10.16 17.42-15.67 13.33-4.67-3.47 11.94-12.93 7-16-7.03-4.37-8.56 22.64-16 19-4.8-2.35 7.94-12.97 3.33-15.67-7.54-4.41-12.23 21.93-19.67 17.33-5.18-3.2 10.05-14.83 4.67-17.67-5.71-3.01-7.03 17.82-12.67 14.67-5.8-3.24 11.95-16.05 6-19-4.14-2.05-4.07 13.77-8 11.33-6.76-4.19 18.02-16.7 11.33-21-4.34-2.79-4.57 14.32-9.33 12.33-2.9-1.21 4.14-7.93 1.33-9.33-5.9-2.95-11.12 8.06-14 14-1.66 3.42-4.47 9.19-1.33 11.33 1.56 1.06 3.45-3.74 5-2.67 2.12 1.47-3.28 6.46-1 7.67 2.22 1.18 3.49-6.26 5.67-5 2.85 1.65-4.95 8.21-2 9.67 3.95 1.95 4.66-11.85 8.67-10 2.65 1.23-3.94 7.35-1.33 8.67 16.82-2.1 21.23-35.14 37.33-37.33 7.39 5.48-7.24 17.16-13 24.33-1.92 2.4-4.17 7.2-7 6-5.22-2.22 4.54-15.76-1-17-8.39-1.88-18.43 16.6-12.33 22.67 6.03 5.99 15.07-16.76 22.33-12.33 3.32 2.02-3.77 9.84-0.33 11.67 1.69 0.9 3.19-4.54 4.67-3.33 2.73 2.24-7.2 7.6-4.33 9.67 3.06 2.21 5.03-9.49 8.33-7.67 2.18 1.2-3.44 6.01-1.33 7.33 3.37 2.12 6.43-9.31 9.67-7 2.17 1.55-4.62 6.29-2.33 7.67 3.64 2.18 5.21-10.91 9-9 2.71 1.36-4.12 7.8-1.33 9 3.63 1.56 3.85-11.21 7.33-9.33 3.09 1.67-6.32 8.15-3.33 10 3.34 2.07 4.7-9.84 8.33-8.33 4.52 1.87 2.35 10.38 0 14.67-2.47 4.52-9.29 11.9-13 8.33-3.16-3.04 10.26-8.82 6.67-11.33-4.01-2.8-4.88 13.37-9.33 11.33-4.82-2.2 7.47-13.43 2.67-15.67-5.93-2.76-6.66 17.61-12.67 15-4.31-1.87 5.73-11.64 1.67-14-4.19-2.43-7.55 11.22-11.67 8.67-3.17-1.97 5.3-9.27 2-11-2.92-1.53-4.12 8.62-7 7-3.69-2.07 6.51-9.98 3-12.33-7.07-4.74-13.53 19.64-20.67 15-3.14-2.04 5.4-8.85 2.33-11-4.82-3.38-10.18 12.71-15 9.33-3.07-2.15 5.88-9.78 2.33-11-3.85-1.32-7.73 7.7-5.33 11 3.82 5.26 15.22-7.7 19.33-2.67 2.76 3.37-7.55 9.4-4.33 12.33 4.52 4.12 12.21-11.85 16.67-7.67 2.26 2.12-5.64 6.6-3.33 8.67 2.89 2.59 7.22-7.65 10.33-5.33 1.45 1.08-2.5 4.33-1 5.33 2.87 1.92 5.73-7.48 8.67-5.67 1.62 1-2.23 4.58-0.67 5.67 2.98 2.06 6.57-6.89 9.67-5 1.04 0.64 0 4.89 0 3.67' fill='none' stroke='#fff' stroke-width='8' stroke-linecap='round' />

        </mask>

    </defs>
    
    <path d='m50.667 26.667c1.33-3.5533 3.9733-5.7667 6.3333-8.3367 2.96-3.22 7.34-5.38 11.67-6 4.03-0.57 8.42 0.38 12 2.33 3.1 1.69 5.82 4.47 7.33 7.67 3.97 8.4 5.66 18.67 3.33 28.003-1.99 7.3667-8.25 13.497-13 19.663-8.4167 9.37-19.28 20.553-31.997 25.667-3.8633-6.7933-7.2533-11.363-9.67-15.337-5.6433-8.9967-11.423-18.067-14.663-27.997-2.3-7.02-4.63-14.88-2.67-22 1.5-5.42 5.52-10.43 10.33-13.33 3.86-2.33 7.5333-3.14 12.663-0.66333 6.4133 4.8967 6.6667 21.003 6.6667 15z'  stroke='#AF1B3F' stroke-width='0' fill='#FF686B' mask='url(#mask-1)'/>
</svg>

<div id='restart'>
    <span class='ion-refresh'></span>
</div>
svg {
    display: block;
    width: 10rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#restart {
    position: fixed;
    bottom: 1rem;
    font-size: 2rem;
    right: 1rem;
    color: #ccc;
    transition: all .3s cubic-bezier(.9,.3,.41,.86);
    
    &:hover {
        color: #FF686B;
        cursor: pointer;
        transform: rotate(1turn);
    }
    
    &:active {
        color: #000;
    }
}
View Compiled
var lineDrawing = anime({
    targets: '#path-1',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeOutQuad',
    duration: 5000
});


document.getElementById('restart').onclick = lineDrawing.restart;
View Compiled
Run Pen

External CSS

  1. https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js