Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
<svg viewBox="0 0 1280 800" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://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>
              
            
!

CSS

              
                body {
  background: #f24040;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: Raleway, sans-serif;
}
.container {
  max-width: 1200px;
  width: 100%;
  height: 700px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  position: relative;
  width: 100%;
}
#ron-answer {
  visibility: hidden;
 }
#harry-answer {
  visibility: hidden;
 }
#bother1, #bother2 {
  visibility: hidden;
}
#stop1, #stop2 {
  visibility: hidden;
}
#fun, #moving {
  visibility: hidden;
  z-index: 10;
}
              
            
!

JS

              
                TweenLite.set("#harry", { xPercent: -100, yPercent: 0 });
TweenLite.set("#ron", { xPercent: -200, yPercent: 0 });
TweenLite.set("#banner", { xPercent: 0, yPercent: -150 });
function scene1() {
  var tl = new TimelineMax();
  tl.add("start");
  tl
    .to("#banner", 1, { y: 270 }, "start")
    .to("#ron", 0.7, { x: 350 }, "start+=1.5")
    .to("#harry", 0.9, { x: 200 }, "start+=1.5")
    .to(
    ".arm",
    0.5,
    {
      rotation: 5,
      transformOrigin: "center top",
      repeat: 3,
      yoyo: true
    },
    "start+=2"
  )
    .to(
    "#ron-head",
    0.5,
    {
      rotation: -5,
      transformOrigin: "center center"
    },
    "start+=2.5"
  )
    .to(
    "#ron-answer",
    0.1,
    {
      autoAlpha: 1,
      scale: 1,
      y: -10,
      transformOrigin: "center center",
      yoyo: true,
      repeat: 1,
      repeatDelay: 1
    },
    "start+=2.5"
  )
    .to(
    "#harry-answer",
    0.1,
    {
      autoAlpha: 1,
      scale: 1,
      y: -5,
      transformOrigin: "center center",
      yoyo: true,
      repeat: 1,
      repeatDelay: 1
    },
    "start+=3"
  )
    .to(
    "#harry-answer",
    0.5,
    {
      autoAlpha: 0,
      scale: 0,
      transformOrigin: "center center"
    },
    "start+=4.6"
  );
  return tl;
}

function scene2() {
  var tl = new TimelineMax();
  tl.add("start");
  tl
    .to(
    "#snape",
    1,
    {
      y: -350,
      scale: 1.5,
      ease: Power1.easeOut
    },
    "start"
  )
    .to("#ron", 0.9, { x: 1000 }, "start+=2")
    .to("#harry", 1, { x: 620 }, "start+=2")
    .to("#ron", 0.9, { rotation: -10 }, "start+=3")
    .to("#harry", 1, { rotation: 5, x: 640, y: -20 }, "start+=3")
    .to(
    "#right-arm",
    1,
    { rotation: -30, x: -5, y: -5, transformOrigin: "top center" },
    "start+=3"
  )
    .to("#ron", 1, { rotation: -10 }, "start+=3")
    .to(
    "#left-arm1",
    1,
    { rotation: 30, x: 5, y: -5, transformOrigin: "top center" },
    "start+=3"
  )
    .to(
    "#ron",
    0.35,
    {
      rotation: -5,
      yoyo: true,
      repeat: 10,
      transformOrigin: "bottom center"
    },
    "start+=4"
  )
    .to(
    "#harry",
    0.3,
    {
      rotation: 10,
      yoyo: true,
      repeat: 10,
      transformOrigin: "bottom center"
    },
    "start+=4"
  )
    .to("#bother1", 0.3, { autoAlpha: 1, yoyo: true, repeat: 9 }, "start+=4")
    .to("#bother2", 0.3, { autoAlpha: 1, yoyo: true, repeat: 9 }, "start+=4.1")
    .to(
    "#stop1",
    0.3,
    { autoAlpha: 1, y: -5, yoyo: true, repeat: 1, repeatDelay: 1 },
    "start+=4.1"
  )
    .to(
    "#stop2",
    0.3,
    { autoAlpha: 1, y: -5, yoyo: true, repeat: 1, repeatDelay: 1 },
    "start+=5"
  )
    .to(
    "#snape",
    5,
    {
      rotation: 15,
      y: 100
    },
    "start+=5"
  );
  return tl;
}
function scene3() {
  var tl = new TimelineMax();
  tl.add("start");
  tl
    .to(
    "#left-arm1",
    0.2,
    { rotation: 0, x: 0, y: 0, transformOrigin: "top center" },
    "start"
  )
    .to(
    "#right-arm",
    0.2,
    { rotation: 0, x: 0, y: 0, transformOrigin: "top center" },
    "start"
  )
    .to(
    "#fun",
    0.3,
    { autoAlpha: 1, y: -20, yoyo: true, repeat: 1, repeatDelay: 2 },
    "start+=1"
  )
    .to(
    "#moving",
    0.3,
    { autoAlpha: 1, x: 10, yoyo: true, repeat: 1, repeatDelay: 1 },
    "start+=2"
  )
    .to(
    ".fadeOut",
    0.2,
    {
      y: 350,
      ease: Back.easeIn.config(1.4)
    },
    "start+=4"
  )
    .to("#banner", 1, { y: -270, ease: Back.easeIn.config(1) }, "start+=4.5")
    .to(
    "#end",
    0.3,
    {
      y: -200,
      ease: Back.easeOut.config(1.4)
    },
    "start+=5"
  );
  return tl;
}

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

GSDevTools.create({});

              
            
!
999px

Console