HTML5 SVG 共享单车（小蓝车）动画

自行车（共享单车）骑行动画

h5, svg, bike

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3811
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

g {
    transform-box: fill-box;
}
g * {
    transform-box: border-box;
}
#bikechain {
    stroke-dasharray: 5 2;
    stroke-dashoffset: 300;
    animation: moveChain 4s linear infinite;
}
@keyframes moveChain {
    to {
        stroke-dashoffset: 0;
    }
}
#crank {
    transform-origin: 50% 50% 0;
}
#left-arm {
    transform-origin: 50% 97% 0;
}
#right-arm {
    transform-origin: 50% 0% 0;
}
#left-arm,
#right-arm,
#crank {
    -webkit-animation: rotate 4s linear infinite;
    -moz-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}
#rear_wheel,
#front_wheel {
    transform-origin: center;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
#bike {
    display: flex;
}
#Layer_1 {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 600px;
}

HTML

<div id="bike">
    <svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 1125.6 650.76">
        <defs>
            <style>
                .cls-1 {
                    fill: url(#linear-gradient);
                }
                .cls-2 {
                    fill: url(#linear-gradient-2);
                }
                .cls-11,
                .cls-23,
                .cls-25,
                .cls-3,
                .cls-39,
                .cls-5,
                .cls-7,
                .cls-8 {
                    fill: none;
                }
                .cls-3 {
                    stroke: #ddb18d;
                    stroke-width: 5px;
                }
                .cls-11,
                .cls-17,
                .cls-23,
                .cls-25,
                .cls-27,
                .cls-3,
                .cls-32,
                .cls-38,
                .cls-39,
                .cls-42,
                .cls-5,
                .cls-7,
                .cls-8 {
                    stroke-miterlimit: 10;
                }
                .cls-4 {
                    fill: url(#radial-gradient);
                }
                .cls-17,
                .cls-27,
                .cls-5,
                .cls-8 {
                    stroke: #000;
                }
                .cls-6 {
                    fill: url(#radial-gradient-2);
                }
                .cls-11,
                .cls-7 {
                    stroke-width: 18px;
                }
                .cls-7 {
                    stroke: url(#radial-gradient-3);
                }
                .cls-8 {
                    stroke-width: 12px;
                }
                .cls-9 {
                    fill: url(#radial-gradient-4);
                }
                .cls-10 {
                    fill: url(#radial-gradient-5);
                }
                .cls-11 {
                    stroke: url(#radial-gradient-6);
                }
                .cls-12 {
                    fill: url(#linear-gradient-3);
                }
                .cls-13 {
                    fill: url(#linear-gradient-4);
                }
                .cls-14 {
                    fill: url(#linear-gradient-5);
                }
                .cls-15 {
                    fill: url(#linear-gradient-6);
                }
                .cls-16 {
                    fill: url(#linear-gradient-7);
                }
                .cls-17 {
                    fill: #999;
                    stroke-width: 0.5px;
                }
                .cls-18 {
                    fill: url(#linear-gradient-8);
                }
                .cls-19 {
                    fill: url(#linear-gradient-9);
                }
                .cls-20 {
                    fill: url(#linear-gradient-10);
                }
                .cls-21 {
                    fill: url(#linear-gradient-11);
                }
                .cls-22 {
                    fill: url(#linear-gradient-12);
                }
                .cls-23 {
                    stroke-width: 20px;
                    stroke: url(#linear-gradient-13);
                }
                .cls-24 {
                    fill: url(#linear-gradient-14);
                }
                .cls-25 {
                    stroke: #4d4d4d;
                }
                .cls-25,
                .cls-27,
                .cls-32 {
                    stroke-width: 0.25px;
                }
                .cls-26 {
                    fill: url(#linear-gradient-15);
                }
                .cls-27 {
                    fill: url(#linear-gradient-16);
                }
                .cls-28 {
                    fill: url(#linear-gradient-17);
                }
                .cls-29 {
                    fill: url(#linear-gradient-18);
                }
                .cls-30 {
                    fill: url(#linear-gradient-19);
                }
                .cls-31 {
                    fill: url(#radial-gradient-7);
                }
                .cls-32,
                .cls-39 {
                    stroke: #333;
                }
                .cls-32 {
                    fill: url(#linear-gradient-20);
                }
                .cls-33 {
                    fill: url(#linear-gradient-21);
                }
                .cls-34 {
                    fill: url(#linear-gradient-22);
                }
                .cls-35 {
                    fill: url(#radial-gradient-8);
                }
                .cls-36 {
                    fill: #232121;
                }
                .cls-37 {
                    fill: url(#radial-gradient-9);
                }
                .cls-38 {
                    fill: #666;
                    stroke: #1a1a1a;
                }
                .cls-39 {
                    stroke-width: 4px;
                }
                .cls-40 {
                    fill: url(#linear-gradient-23);
                }
                .cls-41 {
                    fill: url(#linear-gradient-24);
                }
                .cls-42 {
                    fill: url(#radial-gradient-10);
                    stroke: url(#radial-gradient-11);
                }
            </style>
            <linearGradient id="linear-gradient" x1="2269.23" y1="148.43" x2="2286.23" y2="148.43" gradientTransform="matrix(-1, 0, 0, 1, 2782.43, 252.03)" gradientUnits="userSpaceOnUse">
                <stop offset="0.02" stop-color="#434343" />
                <stop offset="0.04" stop-color="#454545" />
                <stop offset="0.51" stop-color="#7c7c7c" />
                <stop offset="0.6" stop-color="#6d6d6d" />
                <stop offset="0.86" stop-color="#454545" />
                <stop offset="1" stop-color="#363636" />
            </linearGradient>
            <linearGradient id="linear-gradient-2" x1="2259.85" y1="95.53" x2="2295.72" y2="95.53" gradientTransform="matrix(-1, 0, 0, 1, 2811.43, 385.97)" gradientUnits="userSpaceOnUse">
                <stop offset="0.02" stop-color="#222" />
                <stop offset="0.11" stop-color="#262626" />
                <stop offset="0.2" stop-color="#333" />
                <stop offset="0.29" stop-color="#484848" />
                <stop offset="0.39" stop-color="#666" />
                <stop offset="0.49" stop-color="#8c8c8c" />
                <stop offset="0.51" stop-color="#969696" />
                <stop offset="0.57" stop-color="#838383" />
                <stop offset="0.69" stop-color="#606060" />
                <stop offset="0.81" stop-color="#474747" />
                <stop offset="0.91" stop-color="#373737" />
                <stop offset="1" stop-color="#323232" />
            </linearGradient>
            <radialGradient id="radial-gradient" cx="261.5" cy="544.9" r="24.43" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="gray" />
                <stop offset="0.26" stop-color="#838383" />
                <stop offset="0.43" stop-color="#ababab" />
                <stop offset="0.57" stop-color="#c3c3c3" />
                <stop offset="0.65" stop-color="#ccc" />
                <stop offset="0.73" stop-color="#c9c9c9" />
                <stop offset="0.79" stop-color="#bfbfbf" />
                <stop offset="0.84" stop-color="#aeaeae" />
                <stop offset="0.9" stop-color="#979797" />
                <stop offset="0.94" stop-color="#797979" />
                <stop offset="0.99" stop-color="#545454" />
                <stop offset="1" stop-color="#4d4d4d" />
            </radialGradient>
            <radialGradient id="radial-gradient-2" cx="261.55" cy="552.46" r="33.24" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#969696" />
                <stop offset="0.12" stop-color="#8e8e8e" />
                <stop offset="0.31" stop-color="#777" />
                <stop offset="0.54" stop-color="#515151" />
                <stop offset="0.71" stop-color="#323232" />
            </radialGradient>
            <radialGradient id="radial-gradient-3" cx="260.9" cy="544.9" r="215.1" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient" />
            <radialGradient id="radial-gradient-4" cx="922.9" cy="544.6" r="15.47" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient" />
            <radialGradient id="radial-gradient-5" cx="922.9" cy="544.6" r="24.43" xlink:href="#radial-gradient" />
            <radialGradient id="radial-gradient-6" cx="922.9" cy="544.6" r="215.1" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient" />
            <linearGradient id="linear-gradient-3" x1="887.88" y1="491.86" x2="901.46" y2="485.24" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#00d9d9" />
                <stop offset="0.51" stop-color="#00f1f1" />
                <stop offset="0.68" stop-color="#00fcfc" />
                <stop offset="1" stop-color="#00cfcf" />
            </linearGradient>
            <linearGradient id="linear-gradient-4" x1="839.87" y1="374.83" x2="857.27" y2="369.51" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#00d9d9" />
                <stop offset="0.68" stop-color="#00fcfc" />
                <stop offset="0.75" stop-color="#00f0f0" />
                <stop offset="0.9" stop-color="#00d8d8" />
                <stop offset="1" stop-color="#00cfcf" />
            </linearGradient>
            <linearGradient id="linear-gradient-5" x1="792.43" y1="213.57" x2="809.66" y2="208.3" gradientTransform="translate(-29 -125.94)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#313131" />
                <stop offset="0.69" stop-color="#7d7d7d" />
                <stop offset="0.93" stop-color="#bababa" />
            </linearGradient>
            <linearGradient id="linear-gradient-6" x1="778.39" y1="204.04" x2="812.46" y2="204.04" gradientTransform="translate(0 8)" xlink:href="#linear-gradient-5" />
            <linearGradient id="linear-gradient-7" x1="805.73" y1="194.1" x2="862.11" y2="194.1" gradientTransform="translate(0 8)" xlink:href="#linear-gradient-5" />
            <linearGradient id="linear-gradient-8" x1="487.65" y1="419.82" x2="508.32" y2="415.04" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#00d9d9" />
                <stop offset="0.39" stop-color="#1ce4e4" />
                <stop offset="0.72" stop-color="#5dfcfc" />
                <stop offset="0.77" stop-color="#49f2f2" />
                <stop offset="0.87" stop-color="#21dfdf" />
                <stop offset="0.95" stop-color="#09d3d3" />
                <stop offset="1" stop-color="#00cfcf" />
            </linearGradient>
            <linearGradient id="linear-gradient-9" x1="644.26" y1="274.89" x2="643.14" y2="249.35" xlink:href="#linear-gradient-4" />
            <linearGradient id="linear-gradient-10" x1="671.58" y1="409.19" x2="692.02" y2="428.93" xlink:href="#linear-gradient-4" />
            <linearGradient id="linear-gradient-11" x1="361.28" y1="401.72" x2="370.92" y2="408.6" xlink:href="#linear-gradient-4" />
            <linearGradient id="linear-gradient-12" x1="412.62" y1="545.75" x2="412.62" y2="584.22" xlink:href="#linear-gradient-4" />
            <linearGradient id="linear-gradient-13" x1="808.46" y1="271.56" x2="828.18" y2="265.53" gradientTransform="translate(-29 -125.94)" xlink:href="#linear-gradient-4" />
            <linearGradient id="linear-gradient-14" x1="817.31" y1="308.07" x2="840.45" y2="299.64" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#5e5e5e" />
                <stop offset="0.4" stop-color="#838383" />
                <stop offset="0.59" stop-color="#ababab" />
                <stop offset="0.74" stop-color="#c3c3c3" />
                <stop offset="0.83" stop-color="#ccc" />
                <stop offset="0.86" stop-color="#acacac" />
                <stop offset="0.9" stop-color="#858585" />
                <stop offset="0.94" stop-color="#696969" />
                <stop offset="0.98" stop-color="#575757" />
                <stop offset="1" stop-color="#515151" />
            </linearGradient>
            <linearGradient id="linear-gradient-15" x1="795.39" y1="235.86" x2="818.66" y2="227.39" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#5e5e5e" />
                <stop offset="0.41" stop-color="#838383" />
                <stop offset="0.61" stop-color="#ababab" />
                <stop offset="0.77" stop-color="#c3c3c3" />
                <stop offset="0.87" stop-color="#ccc" />
                <stop offset="0.89" stop-color="#acacac" />
                <stop offset="0.93" stop-color="#858585" />
                <stop offset="0.96" stop-color="#696969" />
                <stop offset="0.98" stop-color="#575757" />
                <stop offset="1" stop-color="#515151" />
            </linearGradient>
            <linearGradient id="linear-gradient-16" x1="255" y1="540.97" x2="298.07" y2="540.97" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#999" />
                <stop offset="0.38" stop-color="#b6b6b6" />
                <stop offset="0.58" stop-color="#dedede" />
                <stop offset="0.73" stop-color="#f6f6f6" />
                <stop offset="0.83" stop-color="#fff" />
                <stop offset="0.85" stop-color="#dfdfdf" />
                <stop offset="0.89" stop-color="#adadad" />
                <stop offset="0.92" stop-color="#858585" />
                <stop offset="0.95" stop-color="#696969" />
                <stop offset="0.98" stop-color="#575757" />
                <stop offset="1" stop-color="#515151" />
            </linearGradient>
            <linearGradient id="linear-gradient-17" x1="409.81" y1="224.08" x2="457.11" y2="212.28" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="gray" />
                <stop offset="0.27" stop-color="#838383" />
                <stop offset="0.5" stop-color="#ababab" />
                <stop offset="0.69" stop-color="#c3c3c3" />
                <stop offset="0.8" stop-color="#ccc" />
                <stop offset="0.85" stop-color="#dbdbdb" />
                <stop offset="0.94" stop-color="#ececec" />
                <stop offset="1" stop-color="#f2f2f2" />
            </linearGradient>
            <linearGradient id="linear-gradient-18" x1="352.7" y1="157.2" x2="496.8" y2="157.2" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#999" />
                <stop offset="0.33" stop-color="#a9a9a9" />
                <stop offset="0.55" stop-color="#d1d1d1" />
                <stop offset="0.72" stop-color="#e9e9e9" />
                <stop offset="0.83" stop-color="#f2f2f2" />
                <stop offset="0.84" stop-color="#dfdfdf" />
                <stop offset="0.88" stop-color="#adadad" />
                <stop offset="0.92" stop-color="#858585" />
                <stop offset="0.95" stop-color="#696969" />
                <stop offset="0.98" stop-color="#575757" />
                <stop offset="1" stop-color="#515151" />
            </linearGradient>
            <linearGradient id="linear-gradient-19" x1="333.65" y1="148.75" x2="515.25" y2="148.75" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#4a211b" />
                <stop offset="0.33" stop-color="#4a231d" />
                <stop offset="0.83" stop-color="#482b26" />
                <stop offset="0.87" stop-color="#542f1f" />
                <stop offset="0.94" stop-color="#653416" />
                <stop offset="1" stop-color="#6b3612" />
            </linearGradient>
            <radialGradient id="radial-gradient-7" cx="501.06" cy="148.26" r="4.28" gradientTransform="translate(-29 -125.94)" gradientUnits="userSpaceOnUse">
                <stop offset="0.19" stop-color="#de8642" />
                <stop offset="0.39" stop-color="#d98341" />
                <stop offset="0.61" stop-color="#cc7b3c" />
                <stop offset="0.85" stop-color="#b56d36" />
                <stop offset="1" stop-color="#a36230" />
            </radialGradient>
            <linearGradient id="linear-gradient-20" x1="480.51" y1="264.32" x2="443.58" y2="274.22" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.25" stop-color="#5e5e5e" />
                <stop offset="0.29" stop-color="#888" />
                <stop offset="0.34" stop-color="#b0b0b0" />
                <stop offset="0.38" stop-color="#c8c8c8" />
                <stop offset="0.4" stop-color="#d1d1d1" />
                <stop offset="0.52" stop-color="#acacac" />
                <stop offset="0.66" stop-color="#858585" />
                <stop offset="0.8" stop-color="#686868" />
                <stop offset="0.91" stop-color="#575757" />
                <stop offset="1" stop-color="#515151" />
            </linearGradient>
            <linearGradient id="linear-gradient-21" x1="842.79" y1="237.64" x2="932.18" y2="237.64" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.07" stop-color="#603813" />
                <stop offset="0.67" stop-color="#603813" />
                <stop offset="1" stop-color="#361f0a" />
            </linearGradient>
            <linearGradient id="linear-gradient-22" x1="842.1" y1="239.95" x2="957.82" y2="239.95" xlink:href="#linear-gradient-21" />
            <radialGradient id="radial-gradient-8" cx="533.7" cy="223.6" r="45.68" gradientTransform="matrix(1, 0, 0, -1, 0, 808)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff" />
                <stop offset="0.12" stop-color="#fbfbfb" />
                <stop offset="0.25" stop-color="#eee" />
                <stop offset="0.37" stop-color="#dadada" />
                <stop offset="0.5" stop-color="#bdbdbd" />
                <stop offset="0.63" stop-color="#979797" />
                <stop offset="0.76" stop-color="#696969" />
                <stop offset="0.89" stop-color="#343434" />
                <stop offset="1" />
            </radialGradient>
            <radialGradient id="radial-gradient-9" cx="533.65" cy="223.6" r="70.81" gradientTransform="matrix(1, 0, 0, -1, 0, 808)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff" />
                <stop offset="1" />
            </radialGradient>
            <linearGradient id="linear-gradient-23" x1="525.15" y1="171" x2="542.15" y2="171" gradientTransform="matrix(1, 0, 0, -1, -29, 674.06)" xlink:href="#linear-gradient" />
            <linearGradient id="linear-gradient-24" x1="515.8" y1="118.1" x2="551.67" y2="118.1" gradientTransform="matrix(1, 0, 0, -1, 0, 808)" xlink:href="#linear-gradient-2" />
            <radialGradient id="radial-gradient-10" cx="533.72" cy="223.6" r="8.33" gradientTransform="matrix(1, 0, 0, -1, -29, 674.06)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff" />
                <stop offset="0.02" stop-color="#e8e8e8" />
                <stop offset="0.07" stop-color="#b8b8b8" />
                <stop offset="0.13" stop-color="#8c8c8c" />
                <stop offset="0.19" stop-color="#666" />
                <stop offset="0.25" stop-color="#464646" />
                <stop offset="0.32" stop-color="#2d2d2d" />
                <stop offset="0.39" stop-color="#191919" />
                <stop offset="0.48" stop-color="#0b0b0b" />
                <stop offset="0.58" stop-color="#020202" />
                <stop offset="0.77" />
            </radialGradient>
            <radialGradient id="radial-gradient-11" cx="533.7" cy="223.6" r="8.84" gradientTransform="matrix(1, 0, 0, -1, -29, 674.06)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff" />
                <stop offset="0.07" stop-color="#f9f9f9" />
                <stop offset="0.17" stop-color="#e9e9e9" />
                <stop offset="0.28" stop-color="#cfcfcf" />
                <stop offset="0.39" stop-color="#aaa" />
                <stop offset="0.51" stop-color="#7b7b7b" />
                <stop offset="0.64" stop-color="#424242" />
                <stop offset="0.77" />
            </radialGradient>
        </defs>
        <title>bike25t</title>
        <g id="left-arm">
            <polygon id="crank-arm" class="cls-1" points="501.1 347.56 508.2 347.56 513.2 453.36 496.2 453.36 501.1 347.56" />
            <path id="pedal" class="cls-2" d="M519.7,477.5h27.8a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H519.7a4,4,0,0,1-4-4h0A4,4,0,0,1,519.7,477.5Z" transform="translate(-29 -133.94)" />
        </g>
        <g id="rear_wheel">
            <circle class="cls-3" cx="232.5" cy="418.86" r="217.6" />
            <g id="hub">
                <path class="cls-4" d="M261.5,577.4A24.5,24.5,0,1,1,286,552.9,24.54,24.54,0,0,1,261.5,577.4Zm0-30.9A6.5,6.5,0,1,0,268,553,6.49,6.49,0,0,0,261.5,546.5Z" transform="translate(-29 -133.94)" />
            </g>
            <g id="spokes">
                <line class="cls-5" x1="232.5" y1="418.96" x2="232.5" y2="619.66" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="309.3" y2="604.36" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="374.4" y2="560.86" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="417.9" y2="495.76" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="433.2" y2="418.96" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="417.9" y2="342.26" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="374.4" y2="277.16" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="309.3" y2="233.66" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="232.5" y2="218.36" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="155.7" y2="233.66" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="90.6" y2="277.16" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="47.1" y2="342.26" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="31.8" y2="418.96" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="47.1" y2="495.76" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="90.6" y2="560.86" />
                <line class="cls-5" x1="232.5" y1="418.96" x2="155.7" y2="604.36" />
            </g>
            <path class="cls-6" d="M266.47,585.12l-3.17-4.33a0.66,0.66,0,0,0-1.09,0l-2.82,4.56a0.66,0.66,0,0,1-1.17-.1l-2-5a0.66,0.66,0,0,0-1.07-.23l-3.87,3.72a0.66,0.66,0,0,1-1.11-.39l-0.7-5.32a0.66,0.66,0,0,0-1-.49l-4.67,2.64a0.66,0.66,0,0,1-1-.65l0.65-5.33a0.66,0.66,0,0,0-.83-0.72l-5.18,1.4a0.66,0.66,0,0,1-.79-0.88l2-5a0.66,0.66,0,0,0-.62-0.9l-5.37.06a0.66,0.66,0,0,1-.54-1l3.14-4.35a0.66,0.66,0,0,0-.38-1l-5.21-1.27a0.66,0.66,0,0,1-.27-1.15l4.12-3.44a0.66,0.66,0,0,0-.11-1.09l-4.73-2.53a0.66,0.66,0,0,1,0-1.18l4.85-2.31a0.66,0.66,0,0,0,.16-1.08l-4-3.63a0.66,0.66,0,0,1,.32-1.13l5.27-1a0.66,0.66,0,0,0,.43-1l-2.93-4.5a0.66,0.66,0,0,1,.59-1l5.36,0.31a0.66,0.66,0,0,0,.66-0.87l-1.72-5.08a0.66,0.66,0,0,1,.83-0.84l5.11,1.64a0.66,0.66,0,0,0,.86-0.68l-0.4-5.35a0.66,0.66,0,0,1,1-.61l4.54,2.86a0.66,0.66,0,0,0,1-.44l0.94-5.28a0.66,0.66,0,0,1,1.13-.34l3.69,3.9a0.66,0.66,0,0,0,1.08-.18l2.23-4.88a0.66,0.66,0,0,1,1.18,0l2.61,4.69a0.66,0.66,0,0,0,1.09.09l3.37-4.17a0.66,0.66,0,0,1,1.15.25l1.36,5.19a0.66,0.66,0,0,0,1,.36l4.3-3.21a0.66,0.66,0,0,1,1.05.53l0,5.37a0.66,0.66,0,0,0,.91.61l5-2a0.66,0.66,0,0,1,.89.77l-1.31,5.2a0.66,0.66,0,0,0,.73.81l5.32-.74a0.66,0.66,0,0,1,.67,1L286.51,539a0.66,0.66,0,0,0,.5,1l5.33,0.61a0.66,0.66,0,0,1,.41,1.1l-3.66,3.93a0.66,0.66,0,0,0,.25,1.07l5,1.92a0.66,0.66,0,0,1,.12,1.17L290,552.63a0.66,0.66,0,0,0,0,1.09l4.38,3.1a0.66,0.66,0,0,1-.17,1.16l-5.1,1.68a0.66,0.66,0,0,0-.3,1.05l3.47,4.09a0.66,0.66,0,0,1-.46,1.08l-5.35.36a0.66,0.66,0,0,0-.55.95l2.34,4.83a0.66,0.66,0,0,1-.71.94l-5.28-1a0.66,0.66,0,0,0-.77.78L282.5,578a0.66,0.66,0,0,1-.92.73l-4.86-2.26a0.66,0.66,0,0,0-.94.56l-0.27,5.36a0.66,0.66,0,0,1-1.08.48l-4.15-3.4a0.66,0.66,0,0,0-1,.31l-1.6,5.12A0.66,0.66,0,0,1,266.47,585.12Z"
            transform="translate(-29 -133.94)" />
            <circle id="rim" class="cls-7" cx="231.9" cy="418.96" r="206.1" />
            <circle id="tire" class="cls-8" cx="231.7" cy="419.06" r="225.7" />
        </g>
        <g id="front_wheel">
            <circle class="cls-3" cx="893.9" cy="417.56" r="217.6" />
            <g id="spokes-2" data-name="spokes">
                <line class="cls-5" x1="893.9" y1="418.76" x2="893.9" y2="619.36" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="970.7" y2="604.06" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="1035.8" y2="560.56" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="1079.3" y2="495.46" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="1094.5" y2="418.76" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="1079.3" y2="341.96" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="1035.8" y2="276.86" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="970.7" y2="233.36" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="893.9" y2="218.06" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="817.1" y2="233.36" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="752" y2="276.86" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="708.5" y2="341.96" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="693.2" y2="418.76" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="708.5" y2="495.46" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="752" y2="560.56" />
                <line class="cls-5" x1="893.9" y1="418.76" x2="817.1" y2="604.06" />
            </g>
            <g id="hub-2" data-name="hub">
                <circle class="cls-9" cx="893.9" cy="418.66" r="15.5" />
                <path class="cls-10" d="M922.9,577.1a24.5,24.5,0,1,1,24.5-24.5A24.54,24.54,0,0,1,922.9,577.1Zm0-30.9a6.5,6.5,0,1,0,6.5,6.5A6.49,6.49,0,0,0,922.9,546.2Z" transform="translate(-29 -133.94)" />
            </g>
            <circle id="rim-2" data-name="rim" class="cls-11" cx="893.9" cy="418.66" r="206.1" />
            <circle id="tire-2" data-name="tire" class="cls-8" cx="893.9" cy="418.66" r="225.7" />
        </g>
        <g id="frame">
            <g id="fork">
                <path class="cls-12" d="M924.2,546.2s-27.7-61-42.4-91a190.94,190.94,0,0,1-8.2-19.2c-3.6,4.6-9.6,4.1-12.2,9.5C882.1,484.8,916.9,548,916.9,548c2.1,3.3,4.7,6.7,8,4.6h0C927.2,551.4,925.6,548.5,924.2,546.2Z" transform="translate(-29 -133.94)" />
                <path class="cls-13" d="M868.7,421.2L837.1,311.5l-15.3,4.6,11.9,46.5c1.1,3.8,20.7,69.9,28.8,85.4,0.5,1-1.7-3.4-1.1-2.3,2.6-5.4,8.6-4.9,12.2-9.5C871.8,431.2,870.1,426.2,868.7,421.2Z" transform="translate(-29 -133.94)" />
                <polygon class="cls-14" points="769.8 108.56 757 66.76 774.2 61.46 787 103.26 769.8 108.56" />
                <path class="cls-15" d="M805.8,197a3,3,0,0,1-1.8-1.7c-0.1-.2-0.2-0.3-0.4-0.2l-17.3,5.1a2.12,2.12,0,0,0-1.3,3,0.25,0.25,0,0,1-.2.4l-4.3,1.6c-1.5.2-2.4,2.8-2.2,4.4h0a0.9,0.9,0,0,0,.1.5,4.47,4.47,0,0,0,5.5,3.2l3.1-.8a0.52,0.52,0,0,1,.4.2l2.3,6.3a6.37,6.37,0,0,1-1.4.8l-1.8.9a4.63,4.63,0,0,0-2.4,5.6v0.1a3.7,3.7,0,0,0,4.5,2.5l3.3-.9,17.5-5.4a2.62,2.62,0,0,0,1.8-3.1h0l1.3-.2a28.49,28.49,0,0,1-6.4-22.1A0.77,0.77,0,0,0,805.8,197Z"
                transform="translate(-29 -133.94)" />
                <path class="cls-16" d="M861.8,206.7l-6.2-.2a11.11,11.11,0,0,1-8.1-3.8,6.57,6.57,0,0,1-1-7.2,13.57,13.57,0,0,1,3.2-4.3l8.5-4.4-0.5-2-12.8,2.1-2.5,4.3L807,197a3.35,3.35,0,0,1-1,0,29.17,29.17,0,0,0,6.4,22.4l28.5-5,2.1,1.2a12,12,0,0,0,8.7,1.2l8.3-2.2a2.81,2.81,0,0,0,2.1-2.9Z"
                transform="translate(-29 -133.94)" />
                <circle class="cls-17" cx="758.6" cy="91.06" r="1.9" />
                <circle class="cls-17" cx="753.3" cy="75.16" r="1.9" />
            </g>
            <path id="seat_tube" data-name="seat tube" class="cls-18" d="M525,584.4L452.9,277.3a6.52,6.52,0,0,1,4.9-7.8l13.2-3,73.6,313.3Z" transform="translate(-29 -133.94)" />
            <path id="toptube" class="cls-19" d="M821.3,262.1a16.47,16.47,0,0,0-16.7-11.8L466,266.7h-0.4c3.8,5.2.2,10.3,4.1,15.4l337.2-15c0.6,0,2.9,4,4.7,8.4a80.27,80.27,0,0,0,9.7-13.4h0Z" transform="translate(-29 -133.94)" />
            <path id="downtube" class="cls-20" d="M821.3,262.1a86,86,0,0,1-9.8,13.5c1.8,4.3,3,9,1.6,10.4L538.6,568q0.6,10.95,1.5,21.9a12.55,12.55,0,0,0,3.8-2.5L820.4,304a25.31,25.31,0,0,0,6.1-24.6Z" transform="translate(-29 -133.94)" />
            <path id="seatstay" class="cls-21" d="M280.3,539.2L457.8,294.8s-1.1-18.9-4.3-14.4L269.2,539.1C267,542.2,277.6,543,280.3,539.2Z" transform="translate(-29 -133.94)" />
            <path id="chainstay" class="cls-22" d="M538.6,568l-1.5,1.6c-2.6,2.6-6.8,7.9-10.4,7.4L287.2,553.7c-5.8-.7,1.6,11.6,4.2,11.9l235.2,26.5c0.8,0.1,8.2.2,13.6-2.2C539.5,582.7,539,575.3,538.6,568Z" transform="translate(-29 -133.94)" />
            <g id="head_tube" data-name="head tube">
                <line class="cls-23" x1="778.4" y1="105.96" x2="800.2" y2="179.26" />
            </g>
            <g id="headset">
                <g id="headset-2" data-name="headset">
                    <g>
                        <path class="cls-24" d="M838.1,305.7l-20.5,6.1a1.58,1.58,0,0,0-1.1,2h0a5.2,5.2,0,0,0,6.4,3.5l13.7-4.1a5.2,5.2,0,0,0,3.5-6.4h0A1.51,1.51,0,0,0,838.1,305.7Z" transform="translate(-29 -133.94)" />
                        <path class="cls-25" d="M838.1,305.7l-20.5,6.1a1.58,1.58,0,0,0-1.1,2h0a5.2,5.2,0,0,0,6.4,3.5l13.7-4.1a5.2,5.2,0,0,0,3.5-6.4h0A1.51,1.51,0,0,0,838.1,305.7Z" transform="translate(-29 -133.94)" />
                    </g>
                    <rect x="816.52" y="311.51" width="24.7" height="1" transform="translate(-83.51 114.76) rotate(-16.53)" />
                </g>
                <g id="headset-3" data-name="headset">
                    <g>
                        <path class="cls-26" d="M798.1,246.9l20.5-6.1a1.58,1.58,0,0,0,1.1-2l-0.7-2.2a5.2,5.2,0,0,0-6.4-3.5l-13.7,4.1a5.2,5.2,0,0,0-3.5,6.4l0.7,2.2A1.58,1.58,0,0,0,798.1,246.9Z" transform="translate(-29 -133.94)" />
                        <path class="cls-25" d="M798.1,246.9l20.5-6.1a1.58,1.58,0,0,0,1.1-2l-0.7-2.2a5.2,5.2,0,0,0-6.4-3.5l-13.7,4.1a5.2,5.2,0,0,0-3.5,6.4l0.7,2.2A1.58,1.58,0,0,0,798.1,246.9Z" transform="translate(-29 -133.94)" />
                    </g>
                    <rect x="794.72" y="238.71" width="24.7" height="1.3" transform="translate(-63.75 105.56) rotate(-16.53)" />
                </g>
            </g>
            <path id="rear_fork_end" data-name="rear fork end" class="cls-27" d="M272.3,535.5l-5,4-7.9,2.4a4.47,4.47,0,0,0-3.2,4.2v0.6a1.56,1.56,0,0,0,1.6,2l14.4-.4a5.64,5.64,0,0,1,5.8,5.6v1a3.4,3.4,0,0,1-3.9,3.4l-17.9-2.5a1,1,0,0,0-1.2,1.1V558a4.15,4.15,0,0,0,3.8,4.2l31.1,3.3a9.08,9.08,0,0,0,5.8-1.3l1.1-.7a4.29,4.29,0,0,0,0-6.1s-4.2-4.1-5-4.9l-4-4.5-5.9-5.7a6.34,6.34,0,0,1-1.9-3.6l-0.8-4.7a2.6,2.6,0,0,0-2.4-1.6h0a4.59,4.59,0,0,0-3.1,1.5Z"
            transform="translate(-29 -133.94)" />
            <path id="seatpost" class="cls-28" d="M449.5,265.8l-9.8-42.3c-2.2-9.4-9.6-23.8-19-25.9l-14.6-3.3c-2.1-.5-7.3-6.4-7.3-6.4-1-3.1,5-4.1,8.2-3.9l24.6-.5c5,0.2,9.6-1.1,12.3,3.1,0,0,7.7,12.1,10.9,24.4l13.4,53.8c0.7,2.6-1.2,2.6-3.9,3l-9.6,1.6A4.57,4.57,0,0,1,449.5,265.8Z"
            transform="translate(-29 -133.94)" />
            <g id="saddle">
                <path id="saddle_rails" data-name="saddle rails" class="cls-29" d="M372.8,183a18.77,18.77,0,0,1-18.7-16.9l-1.4-21.5,2.7,1.6,1.7,19.6A15.92,15.92,0,0,0,372.9,180h0.4l49.7,2.8a11.29,11.29,0,0,0,4.4-1l20.2-10.2a17.83,17.83,0,0,1,5.5-1.4l41.7-6.6,2,1.5-43.4,8.1a12.55,12.55,0,0,0-4.6,1.2l-20.2,10.2a13.42,13.42,0,0,1-5.6,1.2L373.3,183h-0.5Z"
                transform="translate(-29 -133.94)" />
                <path id="saddle_leather" data-name="saddle leather" class="cls-30" d="M513.7,162c-1.8,2.3-10.2,3.4-12.4,3.6a34.54,34.54,0,0,1-4.6.1c-2.6-.1-30.5-0.3-38.1-0.3a61.71,61.71,0,0,0-8.4,1.5l-32.2,12c-4.1,1.5-13.8.4-22.1-2.9-0.1,0-46.8-26.6-46.8-26.6a0.37,0.37,0,0,0-.3-0.1,105.91,105.91,0,0,0-11.2-1.4c-4.2-.4-5.5-6.2-1.7-8.1,0.1-.1.3-0.1,0.4-0.2l5.1-1.9c18.4-3.3,18.6-5.9,45.9-1.2,8.2,1.4,11.8,2.7,18.8,5.3,10.3,3.9,89.4,1.1,89.4,1.1h0.7c12.7,1.1,15.4,6.1,18.2,10.5C516.5,156.8,514.1,161.5,513.7,162Z"
                transform="translate(-29 -133.94)" />
                <circle class="cls-31" cx="472.1" cy="22.36" r="4.3" />
            </g>
            <g id="seatpost_collar_lug">
                <path class="cls-32" d="M475.7,289.7L452.1,277h-6a5.12,5.12,0,0,1-5.1-5.1v-0.4a5,5,0,0,1,4.5-5l6-.7,10.4-2.6a10.55,10.55,0,0,0,4.8-2.8l0.8-.9,0.8,3.3a3.22,3.22,0,0,0,3.2,2.5l7.4,0.8-6.7.9a4.66,4.66,0,0,0-3.6,2.6,5,5,0,0,0-.5,1.6,6.39,6.39,0,0,0,3.7,7.5l9.6,3.3a0.36,0.36,0,0,1-.1.7l-4.7.4a1.34,1.34,0,0,0-1.1,1.9l1.1,4.1A0.58,0.58,0,0,1,475.7,289.7Z"
                transform="translate(-29 -133.94)" />
                <circle class="cls-17" cx="416.8" cy="137.66" r="1.9" />
            </g>
            <path class="cls-33" d="M867.1,216l35.5,15.5a0.53,0.53,0,0,1,.3.2c11.9,11.3,21.3,19,5.2,37.3-2.8,3.1-11.7,6.5-15.9,6.8l-45.8,2.5a0.76,0.76,0,0,0-.4.1c-2,.9-2.8,2-2.9,4.4l-0.3,8a2.13,2.13,0,0,0,2.3,2.2s56.7-5.5,57.9-5.8c39.4-11.2,40.9-50.9-7.8-76.3a0.1,0.1,0,0,1-.1-0.1l-33.6-12.3c-1.6-.7-7.3.3-8.8,1.1l-3,1.4a7,7,0,0,0-4,4.7c-0.1.4-.1,0.8-0.2,1.2a7.12,7.12,0,0,0,7.8,7.3l2.3-.2C857.2,213.7,865.9,215.1,867.1,216Z"
            transform="translate(-29 -133.94)" />
            <path class="cls-34" d="M873.6,209.7l45.9,20c0.1,0.1.3,0.1,0.4,0.2,15.4,14.6,27.5,24.5,6.7,48.3-3.6,4.1-15.2,8.4-20.6,8.8l-59.3,3.2a0.9,0.9,0,0,0-.5.1c-2.6,1.2-3.6,2.6-3.7,5.6l-0.4,10.4a2.81,2.81,0,0,0,3,2.9s73.4-7.1,75-7.5C971,287.2,973,235.8,910,202.9c-0.1,0-.1-0.1-0.2-0.1L866.4,187c-2.1-.9-9.4.4-11.4,1.4l-3.9,1.8a9.16,9.16,0,0,0-5.1,6.1,8.75,8.75,0,0,0-.2,1.6,9.15,9.15,0,0,0,10.2,9.4l3-.3C860.7,206.8,872,208.6,873.6,209.7Z"
            transform="translate(-29 -133.94)" />
        </g>
        <g id="crank">
            <path id="ring" class="cls-35" d="M537.9,629.9a45.69,45.69,0,1,1,41.3-41.3A45.78,45.78,0,0,1,537.9,629.9Zm-0.7-84a38.71,38.71,0,1,0,35,35A38.84,38.84,0,0,0,537.2,545.9Z" transform="translate(-29 -133.94)" />
            <polygon id="crank-arm-2" data-name="crank-arm" class="cls-36" points="508.2 395.56 501.1 395.56 496.2 453.36 513.2 453.36 508.2 395.56" />
            <polygon id="crank-arm-3" data-name="crank-arm" class="cls-36" points="562.6 436.16 560.4 429.36 503.9 442.56 509.2 458.76 562.6 436.16" />
            <polygon id="crank-arm-4" data-name="crank-arm" class="cls-36" points="499.6 458.26 504.9 442.06 448.4 428.86 446.2 435.66 499.6 458.26" />
            <polygon id="crank-arm-5" data-name="crank-arm" class="cls-36" points="510.7 456.66 497 446.76 467 496.36 472.8 500.56 510.7 456.66" />
            <polygon id="crank-arm-6" data-name="crank-arm" class="cls-36" points="536.1 501.06 541.8 496.86 511.8 447.26 498.1 457.26 536.1 501.06" />
            <path id="chainring" class="cls-37" d="M603.5,584.5a1.41,1.41,0,0,1-.1,2.7l-4.9,1.3a1.44,1.44,0,0,0-.2,2.7l4.6,2.1a1.42,1.42,0,0,1-.4,2.7l-5,.7a1.39,1.39,0,0,0-.5,2.6l4.3,2.6a1.4,1.4,0,0,1-.7,2.6l-5,.1a1.42,1.42,0,0,0-.9,2.5l3.9,3.2a1.4,1.4,0,0,1-1,2.5l-5-.6a1.43,1.43,0,0,0-1.2,2.4l3.5,3.6a1.37,1.37,0,0,1-1.3,2.3l-4.9-1.2a1.42,1.42,0,0,0-1.5,2.2l3,4a1.42,1.42,0,0,1-1.6,2.2l-4.7-1.8a1.39,1.39,0,0,0-1.7,2l2.5,4.4a1.4,1.4,0,0,1-1.9,1.9l-4.4-2.4a1.44,1.44,0,0,0-2,1.8l1.9,4.7a1.42,1.42,0,0,1-2.1,1.7l-4.1-2.9a1.41,1.41,0,0,0-2.2,1.5l1.3,4.9a1.39,1.39,0,0,1-2.3,1.4l-3.7-3.4a1.44,1.44,0,0,0-2.4,1.2l0.7,5a1.42,1.42,0,0,1-2.5,1.1l-3.3-3.9a1.42,1.42,0,0,0-2.5.9l0.1,5a1.42,1.42,0,0,1-2.6.8l-2.8-4.2a1.43,1.43,0,0,0-2.6.6l-0.6,5a1.45,1.45,0,0,1-2.7.5l-2.2-4.6a1.38,1.38,0,0,0-2.6.3l-1.2,4.9a1.39,1.39,0,0,1-2.7.1l-1.6-4.8a1.44,1.44,0,0,0-2.7-.1l-1.8,4.7a1.41,1.41,0,0,1-2.7-.2l-1-5a1.39,1.39,0,0,0-2.6-.4l-2.4,4.5a1.44,1.44,0,0,1-2.7-.6l-0.4-5a1.44,1.44,0,0,0-2.6-.7l-2.9,4.1a1.44,1.44,0,0,1-2.6-.9l0.3-5a1.43,1.43,0,0,0-2.5-1l-3.4,3.7a1.39,1.39,0,0,1-2.4-1.2l0.9-5a1.4,1.4,0,0,0-2.3-1.3l-3.9,3.3a1.44,1.44,0,0,1-2.3-1.5l1.5-4.8a1.4,1.4,0,0,0-2.1-1.6l-4.2,2.8a1.39,1.39,0,0,1-2-1.8l2.1-4.6a1.39,1.39,0,0,0-1.9-1.8l-4.5,2.2a1.39,1.39,0,0,1-1.8-2l2.7-4.3a1.41,1.41,0,0,0-1.6-2.1l-4.8,1.6a1.43,1.43,0,0,1-1.6-2.2l3.2-3.9a1.45,1.45,0,0,0-1.4-2.3l-4.9,1a1.42,1.42,0,0,1-1.3-2.4l3.6-3.5a1.4,1.4,0,0,0-1.1-2.4l-5,.4a1.41,1.41,0,0,1-1-2.5l4.1-3a1.37,1.37,0,0,0-.8-2.5l-5-.2a1.38,1.38,0,0,1-.6-2.6l4.4-2.5a1.38,1.38,0,0,0-.4-2.6l-5-.9a1.41,1.41,0,0,1-.3-2.7l4.7-1.9a1.37,1.37,0,0,0-.1-2.6l-4.8-1.5a1.41,1.41,0,0,1,.1-2.7l4.9-1.3a1.37,1.37,0,0,0,.2-2.6l-4.6-2.1a1.42,1.42,0,0,1,.4-2.7l5-.7a1.39,1.39,0,0,0,.5-2.6L466,567a1.4,1.4,0,0,1,.7-2.6h5a1.42,1.42,0,0,0,.9-2.5l-3.9-3.2a1.4,1.4,0,0,1,1-2.5l5,0.6a1.44,1.44,0,0,0,1.2-2.4l-3.5-3.6a1.39,1.39,0,0,1,1.4-2.3l4.9,1.2a1.41,1.41,0,0,0,1.5-2.2l-3-4.1a1.42,1.42,0,0,1,1.6-2.2l4.7,1.8a1.39,1.39,0,0,0,1.7-2l-2.5-4.4a1.39,1.39,0,0,1,1.9-1.9l4.5,2.4a1.44,1.44,0,0,0,2-1.8l-1.9-4.7a1.42,1.42,0,0,1,2.1-1.7l4.1,2.9a1.41,1.41,0,0,0,2.2-1.5l-1.3-4.9a1.39,1.39,0,0,1,2.3-1.4l3.7,3.4a1.44,1.44,0,0,0,2.4-1.2l-0.7-5a1.42,1.42,0,0,1,2.5-1.1l3.3,3.9a1.42,1.42,0,0,0,2.5-.9l-0.1-5a1.42,1.42,0,0,1,2.6-.8l2.8,4.2a1.43,1.43,0,0,0,2.6-.6l0.6-5a1.44,1.44,0,0,1,2.7-.5l2.2,4.5a1.45,1.45,0,0,0,2.7-.3l1.2-4.9a1.39,1.39,0,0,1,2.7-.1l1.6,4.8a1.42,1.42,0,0,0,2.7,0l1.8-4.7a1.41,1.41,0,0,1,2.7.2l1,4.9a1.39,1.39,0,0,0,2.6.4l2.4-4.5a1.44,1.44,0,0,1,2.7.6l0.4,5a1.44,1.44,0,0,0,2.6.7l2.9-4.1a1.44,1.44,0,0,1,2.6.9l-0.3,5.1a1.43,1.43,0,0,0,2.5,1l3.4-3.7a1.39,1.39,0,0,1,2.4,1.2l-0.9,5a1.4,1.4,0,0,0,2.3,1.3l3.9-3.3a1.38,1.38,0,0,1,2.2,1.5l-1.5,4.8a1.4,1.4,0,0,0,2.1,1.6l4.2-2.8a1.39,1.39,0,0,1,2,1.8l-2.1,4.6a1.45,1.45,0,0,0,1.9,1.9l4.5-2.2a1.39,1.39,0,0,1,1.8,2l-2.7,4.3a1.41,1.41,0,0,0,1.6,2.1l4.8-1.6a1.38,1.38,0,0,1,1.5,2.2l-3.2,3.9a1.45,1.45,0,0,0,1.4,2.3l4.9-1a1.42,1.42,0,0,1,1.3,2.4l-3.6,3.5a1.4,1.4,0,0,0,1.1,2.4l5-.4a1.41,1.41,0,0,1,1,2.5l-4.1,3a1.37,1.37,0,0,0,.8,2.5l5,0.3a1.38,1.38,0,0,1,.6,2.6l-4.4,2.5a1.38,1.38,0,0,0,.4,2.6l5,0.9a1.41,1.41,0,0,1,.3,2.7l-4.7,1.9a1.37,1.37,0,0,0,.1,2.6Zm-16.9-.1a53,53,0,1,0-53,53A53.09,53.09,0,0,0,586.6,584.4Z"
            transform="translate(-29 -133.94)" />
            <g id="chainring-bolts">
                <circle class="cls-38" cx="449.7" cy="431.56" r="3.5" />
                <circle class="cls-38" cx="559.8" cy="432.36" r="3.5" />
                <circle class="cls-38" cx="504.7" cy="392.06" r="3.5" />
                <circle class="cls-38" cx="538.3" cy="497.56" r="3.5" />
                <circle class="cls-38" cx="499.52" cy="630.8" r="3.5" transform="translate(-332.45 445.18) rotate(-47.94)" />
            </g>
        </g>
        <path id="bikechain" class="cls-39" d="M606.68,585.19C606.3,623,573.33,653.28,533,652.87a81.64,81.64,0,0,1-17.82-2.24l-259.1-66.35a44.68,44.68,0,0,1-4.37-1.33c-13.22-4.9-22.51-17-22.37-31.17,0.19-18.29,16.14-33,35.65-32.76l269.41-3C574.72,516.45,607.07,547.41,606.68,585.19Z"
        transform="translate(-29 -133.94)" />
        <g id="right-arm">
            <polygon id="crank-arm-7" data-name="crank-arm" class="cls-40" points="508.2 555.96 501.1 555.96 496.2 450.16 513.2 450.16 508.2 555.96" />
            <path id="pedal-2" data-name="pedal" class="cls-41" d="M547.6,693.9H519.8a4,4,0,0,1-4-4h0a4,4,0,0,1,4-4h27.8a4,4,0,0,1,4,4h0A3.89,3.89,0,0,1,547.6,693.9Z" transform="translate(-29 -133.94)" />
        </g>
        <circle id="crank-bolt" class="cls-42" cx="504.7" cy="450.46" r="8.3" />
    </svg>
</div>

自行车（共享单车）骑行动画

h5, svg, bike

编辑器支持Emmet

快捷键

自行车（共享单车）骑行动画

h5, svg, bike

HTML5 GSAP房屋搭建（盖房子）动画和日夜场景切换

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：