GSAP 绘制数学图形动画

Math Graph 含一个泡沫破裂的动画。

svg, math

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    circle_1 = select("#Circle-1");
lines_1 = selectAll("#lines-1 line");
circle_2 = select("#Circle-2");
lines_2 = selectAll("#lines-2 line");

circle_3 = select("#Circle-3");
lines_3 = selectAll("#lines-3 line");

circle_4 = select("#Circle-4");
lines_4 = selectAll("#lines-4 line");
line_first = select("#line-first");
line_1 = select("#line-1");
line_2 = select("#line-2");
line_3 = select("#line-3");

container = select('#container');

TweenMax.set([lines_1, lines_2, lines_3, lines_4], {
    drawSVG: '40% 40%'
})
TweenMax.set([circle_1, circle_2, circle_3, circle_4], {
    drawSVG: '0%'
})
TweenMax.set([line_first, line_1, line_2, line_3], {
    drawSVG: '0%'
})

var tl = new TimelineMax({
    repeat: -1,
    repeatDelay: 3
})
tl.to(line_first, 0.5, {
    drawSVG: 'true'
}, '-=0.5')
tl.to(circle_1, 0.7, {
    drawSVG: 'true'
})
tl.to(lines_1, 0.5, {
        drawSVG: '40% 70%'
    })
    .to(lines_1, 0.5, {
        drawSVG: '100% 100%'
    })
tl.to(line_1, 0.5, {
    drawSVG: 'true'
}, '-=0.5')
tl.to(circle_4, 0.7, {
    drawSVG: 'true'
})
tl.to(lines_4, 0.5, {
        drawSVG: '40% 70%'
    })
    .to(lines_4, 0.5, {
        drawSVG: '100% 100%'
    })
tl.to(line_2, 0.5, {
    drawSVG: 'true'
}, '-=0.5')
tl.to(circle_2, 0.7, {
    drawSVG: 'true'
})
tl.to(lines_2, 0.5, {
        drawSVG: '40% 70%'
    })
    .to(lines_2, 0.5, {
        drawSVG: '100% 100%'
    })
tl.to(line_3, 0.5, {
    drawSVG: 'true'
}, '-=0.5')
tl.to(circle_3, 0.7, {
    drawSVG: 'true'
})
tl.to(lines_3, 0.5, {
        drawSVG: '40% 70%'
    })
    .to(lines_3, 0.5, {
        drawSVG: '100% 100%'
    })

编译

CSS

HTML

</filter>
        </defs>
        <line id="line-1" x1="84.16" y1="162.11" x2="128.52" y2="100.85" style="fill: none;stroke: #263d61;stroke-miterlimit: 10;stroke-width: 6px" />
        <g id="Group-1" filter="url(#goo)">
            <g id="lines-1">
                <line x1="67.45" y1="182.05" x2="41.81" y2="120.15" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="92.97" y2="120.44" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="129.35" y2="156.41" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="129.07" y2="207.57" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="93.09" y2="243.95" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="41.93" y2="243.66" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="5.55" y2="207.69" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="67.45" y1="182.05" x2="5.84" y2="156.53" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
            </g>
            <circle id="Circle-1" cx="67.45" cy="182.05" r="24" style="fill: none;stroke: #ee5e7c;stroke-miterlimit: 10;stroke-width: 6px" />
        </g>
        <g id="Group-4" filter="url(#goo)">
            <g id="lines-4">
                <line x1="145.45" y1="85.05" x2="119.81" y2="23.15" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="170.97" y2="23.44" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="207.35" y2="59.41" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="207.07" y2="110.57" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="171.09" y2="146.95" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="119.93" y2="146.66" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="83.55" y2="110.69" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="145.45" y1="85.05" x2="83.84" y2="59.53" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
            </g>
            <circle id="Circle-4" cx="145.45" cy="85.05" r="24" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
        </g>
        <line id="line-2" x1="169.17" y1="98.54" x2="221.89" y2="137.33" style="fill: none;stroke: #263d61;stroke-miterlimit: 10;stroke-width: 6px" />
        <g id="Group-2" filter="url(#goo)">
            <g id="lines-2">
                <line x1="241.45" y1="153.05" x2="215.81" y2="91.15" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="266.97" y2="91.44" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="303.35" y2="127.41" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="303.07" y2="178.57" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="267.09" y2="214.95" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="215.93" y2="214.66" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="179.55" y2="178.69" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="241.45" y1="153.05" x2="179.84" y2="127.53" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
            </g>
            <circle id="Circle-2" cx="241.45" cy="153.05" r="24" style="fill: none;stroke: #13aac3;stroke-miterlimit: 10;stroke-width: 6px" />
        </g>
        <line id="line-3" x1="260.77" y1="134.57" x2="313.86" y2="81.73" style="fill: none;stroke: #263d61;stroke-miterlimit: 10;stroke-width: 6px" />
        <g id="Group-3" filter="url(#goo)">
            <g id="lines-3">
                <line x1="330.45" y1="63.05" x2="304.81" y2="1.15" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="355.97" y2="1.44" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="392.35" y2="37.41" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="392.07" y2="88.57" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="356.09" y2="124.95" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="304.93" y2="124.66" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="268.55" y2="88.69" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
                <line x1="330.45" y1="63.05" x2="268.84" y2="37.53" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
            </g>
            <circle id="Circle-3" cx="330.45" cy="63.05" r="24" style="fill: none;stroke: #fbba47;stroke-miterlimit: 10;stroke-width: 6px" />
        </g>
        <line id="line-first" x1="3" y1="271.33" x2="395.45" y2="271.33" style="fill: none;stroke: #263d61;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px" />
    </svg>
</div>

Math Graph 含一个泡沫破裂的动画。

svg, math

编辑器支持Emmet

快捷键

Math Graph 含一个泡沫破裂的动画。

svg, math

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

HTML5 GSAP 在手机上展示地图位置的动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：