HTML5 GSAP七彩苹果LOGO组装动画 - 踏得网

Logo reveal with SVG & Greensock

svg, logo, apple

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div>
    <svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 3676 3657" xmlns:xlink="https://www.w3.org/1999/xlink">
        <g data-allBits="data-allBits">
            <path data-bit="data-bit" fill="#1590D0" d="M2501.998 2527c-76.474 120.276-178.01 234.225-287.79 233.077-156.254 3.332-173.638-80.293-348.065-74.692-174.428 5.6-199.867 83.678-354.52 73.458-74.98-4.954-176.1-93.888-266.082-231.843H2502z"></path>
            <path data-bit="data-bit" fill="#862872" d="M2621.914 2298c-22.805 52.567-64.868 142.422-119.916 229H1245.54c-43.246-66.303-83.92-143.93-117.885-229h1494.26z"></path>
            <path data-bit="data-bit" fill="#C62D32" d="M2413.773 2034c79.284 185.05 227.25 217.848 227.25 217.848s-6.706 17.56-19.11 46.152H1127.656c-32.825-82.216-59.38-171.384-75.935-264h1362.053z"></path>
            <path data-bit="data-bit" fill="#E68302" d="M2378.4 1790c-8.63 51.046-6.717 108.514 10.85 173.108 7.02 25.813 15.307 49.38 24.523 70.892H1051.72c-4.187-23.43-7.734-47.078-10.58-70.892-7.39-61.8-6.87-119.554.053-173.108H2378.4z"></path>
            <path data-bit="data-bit" fill="#F8BB13" d="M2544.392 1530c-69.58 58.125-146.017 141.87-165.99 260H1041.19c13.234-102.374 49.87-189.4 99.424-260h1403.776z"></path>
            <path data-bit="data-bit" fill="#69B012" d="M2544.392 1530c15.73-13.14 31.11-24.972 45.407-35.595-127.818-171.487-299.52-184.606-396.1-186.477-96.583-1.872-293.804 88.728-340.657 88.466-46.852-.263-208.93-83.312-341.297-84.236-118.938 0-271.263 75.56-371.13 217.842h1403.776zm-702.936-224.904s376.384 16.027 396.75-448.207c-417.337 53.614-396.75 448.206-396.75 448.206z"></path>
        </g>
    </svg>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>