使用SVG实现的三角形旋转运动轨迹 - 踏得网

SVG Motion Trails

SVG，运动

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="container">
    <svg version="1.1" width="600px" height="600px" viewBox="0 0 600 600">
        <polygon class="triangle" fill="#D7447D" points="216.1,373 300,227.6 383.9,373 " />
        <path fill="none" stroke="#ECFF2A" stroke-miterlimit="10" d="M264.7,246.7" />
        <g id="left" stroke="#FFBA4F" stroke-width="1">
            <path fill="none" stroke-miterlimit="10" d="M223.2,358.8c-19.5-42.4-1-92.6,41.4-112.1" />
            <path fill="none" stroke-miterlimit="10" d="M218.7,360.9c-20.7-44.9-1-98.1,43.9-118.7" />
        </g>
        <g id="right" stroke="#FFBA4F" stroke-width="1">
            <path fill="none" stroke-miterlimit="10" d="M307.7,239.3c29.1,2.7,56,20.4,69.1,48.8c7.8,17,9.5,35.1,6.1,52.1" />
            <path fill="none" stroke-miterlimit="10" d="M305.8,234.2c31.7,2.1,61.2,21,75.5,51.9
		c8.3,18.1,10.1,37.6,6.3,55.7" />
        </g>
        <g id="bottom" stroke="#FFBA4F" stroke-width="1">
            <path fill="none" stroke-miterlimit="10" d="M367.4,374.5c-8.1,10.7-18.9,19.7-32,25.7
		c-32.2,14.8-68.8,7.7-93.2-15.1" />
            <path fill="none" stroke-miterlimit="10" d="M373.4,374.8c-8.8,12.6-21,23.1-35.9,30c-34.3,15.8-73.5,8-99.3-16.6
		" />
        </g>
    </svg>

</div>

<script src='/uploads/150501/DrawSVGPlugin.js?r=12'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/utils/Draggable.min.js'></script>