使用GSAP（SVG）实现的哈利波特木偶伙伴动画短剧

svg puppet movie，可以用html5和svg来制作在线卡通动画。

h5, svg, movie, cartoon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TweenLite.set("#harry", {
    xPercent: -100,
    yPercent: 0
});
TweenLite.set("#ron", {
    xPercent: -200,
    yPercent: 0
});
TweenLite.set("#banner", {
    xPercent: 0,
    yPercent: -150
});

var master = new TimelineMax();
master
    .add("start")
    .add(scene1(), "start")
    .add(scene2(), "start+=5")
    .add(scene3(), "start+=13");

GSDevTools.create({});

编译

CSS

HTML

<div class="container">
    <svg viewBox="0 0 1280 800" xmlns="https://www.w3.org/2000/svg" xmlns:serif="https://www.serif.com/" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
        <g id="puppet-pals">
            <path fill="#00b6ff" stroke="#a1a1a1" stroke-width="2.5" d="M0 0h1280v800H0z" />
            <g class="fadeOut" id="harry">
                <g id="shirt">
                    <path id="torso" d="M56.601 509.056l-1.317 57.558 69.682 2.262-2.701-62.779-65.664 2.959z" fill="#ecbcaf" stroke="#000" stroke-width="3" />
                    <g class="arm" id="left-arm" stroke="#000" stroke-width="3">
                        <path d="M51.601 352.181C30.61 372.46 10.959 405.242 4.955 420.478c-2.893 7.342-1.217 18.884 9.166 23.054 10.383 4.17 16.805.907 23.068-2.778 5.438-3.2 14.176-33.596 14.412-88.573" fill="#222" />
                        <path d="M4.308 432.316s-7.528 21.552-2.681 24.156c4.847 2.604 11.528 3.663 14.986 3.185 3.457-.479 12.245-15.326 12.245-15.326" fill="#facecd" />
                    </g>
                    <g class="arm" id="right-arm" stroke="#000" stroke-width="3">
                        <path d="M108.439 353.919c22.322 18.804 44.157 50.173 51.184 64.965 3.386 7.128 2.499 18.758-7.577 23.624-10.075 4.867-16.704 2.049-23.204-1.202-5.642-2.822-16.428-32.554-20.403-87.387" fill="#222" />
                        <path d="M159.47 432.316s7.529 21.552 2.681 24.156c-4.847 2.604-11.527 3.663-14.985 3.185-3.458-.479-12.245-15.326-12.245-15.326" fill="#facecd" />
                    </g>
                    <path id="chest" d="M34.657 502.938c32.588 12.607 66.01 12.683 100.264.228-1.65-15.05-2.292-30.842-5.271-45.078-3.538-16.914-9.555-32.219-12.983-49.709-3.5-17.855-4.436-38.421-8.228-56.198-22.284 12.897-41.095 12.373-56.838 0l-3.244 51.02-11.076 51.967-2.624 47.77z"
                    fill="#222" stroke="#000" stroke-width="3" />
                    <g id="crest">
                        <path fill="#f24040" d="M91.357 384.656h15.277v3.788H91.357z" />
                        <path d="M93.226 389.808c2.028 13.757 6.063 13.392 6.063 13.392l6.062-4.368-6.062-9.024-3.833 9.024s-7.482-14.876-2.23-9.024c5.252 5.852 6.063 9.024 6.063 9.024l6.062-9.024-12.125 4.314" fill="none" stroke="#fffb58" stroke-width="3" />
                    </g>
                </g>
                <g id="harry-head" stroke="#000" stroke-width="3">
                    <ellipse id="left-ear" cx="31.847" cy="310.299" rx="13.203" ry="14.761" fill="#ecbcaf" />
                    <ellipse id="right-ear" cx="133.762" cy="310.299" rx="13.203" ry="14.761" fill="#ecbcaf" />
                    <ellipse id="head" cx="83.63" cy="316.399" rx="50.132" ry="45.691" fill="#ecbcaf" />
                    <path id="scar" d="M87.757 276.299l-5.34 6.31 6.088 2.158-6.533 7.338" fill="none" />
                    <g id="glasses">
                        <ellipse cx="102.524" cy="317.631" rx="16.042" ry="17.258" fill="#fff" />
                        <ellipse cx="56.127" cy="316.399" rx="16.042" ry="17.258" fill="#fff" />
                        <path d="M72.121 317.742l14.157.263" fill="none" />
                    </g>
                    <path id="mouth" d="M58.155 342.753c12.827 7.225 26.594 6.915 41.256-.585" fill="none" />
                    <g id="hair">
                        <path d="M53.95 282.019l-1.284 8.611s13.979-10.52 15.875-10.938c1.896-.418 5.089 20.973 9.238 17.087 2.146-2.01-1.911-25.638 7.067-23.879 6.284 1.231 9.296-.288 9.296-.288s-3.418 21.73-1.886 20.913c3.418-1.822 11.251-10.599 10.268-10.212-.427.168 4.319-1.172 8.834 5.279 1.96 2.801 2.632 8.933 5.554 14.029 1.525 2.66 3.056-17.116 3.647-11.415l3.562 6.363 4.181-5.34c-25.146-28.466-49.985-33.241-74.352-10.21z"
                        />
                        <path d="M34.784 306.08c-6.852-9.851-6.614-18.545-1.286-26.406l-9.692-15.611 18.111 1.6 6.256-5.085-14.675-13.77 20.626 1.992 11.698-4.869s-2.246-12.374 2.046-12.764c5.51-.5 26.675 3.36 31.015 9.761 2.521 3.718 17.275-.898 17.275-.898s8.561 12.337 7.649 20.056c-.913 7.718 11.143 1.87 11.143 1.87 3.554 2.516 4.728 35.596-1.188 32.886-1.899-.87-32.888-28.855-50.132-24.134-17.244 4.72-34.97 6.316-48.846 35.372z"
                        />
                    </g>
                </g>
            </g>
            <g id="snape" stroke="#000">
                <g id="S-shirt" stroke-width="3">
                    <path fill="#efe6d9" d="M636.697 746.147h67.864v61.137h-67.864z" />
                    <g id="S-leftArm">
                        <path d="M652.99 645.834c-20.352 18.464-34.379 39.789-42.281 63.882 4.617 12.178 12.695 16.644 23.191 15.718 7.671-23.1 14.771-47.698 19.09-79.6z" fill="#222" />
                        <path d="M612.989 711.973c-3.133 6.853-5.634 14.097-1.917 20.447 2.131 3.643 5.837 5.65 10.927 6.221 8.821-1.303 11.158-6.729 12.027-13.089-5.1-7.011-11.983-11.706-21.037-13.579z" fill="#efe6d9" />
                    </g>
                    <g id="S-rightArm">
                        <path d="M741.774 708.246c3.134 6.853 5.634 14.097 1.918 20.447-2.132 3.643-5.838 5.65-10.927 6.221-8.822-1.303-11.158-6.729-12.028-13.089 5.101-7.011 11.984-11.705 21.037-13.579z" fill="#efe6d9" />
                        <path d="M692.928 645.834c21.849 17.345 37.625 37.878 47.521 61.499-3.59 12.396-11.276 17.28-21.826 16.913-9.583-22.643-18.722-46.81-25.695-78.412z" fill="#222" />
                    </g>
                    <path d="M628.772 758.292c29.002 10.013 59.631 10.376 91.965.624-3.911-39.64-13.586-77.959-27.809-115.237-15.191 9.476-28.534 9.67-39.938.138-11.905 39.675-18.611 77.292-24.218 114.475z" fill="#222" />
                    <path d="M680.017 650.606c0-1.673-1.981.595-4.08.595h-7.607c-2.099 0-4.847-2.14-4.847-.467l.287 113.594c0 1.673 2.461 1.692 4.56 1.692h7.607c2.099 0 4.247.301 4.247-1.371l-.167-114.043z" />
                </g>
                <g id="S-head">
                    <ellipse cx="628.758" cy="612.559" rx="12.683" ry="9.444" fill="#efe6d9" stroke-width="3" />
                    <ellipse cx="709.075" cy="614.265" rx="12.683" ry="9.444" fill="#efe6d9" stroke-width="3" />
                    <ellipse cx="670.629" cy="610.221" rx="33.932" ry="39.769" fill="#efe6d9" stroke-width="3" />
                    <path id="S-mouth" d="M654.713 635.891c8.944-1.164 22.474-1.159 30.837.067" fill="none" stroke-width="3" />
                    <path id="S-nose" d="M665.694 608.846c-5.304 9.392-4.962 17.196 2.411 23.024 8.381-4.819 9.097-13.136 5.722-23.32" fill="none" stroke-width="3" />
                    <path id="S-hair" d="M647.062 639.253s-19.379-.017-25.942-2.435c3.866-1.799 6.35-5.472 7.652-10.748l5.209-42.563c10.502-8.639 23.253-13.278 37.852-14.631 14.522 2.31 26.218 7.886 35.613 16.119 4.379 8.501 5.637 17.579 4.189 27.157-2.225 10.834.852 18.192 10.124 21.489l-28.946 7.125c10.867-19.909 13.077-37.313 3.662-55.406-5.801-4.782-14.103-6.519-24.642-5.532-1.388-1.004-7.865-1.228-16.296-1.153-5.263 5.888-10.414 11.873-6.634 22.213l-8.04-5.929c-5.513 12.929-2.24 26.154 6.199 44.294z"
                    stroke-width="3" />
                    <g id="S-eyes" stroke-width=".95">
                        <path d="M643.022 602.307h52.895v2.585h-52.895z" />
                        <ellipse id="S-rightEye" cx="682.11" cy="607.726" rx="4.728" ry="3.938" fill="#fff" />
                        <ellipse id="S-leftEye" cx="656.172" cy="607.054" rx="4.728" ry="3.938" fill="#fff" />
                    </g>
                </g>
            </g>
            <g id="stop1">
                <path id="stop" d="M800.52 219.754c0-21.913-24.196-39.704-53.999-39.704s-54 17.791-54 39.704c0 12.95 8.59 25.086 23.014 32.517l-6.814 27.038 23.808-21.207c4.563.9 9.267 1.356 13.992 1.356 29.803 0 53.999-17.791 53.999-39.704z" fill="#f9f9f9" stroke="#225f35"
                stroke-width="2.5" />
                <text x="723.181" y="224.88" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="24">
                    St
                    <tspan x="744.157" y="224.88">o</tspan>p
                </text>
            </g>
            <text x="577.766" y="220" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="36" fill="#810d00" transform="matrix(.99999 -.00496 0 1.00001 0 0)" id="bother2">
                Bother
            </text>
            <g id="end">
                <path fill="#3c2a24" stroke="#6f4d42" stroke-width="2.5" d="M600.432 646.652h9.036v164.636h-9.036z" />
                <path fill="#6f4d42" stroke="#3c2a24" stroke-width="2.5" d="M488.928 537.312h232.084v123.163H488.928z" />
                <text x="503.594" y="618.81" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="58.066" fill="#190200">
                    T
                    <tspan x="537.033px 569.117px 599.024px 613.918px 644.649px 676.733px" y="618.81px 618.81px 618.81px 618.81px 618.81px 618.81px">he End</tspan>
                </text>
            </g>
            <text x="900" y="264.597" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="36" fill="#f1e800" transform="matrix(.99999 -.00496 0 1.00001 .003 1.079)" id="bother1">
                Bother
            </text>
            <g class="fadeOut" id="ron">
                <g id="R-shirt">
                    <path id="torso1" serif:id="torso" d="M208.501 510.747l-1.461 56.408 77.313 2.217-2.996-61.525-72.856 2.9z" fill="#ecbcaf" stroke="#000" stroke-width="3" />
                    <g class="arm" id="left-arm1" serif:id="left-arm" stroke="#000" stroke-width="3">
                        <path d="M223.287 347.147s-48.766 61.089-54.652 76.024c-2.836 7.197-1.193 18.511 8.985 22.599 10.178 4.088 16.474.889 22.613-2.723 5.331-3.137 22.824-42.008 23.054-95.9z" fill="#222" />
                        <path d="M168.001 434.775s-7.379 21.127-2.628 23.679c4.752 2.553 11.3 3.591 14.69 3.122 3.389-.469 12.003-15.023 12.003-15.023" fill="#facecd" />
                    </g>
                    <g class="arm" id="right-arm1" serif:id="right-arm" stroke="#000" stroke-width="3">
                        <path d="M263.566 347.132c23.928 15.683 55.892 51.022 64.465 64.594 4.131 6.54 4.631 17.962-4.604 23.88-9.234 5.918-16.017 3.952-22.723 1.55-5.823-2.085-26.841-37.125-37.138-90.024" fill="#222" />
                        <path d="M329.457 424.816s9.854 20.092 5.442 23.195c-4.412 3.102-10.79 4.916-14.211 4.856-3.422-.06-13.714-13.479-13.714-13.479" fill="#facecd" />
                    </g>
                    <path id="chest1" serif:id="chest" d="M197.751 504.003c31.945 12.358 64.706 12.432 98.284.223-1.618-14.753-2.247-30.233-5.167-44.188-3.469-16.579-9.367-31.582-12.727-48.727-3.43-17.502-10.688-45.402-14.405-62.828-21.992 2.313-21.563 3.012-40.282-1.336l-12.274 59.088-10.857 50.941-2.572 46.827z"
                    fill="#222" stroke="#000" stroke-width="3" />
                    <g id="crest1" serif:id="crest">
                        <path fill="#f24040" d="M253.331 388.057h14.975v3.713h-14.975z" />
                        <path d="M255.164 393.107c1.987 13.485 5.942 13.127 5.942 13.127l5.943-4.282-5.943-8.845-3.756 8.845s-7.335-14.582-2.186-8.845c5.148 5.736 5.942 8.845 5.942 8.845l5.943-8.845-11.885 4.228" fill="none" stroke="#fffb58" stroke-width="3" />
                    </g>
                </g>
                <g id="ron-head">
                    <ellipse cx="199.844" cy="295.631" rx="11.681" ry="13.034" fill="#ecbcaf" stroke="#000" stroke-width="3" />
                    <ellipse cx="296.035" cy="303.703" rx="11.681" ry="13.034" fill="#ecbcaf" stroke="#000" stroke-width="3" />
                    <ellipse cx="245.367" cy="294.582" rx="47.616" ry="55.186" fill="#ecbcaf" stroke="#000" stroke-width="3" />
                    <path d="M282.502 315.707c.719.347.96 1.337.539 2.209-.422.872-1.347 1.299-2.065.951-.719-.347-.96-1.336-.539-2.209.422-.872 1.347-1.298 2.065-.951z" fill="#f69b3a" />
                    <path id="R-hair" d="M197.751 294.582c33.435-6.205 50.713-19.3 52.483-39.007 6.198 3.675 7.253 11.745 4.915 22.714 6.007-2.376 10.745-7.419 13.56-16.507 7.646 2.159 11.194 8.917 10.16 20.815l9.111-7.036 3.49 19.021c4.113-4.641 4.979-11.986 3.514-21.275-5.317-20.007-15.013-32.011-28.696-36.727l-17.859.531-5.203-5.987-5.054 6.84-11.017 1.431c-20.566 14.422-29.209 33.245-29.404 55.187z"
                    fill="#f69b3a" stroke="#000" stroke-width="3" />
                    <ellipse id="R-leftEye" cx="228.62" cy="300.74" rx="3.571" ry="5.108" />
                    <ellipse id="R-rightEye" cx="263.934" cy="300.74" rx="3.571" ry="5.108" />
                    <g id="mouth1" serif:id="mouth">
                        <ellipse cx="244.491" cy="331.839" rx="15.872" ry="15.496" />
                        <path id="tongue" d="M244.278 333.204c4.482 0 8.121 3.168 8.121 7.071 0 3.902-3.925 4.552-8.407 4.552s-7.834-.65-7.834-4.552c0-3.903 3.639-7.071 8.12-7.071z" fill="#ed3e3e" />
                    </g>
                    <ellipse cx="218.225" cy="309.765" rx="1.446" ry="1.755" fill="#f69b3a" />
                    <path d="M278.165 312.43c.718.347.959 1.337.538 2.209-.422.872-1.347 1.298-2.065.951-.719-.347-.96-1.337-.538-2.209.421-.872 1.346-1.298 2.065-.951z" fill="#f69b3a" />
                    <ellipse cx="212.284" cy="312.497" rx="1.446" ry="1.755" fill="#f69b3a" />
                    <path d="M271.627 312.306c.718.347.96 1.337.538 2.209-.421.872-1.347 1.298-2.065.951-.718-.347-.959-1.337-.538-2.209.421-.872 1.347-1.298 2.065-.951z" fill="#f69b3a" />
                    <ellipse cx="210.839" cy="319.069" rx="1.446" ry="1.755" fill="#f69b3a" />
                    <path d="M267.466 317.594c.719.347.96 1.337.538 2.209-.421.872-1.346 1.298-2.065.951-.718-.347-.959-1.337-.538-2.209.422-.872 1.347-1.298 2.065-.951z" fill="#f69b3a" />
                    <ellipse cx="217.474" cy="322.015" rx="1.446" ry="1.755" fill="#f69b3a" />
                    <path d="M272.159 323.134c.718.347.959 1.337.538 2.209-.421.872-1.347 1.298-2.065.951-.718-.347-.959-1.337-.538-2.209.421-.872 1.347-1.299 2.065-.951z" fill="#f69b3a" />
                    <ellipse cx="217.72" cy="315.559" rx="1.446" ry="1.755" fill="#f69b3a" />
                    <path d="M275.189 317.428c.718.347.959 1.336.538 2.209-.422.872-1.347 1.298-2.065.951-.719-.347-.96-1.337-.538-2.209.421-.872 1.346-1.299 2.065-.951z" fill="#f69b3a" />
                    <ellipse cx="224.936" cy="317.314" rx="1.446" ry="1.755" fill="#f69b3a" />
                    <path d="M280.923 322.147c.718.347.959 1.337.538 2.209-.421.872-1.347 1.298-2.065.951-.718-.347-.96-1.337-.538-2.209.421-.872 1.347-1.298 2.065-.951z" fill="#f69b3a" />
                </g>
            </g>
            <g id="banner">
                <path d="M369.319 0l-1.182 59.7M842.397 0l-1.183 59.7" fill="none" stroke="#080000" stroke-width="2.5" />
                <path d="M297.694 57.491c3.2 40.447-2.02 81.732-14.157 123.705 208.621 4.75 419.144 1.974 631.929-9.753-9.197-43.97-13.13-85.156-7.059-121.05C701.493 63.195 498.15 64.85 297.694 57.491" fill="#f4f4f4" stroke="#a1a1a1" stroke-width="3" />
                <g id="welcome" fill="none" stroke="#a1a1a1" stroke-width="8.5">
                    <path d="M310.323 81.492c-2.176 2.142-1.521 11.062-.748 14.157 3.545 14.177-1.09 31.674 3.279 45.625 1.768 5.646 5.096 11.351 6.851 16.954.531 1.695.403 3.657.968 5.3.251.732.622 2.825.945 2.121.862-1.878 12.984-42.179 12.984-44.687 0-1.03.314 2.038.562 3.037.5 2.012 1.589 3.533 2.467 5.299 3.317 6.663 4.84 11.579 7.172 18.607.525 1.585 2.984 5.294 2.984 6.647 0 .949.99 3.621.99 2.672 0-15.443.852-30.538.852-45.975 0-5.389-.275-10.695-.275-16.11 0-2.418-1.479-8.959.231-7.25M366.558 141.262c0-.617 1.645.177 2.025.272 4.902 1.226 16.541 1.648 14.949-6.055-3.436-16.622-23.991-2.368-20.68 10.874.959 3.84 5.088 10.797 9.512 10.294 2.705-.308 5.863-.71 8.097-2.2.595-.396 2.335-1.492 2.207-1.492M391.767 93.799c-2.366 1.174.104 12.907.104 15.433 0 16.094.607 33.218.607 49.004M418.353 128.435c0-1.551-4.296-.322-5.013.033-5.84 2.899-7.021 8.121-8.615 14.402-2.114 8.334 3.384 10.476 9.94 10.476.399 0 2.628-.186 2.628-.469M453.149 128.118c-2.769 0-5.271-3.506-9.628-2.099-6.167 1.992-6.572 4.469-8.745 10.115-6.334 16.459 19.36 19.653 22.31 4.12 1.083-5.703-6.263-6.601-6.263-10.763M465.005 150.279c0 1.282 1.122-29.31 8.66-27.59 5.971 1.362 8.608 5.589 8.608 11.562 0 1.849.052 3.911-.491 5.62-.29.91-.235 3.814-.235 2.858 0-5.314 4.046-18.408 10.71-15.076 6.981 3.49 8.493 21.824 11.563 27.963.147.295-.249.461.231.461M512.87 134.664c4.138 0 9.814 2.514 14.153 1.199 19.195-5.821-3.436-26.458-16.14-14.105-7.346 7.144-4.105 21.204 2.043 27.353 3.026 3.025 8.072 4.86 12.512 4.86 2.113 0 2.913-.813 4.503-1.217.598-.152 2.162-1.14 1.704-.725-.681.617-1.517.98-2.21 1.67M547.833 107.047c11.293 0 21.593-8.356 31.759-11.164 3.182-.879 19.131-7.98 13.245-5.634M566.98 104.07c-.949 0-.96 1.317-.96 1.98 0 6.393 3.044 13.973 1.414 20.397-3.617 14.261-2.534 28.92-2.534 43.511M596.034 126.287c-5.265 0-9.003-2.797-14.402-.23-6 2.852-2.224 15.619 1.998 18.391 6.255 4.107 15.687 4.752 22.351 1.366 1.296-.658 1.898-3.492 2.311-4.741 3.248-9.835-8.196-13.14-15.801-14.094-.458-.057-4.603-.517-4.15-.063M627.439 90.744c2.186 0 4.999 9.03 5.69 11.16 3.808 11.737 11.161 27.521 11.161 39.879 0 4.259 1.723 8.695 1.723 13.107 0 1.46.737 8.265.737 5.486M641.77 120.794c6.151 0 12.268 1.258 18.414 1.258 2.624 0 4.624-.124 6.907-.703.536-.136 3.077-.77 1.976-.77"
                    />
                    <path d="M666.715 85.872c-3.938 0 1.608 16.162 1.608 27.182 0 5.277-2.253 10.577-3.03 15.823-1.678 11.348.748 25.97.748 37.483M699.795 121.613c0-.732-9.343-.033-10.063.309-5.405 2.569-10.798 20.069-3.226 22.44 9.888 3.097 27.605-7.64 16.601-18.644-.614-.614-11.35-8.567-11.35-5.374M732.447 112.73c-12.391 0-29.603 14.37-16.605 26.794 4.242 4.055 17.035 6.909 20.245.443 2.674-5.388 1.283-7.807-.622-11.618-.835-1.67-5.522-4.294-4.585-3.357M739.034 113.742c6.633 6.634 6.826 13.71 11.481 20.799 1.468 2.238 4.238 4.499 6.378 6.104.83.622 1.705 3.642 1.705 2.605 0-4.687.198-12.272 3.379-15.504.401-.408 1.728 1.542 1.879 1.693 1.672 1.673 8.826 14.091 11.019 12.977 2.112-1.073 1.094-28.298 1.094-34.755M801.889 113.314c-11.919 0-14.47 1.872-12.035 13.747.815 3.972-3.079 8.719 1.44 10.979 2.993 1.496 6.362-.338 9.066-1.359 14.011-5.287.189-15.696 4.424-24.304 1.106-2.248.692 4.971 1.299 7.401 1.158 4.633 1.852 11.201 1.031 16.085-.72 4.279-2.512 8.081-2.512 11.216M823.831 104.372c0 6.992 1.472 15.292-.261 22.12-.814 3.208-.491 7.096-.491 10.465v.461c-10.964-11.917 11.424-40.902 23.806-40.902M857.774 86.233c-3.833 0-2.132 10.112-2.132 12.88 0 9.978-2.419 19.365-2.419 29.236 0 2.977-.276 15.042-.276 12.72M848.273 112.116c0-.369 16.26-1.392 19.635-1.392"
                    />
                    <path d="M890.136 101.525c-3.136 0-6.394.737-9.479.737-4.435 0-19.165 6.999-8.894 11.916 6.32 3.025 27.229 7.754 23.267 19.124-2.672 7.666-18.347 2.477-18.347 5.631" />
                </g>
            </g>
            <g id="fun">
                <path d="M929.038 216.124c0-23.409-27.228-42.414-60.764-42.414-33.537 0-60.764 19.005-60.764 42.414 0 13.834 9.665 26.798 25.896 34.736l-7.667 28.885 26.791-22.655a85.761 85.761 0 0 0 15.744 1.448c33.536 0 60.764-19.005 60.764-42.414z" fill="#f9f9f9"
                stroke="#951919" stroke-width="2.5" />
                <text x="815.053" y="217.634" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="18" fill="#190200">
                    T
                    <tspan x="825.562px 835.646px 844.823px 851.28px 855.72px 869.06px 878.237px 886.045px 890.726px 896.665px 906.619px 916.702px" y="217.634px 217.634px 217.634px 217.634px 217.634px 217.634px 217.634px 217.634px 217.634px 217.634px 217.634px 217.634px">hat was fun!</tspan>
                </text>
            </g>
            <g id="moving">
                <path d="M746.357 211.639c0-31.654-34.205-57.353-76.335-57.353-42.131 0-76.336 25.699-76.336 57.353 0 18.706 12.142 36.237 32.533 46.972l-9.632 39.058 33.656-30.635c6.45 1.3 13.1 1.959 19.779 1.959 42.13 0 76.335-25.7 76.335-57.354z" fill="#f9f9f9" stroke="#951919"
                stroke-width="2.5" />
                <g font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="18" fill="#190200">
                    <text x="637.975" y="198.445" transform="translate(-24.167 -2.708)">
                        I lik
                        <tspan x="666.415" y="198.445">e</tspan>d the par
                        <tspan x="745.111" y="198.445">t</tspan>
                    </text>
                    <text x="626.086" y="218.587" transform="translate(-24.167 -2.708)">
                        where he stopped
                    </text>
                    <text x="666.271" y="238.729" transform="translate(-24.167 -2.708)">
                        mo
                        <tspan x="690.211" y="238.729">v</tspan>ing
                    </text>
                </g>
            </g>
            <g id="ron-answer">
                <path d="M454.088 239.901c0-31.183-34.567-56.499-77.144-56.499-42.576 0-77.143 25.316-77.143 56.499 0 18.428 12.27 35.697 32.877 46.272l-9.734 38.476 34.012-30.179a103.863 103.863 0 0 0 19.988 1.93c42.577 0 77.144-25.316 77.144-56.499z" fill="#f9f9f9"
                stroke="#951919" stroke-width="2.5" />
                <g font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="22.513">
                    <text x="254.525" y="231.124" transform="matrix(.75949 0 0 .79955 124.22 51.313)">
                        What should
                        <tspan x="381.045px 397.074px" y="231.124px 231.124px">we</tspan>
                    </text>
                    <text x="260.22" y="256.315" transform="matrix(.75949 0 0 .79955 124.22 51.313)">
                        do t
                        <tspan x="297.884" y="256.315">o</tspan>day
                        <tspan x="343.224" y="256.315"> </tspan>Harry?
                    </text>
                </g>
            </g>
            <g id="harry-answer">
                <path d="M299.801 151.736c0-31.049-48.682-56.257-108.645-56.257-59.963 0-108.645 25.208-108.645 56.257 0 18.349 17.281 35.545 46.303 46.074l-13.709 38.313 47.901-30.05c9.18 1.275 18.645 1.921 28.15 1.921 59.963 0 108.645-25.208 108.645-56.258z" fill="#f9f9f9"
                stroke="#951919" stroke-width="2.5" />
                <text x="105.53" y="161.985" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="18">
                    L
                    <tspan x="114.152px 123.296px 129.398px 132.656px 140.252px" y="161.985px 161.985px 161.985px 161.985px 161.985px">et&apos;s </tspan>go bother Snape!
                </text>
            </g>
            <g id="stop2">
                <path id="stopIt" d="M800.52 219.754c0-21.913-24.196-39.704-53.999-39.704s-54 17.791-54 39.704c0 12.95 8.59 25.086 23.014 32.517l-6.814 27.038 23.808-21.207c4.563.9 9.267 1.356 13.992 1.356 29.803 0 53.999-17.791 53.999-39.704z" fill="#f9f9f9" stroke="#225f35"
                stroke-width="2.5" />
                <text x="709.357" y="224.88" font-family="'PTSans-Bold','PT Sans',sans-serif" font-weight="700" font-size="24">
                    St
                    <tspan x="730.333" y="224.88">o</tspan>p it!
                </text>
            </g>
            <g id="stage" stroke-width="3">
                <path fill="#6f4d42" stroke="#453029" d="M0 537.312h1280v43.912H0z" />
                <path fill="#6f4d42" stroke="#3b2923" d="M0 595.547h1280V800H0z" />
                <path fill="#3c2a24" stroke="#3b2923" d="M0 579.586h1280v15.96H0z" />
                <path d="M132.756 628.006H14.08c4.885 60.953 4.976 120.734 0 179.278h118.676c-2.817-58.149-2.687-117.983 0-179.278zM306.34 628.006H187.664c4.885 60.953 4.976 120.734 0 179.278H306.34c-2.817-58.149-2.687-117.983 0-179.278zM479.509 628.006H360.833c4.885 60.953 4.976 120.734 0 179.278h118.676c-2.817-58.149-2.687-117.983 0-179.278zM651.509 628.006H532.833c4.885 60.953 4.977 120.734 0 179.278h118.676c-2.817-58.149-2.686-117.983 0-179.278zM823.442 628.006H704.765c4.886 60.953 4.977 120.734 0 179.278h118.677c-2.818-58.149-2.687-117.983 0-179.278zM997.854 628.006H879.177c4.886 60.953 4.977 120.734 0 179.278h118.677c-2.817-58.149-2.687-117.983 0-179.278zM1165.88 628.006h-118.677c4.886 60.953 4.977 120.734 0 179.278h118.677c-2.817-58.149-2.687-117.983 0-179.278zM1339.34 628.006h-118.676c4.885 60.953 4.977 120.734 0 179.278h118.676c-2.817-58.149-2.687-117.983 0-179.278z"
                fill="#3c2a24" stroke="#453029" />
            </g>
        </g>
    </svg>
</div>

svg puppet movie，可以用html5和svg来制作在线卡通动画。

h5, svg, movie, cartoon

编辑器支持Emmet

快捷键

svg puppet movie，可以用html5和svg来制作在线卡通动画。

h5, svg, movie, cartoon

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

使用Vue和GSAP实现的柱状图动画图表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：