Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <svg class="worm" viewBox="0 0 578 635" 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="ello">
    <path id="neck" d="M246.844 326.629c20.559 65.59 57.591 104.078 113.804 111.007 48.581-1.648 73.319-33.552 70.94-92.971-26.983 19.417-56.05 35.782-93.141 30.313-40.305-4.555-70.14-21.499-91.603-48.349z" fill="#d9d099"/>
    <g id="whole-head">
      <g class="hair2" id="top-hair">
        <path d="M309.942 182.337c28.277-8.023 26.346-102.803-1.012-156.243C291.392 8.369 273.791.607 256.144 0c-41.156 1.123-60.084 12.722-76.588 25.464 8.918-3.745 18.041-7.069 27.731-9.22-32.026 40.689-41.449 78.061-32.868 112.692 4.486-32.481 18.14-57.395 36.979-75.437-15.857 33.089-21.04 64.352-13.952 91.616 2.56-26.268 6.506-46.911 12.868-57.745-6.358 24.064-3.579 43.695 3.708 59.031-3.435-29.682-.753-46.256 8.337-56.709-3.112 22.461-2.968 40.55 7.762 51.772-1.903-19.977-.119-34.927 6.119-49.074-1.869 28.11 1.905 44.21 11.208 58.147-3.84-24.88 2.488-45.609 16.471-62.27 39.376-16.515 67.708 91.699 46.023 94.07z" fill="#4c5478"/>
        <path d="M309.874 197.24c6.885-35.443-5.468-75.242-16.491-92.285-8.013-12.389-17.93-13.752-28.501-16.37 10.609-20.858 37.269-29.939 48.148-14.789 10.878 15.149 18.406 79.68 13.252 100.839-3.201 13.137-8.707 20.86-16.408 22.605z" fill="#373e5f"/>
      </g>
      <path  id="head-hair" d="M214.82 329.038c-36.472 13.024-76.344 9.986-118.162 3.272 20.076-3.402 39.541-3.317 57.501-11.018-56.286.238-99.985-36.809-137.018-93.596 62.935 49.157 108.374 75.481 127.41 67.348-57.204-28.841-84.893-72.639-98.146-120.454 19.236 27.803 39.188 49.441 58.02 56.342-23.836-28.21-39.22-58.352-40.548-85.259 25.491 35.806 52.908 66.642 86.23 74.423-27.814-31.067-38.979-61.485-36.773-94.473 10.92 27.173 27.419 53.638 47.776 74.839-15.47-45.985-16.75-75.543-5.125-93.787-1.979 28.512 1.537 51.659 17.134 70.141-7.533-23.209-7.342-44.019-2.056-63.244.715 26.439 6.276 45.537 18.82 59.27-4.991-23.03-3.681-47.752 3.581-64.515 2.337 29.652 21.481 58.736 37.359 79.487-26.7 47.136-40.331 92.933-16.003 141.224z" fill="#4c5478"/>
      <path d="M197.576 330.531c8.864 9.896-111.562 4.011-101.027.292 18.29.381 42.831-2.742 58.023-8.574-38.886-3.49-71.451-17.882-88.558-37.192 39.328 23.222 72.715 34.888 112.184 18.927-.242-23.263 2.808-53.133 17.965-80.777-7.239 7.774-8.376 96.396 1.413 107.324z" fill="#373e5f"/>
      <path id="head-hair1" serif:id="head-hair" d="M439.26 307.131c38.241-9.814 65.034-34.268 97.255-63.931-19.027 8.606-35.657 19.828-55.181 23.566 48.351-32.039 95.283-83.137 96.512-152.646-27.517 77.857-81.7 120.832-102.377 124.819 33.519-57.295 33.718-110.404 19.392-158.66-1.548 34.664-7.02 64.495-19.447 81.151 5.27-37.645 2.261-72.093-11.052-95.736-2.609 45.052-9.537 86.982-33.905 112.686 7.143-42.353.372-74.618-19.235-101.41 5.238 29.365 5.317 61.323-.737 91.014-11.444-47.97-26.222-73.841-45.98-82.698 17.008 23.114 26.428 44.814 22.992 69.467-6.012-24.054-17.352-41.642-32.207-54.965 13.588 22.895 19.081 42.323 15.71 61.188-8.093-22.446-22.493-42.721-37.718-52.818 13.923 26.557 14.169 66.046 11.711 92.79 46.631 19.563 89.608 44.03 94.267 106.183z" fill="#4c5478"/>
      <path d="M474.814 289.315c-.243 13.283 88.187-61.828 77.582-58.314-14.223 11.506-35.532 24.073-51.112 28.77 28.596-26.581 56.134-54.45 57.825-80.192-16.857 42.447-42.799 61.652-83.772 73.217-14.482-26.076-58.713-64.912-89.444-64.258 10.536-3.061 89.289 80.64 88.921 100.777z" fill="#373e5f"/>
      <g class="hair2" id="small-hair_brown" fill="#d9d099">
        <path d="M198.981 365.418c-.069-1.052-19.926-.228-29.799 6.498-2.613 1.781-10.613 21.254-9.779 21.899.835.644 12.172-16.253 14.786-18.033 9.872-6.727 24.897-8.741 24.792-10.364z"/>
        <path d="M198.685 365.297c.249-1.009-15.259-9.149-24.783-7.322-2.521.483-14.263 15.002-13.807 15.975.457.974 14.027-9.652 16.548-10.136 9.523-1.826 21.657 3.039 22.042 1.483z"/>
        <path d="M199.527 365.17c-.387-.947-18.009 3.581-24.82 11.599-1.802 2.122-2.99 21.421-2.04 21.85.95.43 5.939-17.151 7.741-19.273 6.811-8.018 19.715-12.714 19.119-14.176z"/>
        <path d="M199.218 365c-.217-.719-14.203 7.46-20.142 16.003-1.573 2.262-4.136 19.125-3.439 19.263.696.137 6.046-16.176 7.618-18.437 5.94-8.544 16.298-15.719 15.963-16.829z"/>
        <path d="M168.247 373.343c-.036 1.873 15.767-5.402 23.564-4.044 3.539.617 8.967-.069 8.059-4.493-.907-4.425-4.305-6.338-7.846-6.745-8.954-1.027-23.742 13.409-23.777 15.282z"/>
      </g>
      <g class="hair2" id="small-hair_brown1"  fill="#d9d099">
        <path d="M475.786 331.142c-.406-.973 17.757-9.042 29.589-7.392 3.132.437 18.939 14.342 18.477 15.289-.462.948-18.118-9.167-21.25-9.604-11.831-1.65-26.191 3.208-26.816 1.707z"/>
        <path d="M475.997 330.903c-.671-.793 9.618-14.968 18.964-17.555 2.474-.685 19.438 7.12 19.46 8.195.023 1.075-16.853-2.43-19.326-1.745-9.346 2.587-18.063 12.329-19.098 11.105z"/>
        <path d="M475.186 331.163c-.073-1.021 17.729-4.778 27.389-.613 2.557 1.103 12.181 17.872 11.52 18.679-.661.806-12.929-12.738-15.486-13.841-9.66-4.165-23.309-2.651-23.423-4.225z"/>
        <path d="M475.388 330.873c-.125-.741 16.037.386 25.15 5.409 2.412 1.33 12.189 15.307 11.626 15.739-.563.433-12.593-11.816-15.006-13.145-9.112-5.023-21.579-6.859-21.77-8.003z"/>
        <path d="M506.846 324.614c.863 1.663-16.528 2.151-22.913 6.827-2.898 2.123-8.067 3.915-9.216-.453-1.149-4.367 1.047-7.59 4.041-9.525 7.569-4.891 27.226 1.488 28.088 3.151z"/>
      </g>
      <g id="head">
        <path id="face" d="M186.727 322.729c-10.525 17.793 1.651 41.08 17.284 52.121 15.634 11.042 72.812 18.675 72.812 18.675s52.898 4.208 79.187.368c27.619-4.034 86.525-24.573 86.525-24.573s32.124-14.064 36.49-28.974c4.543-15.512-9.234-64.1-9.234-64.1 2.599-2.087-89.82-40.107-139.842-30.541-53.106 10.155-129.716 54.189-143.222 77.024z" fill="#d9d099"/>
        <path id="top-head" d="M183.58 327.577s24.163-28.329 57.928-48.602c27.921-16.764 63.896-25.673 84.957-29.374 19.974-3.51 49.751-6.967 75.563-.135 33.253 8.801 69.238 27.086 69.238 27.086-1.596-6.805-23.011-55.533-63.202-86.891-32.46-25.326-91.127-33.827-110.521-29.21-32.473 7.732-64.486 15.978-86.389 39.27-43.181 45.918-39.789 107.3-27.574 127.856z" fill="#4c5478"/>
      </g>
      <g class="eye" id="right-eye">
        <g id="left-eye">
          <path class="blink" id="eye" d="M416.836 223.144c27.974 9.397 43.436 38.603 34.509 65.179-8.928 26.576-38.887 40.524-66.86 31.127-27.973-9.396-43.436-38.602-34.508-65.179 8.927-26.576 38.886-40.524 66.859-31.127z" fill="#763a26"/>
          <path class="blink" id="eyelid" d="M346.845 265.804c.23-.528 32.956-16.816 51.655-16.616 17.691.19 55.075 17.717 55.075 17.717-.045-28.172-35.297-47.301-53.066-48.151-22.449-1.074-55.186 21.517-53.664 47.05z" fill="#d9d099"/>
          <g class="iris">
            <path id="pupil" d="M397.346 255.487c14.974 5.03 23.476 19.995 18.974 33.397-4.502 13.403-20.314 20.2-35.289 15.169-14.974-5.03-23.476-19.994-18.974-33.397 4.502-13.402 20.315-20.199 35.289-15.169z"/>
            <path id="iris-glow" d="M378.282 262.377c4.108 1.38 6.454 5.444 5.237 9.069-1.218 3.625-5.542 5.448-9.65 4.068-4.108-1.38-6.454-5.444-5.236-9.069 1.217-3.625 5.541-5.448 9.649-4.068z" fill="#fff"/>
          </g>
        </g>
      </g>
      <g class="eye" id="left-eye1" serif:id="left-eye">
        <g id="left-eye2" serif:id="left-eye">
          <path class="blink" serif:id="eye" d="M254.911 222.306c33.005-2.227 61.519 21.423 63.635 52.78 2.116 31.357-22.962 58.622-55.967 60.849-33.005 2.227-61.519-21.422-63.635-52.779-2.116-31.357 22.962-58.623 55.967-60.85z" fill="#763a26"/>
          <path class="blink" id="eyelid1" serif:id="eyelid" d="M200.632 296.445c.012-.646 27.885-33.135 46.418-39.309 18.817-6.269 64.646-5.198 64.646-5.198-12.095-29.173-56.805-33.917-75.581-27.198-23.72 8.488-47.981 45.898-35.483 71.705z" fill="#d9d099"/>
          <g class="iris">
            <path id="pupil1" serif:id="pupil" d="M248.548 264.156c17.668-1.192 32.878 10.678 33.945 26.491 1.067 15.813-12.411 29.619-30.078 30.811-17.668 1.192-32.878-10.678-33.945-26.491-1.067-15.813 12.411-29.619 30.078-30.811z"/>
            <path id="iris-glow1" serif:id="iris-glow" d="M231.741 279.449c4.847-.327 9.016 2.88 9.305 7.157.289 4.278-3.412 8.016-8.259 8.343-4.847.327-9.016-2.88-9.305-7.158-.288-4.277 3.412-8.015 8.259-8.342z" fill="#fff"/>
          </g>
        </g>
      </g>
      <path d="M301.954 355.119c-.517 2.356 9.758 8.101 10.7 6.275 22.739-8.073 45.182-10.88 67.309-8.072 5.358.528 9.293-1.981 11.384-8.426" fill="none" stroke="#a59d6e" stroke-width="3.5"/>
      <path d="M350.043 318.028l2.983 5.79a.932.932 0 0 0 1.655-.853c-.895-1.737-4.638-4.937-4.638-4.937zM337.432 320.46l-1.687 6.291a.93.93 0 0 1-1.798-.483c.506-1.887 3.485-5.808 3.485-5.808z" fill="#a59d6e"/>
      <path d="M316.925 381.005c24.74 4.291 51.321.53 70.024-9.043.397.551-6.347 8.8-14.715 14.908-6.206 4.529-13.442 7.423-18.597 7.535-4.085.089-10.304-.416-15.844-2.278-10.897-3.664-21.365-10.533-20.868-11.122z" fill="#c9be76"/>
    </g>
    <path class="hair" id="small-hair" d="M449.089 414.818c15.573-14.846 34.498-19.198 57.12-21.858-17.296 7.034-31.134 13.737-35.182 24.104 15.92-6.276 28.991 1.629 40.079 11.177-12.068-4.747-23.46-5.775-33.247-2.861 16.116 4.586 26.272 13.672 32.785 25.65-11.701-9.568-23.25-15.354-33.724-14.44 11.735 6.749 17.387 15.827 18.764 27.053-8.04-13.613-17.453-22.469-28.058-27.201 7.689 6.287 13.314 13.416 15.39 21.992-5.081-7.366-11.916-12.715-19.429-16.312-4.081-8.729-8.447-17.761-14.498-27.304z" fill="#3f476a"/>
    <path id="butt" d="M134.784 393.349c-67.311 3.629-112.722 27.107-132.629 73.697-9.936 41.89 14.579 69.827 71.709 80.43-12.095-27.201-20.791-55.535-6.802-86.086 13.881-33.493 37.077-55.4 67.722-68.041z" fill="#d9d099"/>
    <path id="body" d="M290.709 440.801c-29.109-21.05-60.351-33.484-93.994-36.223-22.478-7.25-39.705-9.087-49.942-3.718-15.466-11.162-32.872-12.61-52.411-3.39-53.871 41.106-65.33 93.034-40.052 152.262 16.058 2.666 33.444 3.815 50.292 8.163 4.258 1.099 7.645 4.814 11.948 5.985 22.093 6.017 44.237 15.338 67.289 22.137 22.43 6.615 45.746 10.712 68.759 16.294 22.75-39.967 33.715-96.204 38.111-161.51" fill="#687097"/>
    <g class="hair" id="small-hair1" serif:id="small-hair" fill="#4c5478">
      <path d="M102.373 550.297c-.026-1.773-33.455-2.066-50.609 8.4-4.54 2.771-19.625 34.809-18.278 35.962 1.348 1.153 21.822-26.275 26.362-29.045 17.154-10.466 42.565-12.582 42.525-15.317z"/>
      <path d="M101.886 550.069c.504-1.674-24.862-16.658-41.015-14.394-4.276.599-25.229 23.998-24.544 25.672.685 1.673 24.379-15.031 28.655-15.631 16.153-2.264 36.126 6.935 36.904 4.353z"/>
      <path d="M103.311 549.927c-.569-1.624-30.557 4.495-42.675 17.389-3.208 3.413-6.832 35.733-5.272 36.535 1.559.802 11.424-28.312 14.632-31.725 12.118-12.894 34.193-19.693 33.315-22.199z"/>
      <path d="M102.807 549.615c-.304-1.227-24.49 11.332-35.19 25.183-2.832 3.667-8.563 31.78-7.404 32.07 1.159.29 11.523-26.664 14.356-30.33 10.699-13.852 28.707-25.03 28.238-26.923z"/>
      <path d="M50.072 561.015c-.218 3.144 26.945-7.744 39.929-4.803 5.893 1.335 15.069.641 13.918-6.868-1.151-7.51-6.697-11.012-12.612-11.993-14.956-2.482-41.017 20.52-41.235 23.664z"/>
    </g>
    <g class="hair" id="small-hair2" serif:id="small-hair" fill="#4c5478">
      <path d="M186.005 578.622c-.045-1.58-29.415-2.264-44.351 6.849-3.953 2.413-16.799 30.783-15.601 31.827 1.198 1.045 18.837-23.147 22.79-25.559 14.936-9.113 37.232-10.678 37.162-13.117z"/>
      <path d="M185.575 578.413c.422-1.485-22.051-15.164-36.212-13.35-3.748.48-21.859 21.075-21.236 22.575.623 1.501 21.226-13.091 24.974-13.571 14.162-1.814 31.823 6.638 32.474 4.346z"/>
      <path d="M186.824 578.305c-.52-1.455-26.785 3.62-37.267 14.962-2.775 3.002-5.551 31.768-4.17 32.502 1.38.735 9.678-25.094 12.453-28.096 10.482-11.341 29.787-17.124 28.984-19.368z"/>
      <path d="M186.378 578.02c-.283-1.097-21.37 9.792-30.594 22.005-2.442 3.233-7.12 28.222-6.099 28.495 1.021.273 9.786-23.624 12.227-26.857 9.224-12.212 24.902-21.949 24.466-23.643z"/>
      <path d="M140.197 587.516c-.151 2.8 23.572-6.563 35.014-3.777 5.194 1.264 13.246.762 12.14-5.947-1.105-6.709-6.022-9.901-11.23-10.85-13.169-2.402-35.772 17.775-35.924 20.574z"/>
    </g>
    <path id="chest" d="M352.94 606.282c58.596-6.613 99.015-33.683 126.642-81.59 8.589-39.688-6.797-85.494-28.922-120.638-37.217 27.328-70.015 50.931-106.378 52.048-6.845 46.481-1.877 97.306 8.658 150.18z" fill="#d9d099"/>
    <path class="hair" id="small-hair3" serif:id="small-hair" d="M273.308 565.335c-11.992-11.844-26.564-15.315-43.984-17.438 13.319 5.612 23.974 10.96 27.092 19.23-12.26-5.007-22.325 1.299-30.863 8.917 9.293-3.787 18.065-4.607 25.602-2.283-12.41 3.659-20.23 10.908-25.246 20.463 9.01-7.632 17.904-12.248 25.969-11.519-9.037 5.384-13.389 12.627-14.449 21.582 6.191-10.86 13.439-17.925 21.606-21.701-5.922 5.016-10.253 10.704-11.852 17.546 3.913-5.877 9.176-10.144 14.961-13.014 3.143-6.964 6.505-14.169 11.164-21.783z" fill="#3f476a"/>
    <path d="M145.553 399.988c-7.981 17.861-16.083 35.086-23.574 59.868-9.927 32.84-15.026 65.664-15.51 65.427-5.973-2.928 3.981-94.322 39.084-125.295M197.047 403.057c-11.018 15.914-24.372 29.535-31.863 54.317-9.927 32.839-6.724 71.186-7.221 70.979-13.423-5.606-6.791-98.196 39.084-125.296M255.925 420.012c-12.262 14.976-26.667 27.479-36.127 51.579-12.535 31.935-12.426 70.415-12.904 70.169-12.929-6.668 1.126-98.424 49.031-121.748" fill="#565e8a"/>
    <path class="hair" id="small-hair4" serif:id="small-hair" d="M296.058 443.958c-10.389-10.357-36.333-27.132-50.966-21.109 6.271 4.351 24.443 8.863 29.37 14.424-18.948-8.864-39.123-2.4-59.947 12.179 28.44-7.805 47.628-10.153 52.855-4.269-23.526 1.416-39.292 12.796-50.779 27.868 10.568-6.965 20.473-11.61 27.837-11.146-12.179 6.394-21.791 14.799-26.187 24.236 13.851-8.858 27.624-15.635 40.004-13.227-16.154 2.397-31.021 18.739-35.119 30.908 7.671-8.037 25.971-17.73 35.948-22.154-14.267 10.432-22.131 24.09-20.887 32.442 3.517-10.528 13.495-17.901 21.467-22.093-5.946 7.144-8.86 20.881-9.899 28.596 4.121-9.365 8.724-21.591 14.97-24.557-5.063 7.476 1.677 21.307 1.667 28.449 5.139-10.265 1.498-23.432 9.898-28.394 11.04-7.119 18.1-24.17 19.768-52.153z" fill="#4c5478"/>
    <path d="M335.958 480.722c21.498 6.936 36.651 3.316 52.899-11.908 31.875 9.736 65.329-26.366 62.527-31.962M337.462 507.816c21.498 6.937 36.651 3.317 52.899-11.907 31.875 9.736 65.33-26.366 62.528-31.962M340.415 552.522c23.048 7.429 39.293 3.552 56.712-12.753 34.172 10.427 70.038-28.24 67.034-34.233M346.277 579.65c21.574 7.199 38.744 2.923 55.049-12.879 23.254 7.586 33.571-4.497 36.116-8.759" fill="none" stroke="#c7be83" stroke-width="4"/>
    <g id="scarf">
      <path d="M271.182 394.463c-3.838 10.258-7.651 20.515 1.742 30.806 16.003 19.184 39.609 30.355 71.256 30.529 43.277 2.315 80.935-15.672 113.284-43.15l-6.499-7.97-1.429-18.15-6.653-7.008c-46.999 43.454-104.342 48.024-171.701 14.943z" fill="#bb3624"/>
      <path d="M236.857 630.11c9.91-4.495 19.974-5.28 31.514-5.497l-1.61 7.062s64.712 3.973 77.886 2.533c3.939-.43 2.566-8.327 3.048-11.491 2.061-13.512 2.212-19.358 1.352-28.252-1.677-17.331-5.109-34.205-6.455-51.207-2.33-29.435-1.496-58.608 1.735-86.427l9.482-41.738c-11.893-7.466-20.607-13.026-28.462-4.506.728-.971-3.983-6.061-7.291-5.723-2.74.28-9.011 3.014-9.011 3.014-3.712 15.155-14.564 26.69-17.013 41.525-15.939 96.549-32.583 136.555-55.175 180.707z" fill="#bb3624"/>
      <clipPath id="_clip1">
        <path d="M236.857 630.11c9.91-4.495 19.974-5.28 31.514-5.497l-1.61 7.062s64.712 3.973 77.886 2.533c3.939-.43 2.566-8.327 3.048-11.491 2.061-13.512 2.212-19.358 1.352-28.252-1.677-17.331-5.109-34.205-6.455-51.207-2.33-29.435-1.496-58.608 1.735-86.427l9.482-41.738c-11.893-7.466-20.607-13.026-28.462-4.506.728-.971-3.983-6.061-7.291-5.723-2.74.28-9.011 3.014-9.011 3.014-3.712 15.155-14.564 26.69-17.013 41.525-15.939 96.549-32.583 136.555-55.175 180.707z"/>
      </clipPath>
      <g clip-path="url(#_clip1)">
        <path d="M268.638 624.896c3.269-17.466 21.701-54.804 31.336-80.157.454 32.425-28.443 82.495-31.336 80.157z" fill="#982414"/>
      </g>
    </g>
    <path d="M324.043 410.885s-10.559 39.001-15.875 58.011c-1.698-25.948 11.332-63.141 15.875-58.011zM306.565 409.073c-9.089-2.307-20.636 21.482-15.457 36.262-.924-16.116 22.065-34.585 15.457-36.262zM350.917 415.992s2.77 25.875 12.83 27.635c13.068 2.287 65.576-13.916 65.576-13.916-20.051 15.072-46.633 25.112-84.284 26.625l5.878-40.344z" fill="#982414"/>
  </g>
</svg>
              
            
!

CSS

              
                body {
  max-width: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.worm {
  width: 400px;
}
              
            
!

JS

              
                
              
            
!
999px

Console