console
var win = window,
doc = document,
body = doc.body;
body.style.overflow = 'hidden';
var ww = win.innerWidth;
var wh = win.innerHeight;
var a = TweenMax;
function rand(min, max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
var paths = doc.getElementsByTagName('path');
paths = [].slice.call(paths);
paths.forEach(function(path, i){
var len = Math.ceil(path.getTotalLength());
path._len = len;
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
});
var alt = true;
function pathsReset(){
paths.forEach(function(path, i){
setTimeout(() => {
a.to(path, 1, {strokeDashoffset: 0})
if (i == paths.length-1) {
if (alt) {
pathsOut();
} else {
pathsIn();
}
alt = !alt;
};
}, 100 * i);
});
}
function pathsOut(){
paths.forEach(function(path, i){
setTimeout(() => {
a.to(path, 1, {strokeDashoffset: -path._len})
if (i == paths.length-1) pathsReset();
}, 100 * i);
});
}
function pathsIn(){
paths.forEach(function(path, i){
setTimeout(() => {
a.to(path, 1, {strokeDashoffset: path._len})
if (i == paths.length-1) pathsReset();
}, 100 * i);
});
}
pathsReset();
<div class="wrap">
<svg width="1210px" height="1255.9px" viewBox="0 0 1210 1255.9">
<path d="M845,51C770.8,21.3,689.8,5,605.1,5C502.3,5,405.2,29,319,71.6"/>
<path d="M1082.5,1014.3c67.3-88.3,110.9-196.2,120.5-315.1c13.7-169.3-43.5-328.7-148.7-445.9c-2.9-3.2-8.8-9.7-11.7-12.9c-20.8-22.5-43.2-43.6-67.7-62c-11.3-8.4-34.3-24.8-46-32.7C836.9,83.6,724.3,51,605.1,51c-169.9,0-323.3,70.6-432.5,184.1"/>
<path d="M944.8,1144.6C1072.1,988.1,1122,850.3,1122,850.3v0c23.9-61.8,37-129.1,37-199.3C1159,345,911,97,605.1,97c-89.1,0-174.2,19.1-247.8,58.4c-12.9,6.9-38.2,21.3-50.7,28.8c-81.5,49.2-148.9,121.4-191.1,207.2c-7.8,16-22.6,48.3-29.2,64.8C69.5,497.7,62.3,522.7,5,615.7"/>
<path d="M833.6,1205.3c177.9-185.4,245.5-371.7,245.5-371.7C1101,777,1113,715.4,1113,651c0-280.5-227.4-507.9-507.9-507.9c-217.8,0-403.5,137.1-475.7,329.6v0c0,0-35.7,98.7-123.8,223.9"/>
<path d="M744.6,1234.3c212.3-199,291.4-416.9,291.4-416.9c20-51.6,30.9-107.8,30.9-166.5c0-10.7,0-21.3-1.1-31.8c-1.6-15.4-5.7-46-8.3-61.3c-5.5-32.4-16.3-63.4-29.5-92.6c-1.8-3.9-5.3-11.6-7.2-15.5c-73.4-155-232.9-260.6-415.8-260.6c-198.1,0-367.1,124.8-432.7,300v0c0,0-29.3,84.3-103.8,194.7c-6.3,9.4-19.2,28.1-25.7,37.4c-9,12.9-18.8,25.8-29,39"/>
<path d="M668.8,1247.4C905.7,1041.1,993,801.1,993,801.1c18-46.6,27.9-97.2,27.9-150.1c0-109.4-39.8-211.2-111.3-283.2c-9.7-9.7-29.7-28.6-40-37.7c-69.9-61.7-164-95-264.5-95c-178.5,0-330.7,112.5-389.7,270.4v0c0,0-52.9,146.5-188.9,309"/>
<path d="M602.2,1250.9C856.9,1040.4,950,784.6,950,784.6v0c16.1-41.4,24.9-86.5,24.9-133.6c0-66.5-17.6-128.9-48.3-182.9c-2.3-4-4.6-7.9-7-11.8c-37.8-61-92.5-111.1-158.5-140.7c-5-2.2-15-6.5-20-8.6c-36.4-15-76.2-23.3-117.5-25.3c-6.1-0.3-12.3-0.6-18.5-0.5c-11.2,0.3-33.6,1.7-44.8,2.7c-139.6,12.6-254.6,110.9-301.9,238.1v0c0,0-12.3,34-40.2,87.3c-33.8,64.6-90.4,157.6-176,253.2"/>
<path d="M542.6,1247.8c125.7-100.2,214.5-211.8,271.8-302.9c5.2-8.3,15.5-24.9,20.5-33.2c21.5-35.4,37.3-66.5,48.8-90.5c15.9-33.2,23.1-53,23.1-53v0c14.1-36.3,21.9-75.9,21.9-117.2c0-178.8-145-323.8-323.8-323.8c-139.2,0-257.9,87.9-303.7,211.2l0,0c0,0-66.2,183.4-240.9,367.4"/>
<path d="M488.7,1239.9c275.4-214.1,375.2-487.9,375.2-487.9c12.2-31.3,18.9-65.4,18.9-101c0-137.2-98.6-256.7-230.1-273.7c-11.9-1.5-35.7-3.6-47.6-4.1c-71.3-3-138.8,24.5-185.7,71.2c-10.1,10-29.2,31.2-38.2,42.2c-16.3,19.9-27.7,43.6-36.7,68.2l0,0c0,0-71.8,199.2-263.4,390.7"/>
<path d="M439.5,1228.1c23.3-17.9,45.5-35.9,66.2-54.7c10.3-9.3,30.6-28.3,40.7-37.8c120.5-114.8,195-235.9,234.9-314.4c6.1-12,18.1-36.3,23.8-48.5c11.2-23.5,15.8-37.4,15.8-37.4l0,0c10.2-26.1,15.8-54.6,15.8-84.4c0-128-103.7-231.7-231.7-231.7c-99.9,0-185.1,63.3-217.6,151.9c0,0-76.9,213.5-284,410.9"/>
<path d="M394.3,1213.3c281.6-215,383.6-494.4,383.6-494.4l0,0c8.3-21,12.8-44,12.8-68c0-13.5-0.4-26.8-4.1-39.2c-4.2-14-14.8-41.3-21.2-54.4c-27.8-57.4-92-92.1-160.4-92.1c-80.3,0-148.7,51-174.6,122.3l0,0c0,0-26.1,76-92.6,177.9c-6.9,10.5-20.8,31.4-27.8,41.8c-35,51.4-79.7,106.6-133.8,161.9c-15.4,15.7-31.6,31.4-48.6,46.9"/>
<path d="M352.5,1195.9C633.2,981,734.9,702.5,734.9,702.5v0c6.3-15.9,9.8-33.3,9.8-51.5c0-77.1-62.5-139.7-139.7-139.7c-60.7,0-112.3,38.7-131.6,92.7v0c0,0-85.5,238-319.7,443.7"/>
<path d="M313.7,1176.2c277.3-214.3,378-489.5,378-489.5c4.6-11,7.1-23.1,7.1-35.8c0-51.7-41.9-93.6-93.6-93.6c-41,0-75.9,26.4-88.6,63.1c0,0-89.2,248.3-334.8,456.9"/>
<path d="M277.3,1154.3C549.9,940,649.8,667.2,649.8,667.2c9-24.7-3.8-52-28.5-61c-24.7-9-52,3.8-61,28.5c0,0-7.6,22.4-25.7,58.9c-4.8,9.7-14.6,28.9-19.5,38.5c-10.2,19.7-22.6,41.6-37.3,65c-5.8,9.3-17.7,27.9-23.7,37.1c-21.6,33.2-47.4,68.4-77.3,104.4c-3.4,4.1-10.2,12.2-13.6,16.2c-42.3,50.2-92.9,101.2-151.9,149.9"/>
<path d="M243.2,1130.5C508.5,917.4,605.1,651,605.1,651"/>
</svg>
</div>
path {
fill: none;
stroke: #ffffff;
stroke-width: 9.9508;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
will-change: strokeDasharray, strokeDashoffset;
transform: translateZ(0);
}
.wrap {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #F06A44;
}
svg {
width: 90vw;
height: 90vh;
display: block;
}
@keyframes rotate {
to {
transform: rotate(3600deg);
}
}