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

              
                <svg id="normal" viewBox="0 0 640 640" width="320" height="320" xmlns="http://www.w3.org/2000/svg" >
  
  <defs>
     <ellipse id="kage" style="fill: rgb(177, 173, 173);" transform="matrix(0.023593001067638394, 0.9997220635414122, -1.0001959800720215, 0.0035110001917928453, 1441.7421874999998, 407.8441162109375)" cx="124.259" cy="1118.634" rx="46.193" ry="146.73"/>
    
     <path id="body" style="fill: rgba(0, 149, 255, 0.8);">
      <animate dur="5s" repeatCount="indefinite" attributeName="d" additive="sum" attributeType="XML" values="
        M 321.564 551.833 C 198.774 550.303 116.813 478.299 124.221 406.418 C 132.427 326.791 136.663 332.966 172.951 297.524 C 206.533 264.725 241.277 263.319 257.606 245.37 C 275.718 225.461 292.504 154.013 306.814 127.853 C 311.774 118.803 324.654 117.183 332.254 130.403 C 341.044 145.693 345.283 202.8 376.423 240.567 C 401.366 270.818 416.495 257.192 460.623 296.894 C 490.033 323.354 509.829 343.557 511.448 411.047 C 513.454 494.677 444.344 553.353 321.564 551.833;M 319.648 551.84 C 189.921 550.5 103.688 487.466 111.879 424.54 C 120.953 354.833 125.397 360.239 163.918 329.212 C 199.563 300.5 236.282 299.268 253.626 283.555 C 272.862 266.126 290.959 203.579 306.212 180.679 C 311.497 172.756 325.114 171.338 333.077 182.911 C 342.286 196.295 346.476 246.289 379.186 279.351 C 405.387 305.834 421.441 293.905 467.862 328.661 C 498.803 351.824 519.615 369.51 520.984 428.593 C 522.68 501.804 449.365 553.171 319.648 551.84;M 321.564 551.833 C 198.774 550.303 116.813 478.299 124.221 406.418 C 132.427 326.791 136.663 332.966 172.951 297.524 C 206.533 264.725 241.277 263.319 257.606 245.37 C 275.718 225.461 292.504 154.013 306.814 127.853 C 311.774 118.803 324.654 117.183 332.254 130.403 C 341.044 145.693 345.283 202.8 376.423 240.567 C 401.366 270.818 416.495 257.192 460.623 296.894 C 490.033 323.354 509.829 343.557 511.448 411.047 C 513.454 494.677 444.344 553.353 321.564 551.833;">
      </animate>
    </path>
    <path id="eyeL1" d="M 234.764 406.444 C 224.354 387.604 231.704 364.154 251.184 354.064 C 270.664 343.974 294.904 351.064 305.314 369.914 C 315.724 388.754 308.374 412.204 288.894 422.294 C 269.404 432.384 245.174 425.294 234.764 406.444 Z" style="fill: rgb(255, 255, 255);"/>
    
    <path id="eyeR1" d="M 333.888 407.914 C 322.908 389.524 329.028 365.784 347.558 354.884 C 366.088 343.994 390.008 350.064 400.988 368.454 C 411.968 386.834 405.848 410.574 387.318 421.474 C 368.788 432.374 344.868 426.294 333.888 407.914 Z" style="fill: rgb(251, 251, 251);"/>

    <path id="eyeL2" d="M 254.388 400.726 C 247.228 392.766 247.868 380.506 255.828 373.346 C 263.798 366.176 276.058 366.826 283.218 374.786 C 290.388 382.746 289.738 395.006 281.778 402.166 C 273.818 409.336 261.558 408.686 254.388 400.726 Z"/>
    
    <path id="eyeR2" d="M 354.598 402.593 C 346.638 395.423 345.998 383.163 353.158 375.203 C 360.328 367.243 372.588 366.603 380.548 373.763 C 388.508 380.933 389.148 393.193 381.988 401.153 C 374.818 409.113 362.558 409.753 354.598 402.593 Z"/>
    
     <path id="mouth" d="M 242.618 450.713 C 261.081 455.473 267.717 460.205 293.277 463.652 C 318.827 467.107 310.918 468.077 342.698 464.923 C 374.487 461.768 376.852 453.161 397.238 447.522 C 417.624 441.891 434.886 464.98 372.573 481.624 C 345.154 488.946 306.855 489.781 274.633 483.03 C 242.42 476.278 237.545 473.801 227.225 467.649 C 216.915 461.504 224.146 445.952 242.618 450.713 Z" style="fill: rgba(255, 0, 0, 0.7);"/>
  </defs>
  
  
  <a xlink:href="https://pastel.repop.jp/">
 <g>
   <use xlink:href="#kage"></use>
   <use xlink:href="#body"></use>

  <g>
  <use xlink:href="#eyeL1"></use>
  <use xlink:href="#eyeR1"></use>
  <use xlink:href="#eyeL2"></use>
  <use xlink:href="#eyeR2"></use>
  <use xlink:href="#mouth"></use>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="2s" repeatCount="indefinite" values="0 0;0 10;0 0" />
   </g>
 </g>
</a>
</svg>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console