Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<svg viewBox="2 115 149 221" xmlns="http://www.w3.org/2000/svg" style="height: 90vmin;
  width: 400vmin; border:1px solid black;">
  <title>すずめ</title>
  <defs>
    <linearGradient id="gradient-0" gradientUnits="userSpaceOnUse" x1="343.76" y1="276.809" x2="343.76" y2="306.285" gradientTransform="matrix(1.000001, 0, 0, 1, -0.000356, 0)">
      <stop offset="0" style="stop-color: rgb(255, 246, 241);"/>
      <stop offset="1" style="stop-color: rgb(53, 36, 27);"/>
    </linearGradient>
    <linearGradient id="gradient-1" gradientUnits="userSpaceOnUse" x1="340.309" y1="272.011" x2="340.309" y2="304.097" gradientTransform="matrix(1, 0, 0, 1, 0, 0)">
      <stop offset="0" style="stop-color: rgb(237, 237, 237);"/>
      <stop offset="1" style="stop-color: rgba(157, 108, 80, 1)"/>
    </linearGradient>
    <linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="245.407" y1="183.484" x2="245.407" y2="300.814" gradientTransform="matrix(0.717982, -0.696064, 0.267329, 0.275747, 40.624532, 377.33943)">
      <stop offset="0" style="stop-color: rgba(222, 212, 212, 1)"/>
      <stop offset="1" style="stop-color: rgb(160, 127, 111);"/>
    </linearGradient>
    <linearGradient id="gradient-2" gradientUnits="userSpaceOnUse" x1="245.407" y1="183.484" x2="245.407" y2="300.814" gradientTransform="matrix(0.717982, -0.696064, 0.267329, 0.275747, 40.624493, 377.339418)">
      <stop offset="0" style="stop-color: rgba(222, 212, 212, 1)"/>
      <stop offset="1" style="stop-color: rgb(160, 127, 111);"/>
    </linearGradient>
    <mask id="mask-0">
      <path d="M 180.223 207.233 C 180.131 198.007 187.332 187.24 201.549 185.362 C 215.766 183.484 221.779 188.966 227.355 195.857 C 232.931 202.748 256.615 228.977 268.234 235.808 C 279.853 242.639 290.314 260.243 310.682 281.675 C 283.342 300.814 249.836 298.688 227.416 283.924 C 204.996 269.16 198.815 244.418 196.627 238.403 C 194.439 232.388 180.364 221.38 180.223 207.233 Z" style="stroke: black; fill: url(#gradient-2);"/>
    </mask>
  </defs>
  <g font-family="Sawarabi Mincho" font-size="160">
    <text x="-380" y="270" fill="black">すずめ</text></g>
  <g>
    <g>
      <g transform="matrix(1, 0, 0, 1, 11.131656, -9.707972)">
        <desc>右足</desc>
        <path d="M 256.812 306.48 C 256.812 306.48 243.288 318.988 240.408 320 C 239.647 320.267 234.057 321.867 230.488 322.936 C 226.395 324.161 221.645 326.605 221.353 327.481 C 221.056 328.372 228.281 325.93 233.988 325.091 C 238.794 324.384 243.051 325.165 244.795 325.455 C 247.239 325.861 254.526 325.798 259.286 325.838 C 262.187 325.863 264.035 326.199 263.864 325.889 C 259.968 322.548 248.959 322.269 247.871 321.163 C 246.783 320.057 263.612 307.956 263.612 307.956" style="stroke: black; fill: rgb(175, 153, 152);"/>
        <path d="M 258.961 292.107 C 258.903 296.83 251.961 305.289 258.7 309.049 C 265.439 312.809 270.036 303.059 270.773 297.929 C 271.313 294.169 265.871 287.641 265.871 287.641" style="stroke: black; fill: rgb(132, 106, 87);"/>
        <path d="M 257.857 309.173 C 257.857 309.299 255.737 311.12 254.901 311.678 C 254.066 312.235 251.176 312.944 251.24 312.929 C 251.304 312.915 253.04 313.367 253.04 313.367 L 245.803 319.279 C 244.825 319.915 246.893 319.207 247.428 318.86 C 247.099 319.158 254.338 313.851 256.187 312.179 L 258.756 309.674 L 257.857 309.173 Z" style="fill: rgb(201, 182, 168);"/>
        <path d="M 227.899 325.439 L 227.062 324.243 C 227.062 324.243 222.056 326.518 221.517 327.355 C 220.978 328.192 230.052 325.738 230.351 325.738 C 230.65 325.738 236.75 324.246 240.637 324.664 C 244.524 325.082 254.81 326.277 257.859 325.798 C 260.908 325.319 263.062 326.635 264.019 326.216 C 264.976 325.797 258.145 323.324 257.547 323.443 C 256.949 323.562 256.424 324.961 255.826 325.08 C 255.228 325.199 251.461 324.064 249.069 323.765 C 246.677 323.466 236.511 324.064 235.075 324.184 C 233.639 324.304 228.497 325.918 227.899 325.439 Z" style="fill: rgb(127, 112, 104);"/>
      </g>
      <g>
        <desc>左足</desc>
        <path d="M 256.812 306.48 C 256.812 306.48 243.288 318.988 240.408 320 C 239.647 320.267 234.057 321.867 230.488 322.936 C 226.395 324.161 221.645 326.605 221.353 327.481 C 221.056 328.372 228.281 325.93 233.988 325.091 C 238.794 324.384 243.051 325.165 244.795 325.455 C 247.239 325.861 254.526 325.798 259.286 325.838 C 262.187 325.863 264.035 326.199 263.864 325.889 C 259.968 322.548 248.959 322.269 247.871 321.163 C 246.783 320.057 263.612 307.956 263.612 307.956" style="stroke: black; fill: rgb(255, 223, 221);"/>
        <path d="M 258.961 292.107 C 258.903 296.83 251.961 305.289 258.7 309.049 C 265.439 312.809 270.036 303.059 270.773 297.929 C 271.313 294.169 265.871 287.641 265.871 287.641" style="stroke: black; fill: rgb(177, 151, 133);"/>
        <path d="M 257.857 309.173 C 257.857 309.299 255.737 311.12 254.901 311.678 C 254.066 312.235 251.176 312.944 251.24 312.929 C 251.304 312.915 253.04 313.367 253.04 313.367 L 245.803 319.279 C 244.825 319.915 246.893 319.207 247.428 318.86 C 247.099 319.158 254.338 313.851 256.187 312.179 L 258.756 309.674 L 257.857 309.173 Z" style="fill: rgb(201, 182, 168);"/>
        <path d="M 227.899 325.439 L 227.062 324.243 C 227.062 324.243 222.056 326.518 221.517 327.355 C 220.978 328.192 230.052 325.738 230.351 325.738 C 230.65 325.738 236.75 324.246 240.637 324.664 C 244.524 325.082 254.81 326.277 257.859 325.798 C 260.908 325.319 263.062 326.635 264.019 326.216 C 264.976 325.797 258.145 323.324 257.547 323.443 C 256.949 323.562 256.424 324.961 255.826 325.08 C 255.228 325.199 251.461 324.064 249.069 323.765 C 246.677 323.466 236.511 324.064 235.075 324.184 C 233.639 324.304 228.497 325.918 227.899 325.439 Z" style="fill: rgb(199, 179, 168);"/>
      </g>
        <animateTransform attributeName="transform" id="s31" dur="0.4s" type="rotate" values="0,250,295;-40,260,285; 0,250,295" begin="0s;s31.end" calcMode="spline" keyTimes="0;0.3;1" keySplines="0.0 0.2 0.58 1.0;0.0 0.3 0.58 1.0"/>
    </g>
    <g>
      <desc>尾</desc>
      <path d="M 299.988 276.35 C 299.988 276.35 378.46 304.097 379.545 301.791 C 380.63 299.485 302.852 272.558 301.758 272.011" style="stroke: black; fill: url(#gradient-1);"/>
      <path d="M 305.246 281.148 C 305.246 281.148 380.104 306.285 381.189 303.979 C 382.274 301.673 308.11 277.356 307.016 276.809" style="stroke: black; fill: url(#gradient-0);"/>
      <animateTransform attributeName="transform" id="s32" dur="0.4s" type="rotate" values="0,300,275;10,300,275; 0,300,275"  begin="0s; s32.end" calcMode="spline" keyTimes="0;0.6;1" keySplines="0.0 0.2 0.58 1.0;0.0 0.3 0.58 1.0" />
    </g>
    <path d="M 180.223 207.233 C 180.131 198.007 187.332 187.24 201.549 185.362 C 215.766 183.484 221.779 188.966 227.355 195.857 C 232.931 202.748 256.615 228.977 268.234 235.808 C 279.853 242.639 290.314 260.243 310.682 281.675 C 283.342 300.814 249.836 298.688 227.416 283.924 C 204.996 269.16 198.815 244.418 196.627 238.403 C 194.439 232.388 180.364 221.38 180.223 207.233 Z" style="stroke: black; fill: url(#gradient-3);"/>
    <path d="M 180.704 198.336 C 180.704 198.336 187.752 203.504 196.915 203.504 C 206.078 203.504 217.121 202.564 220.88 205.619 C 224.639 208.674 222.055 219.481 224.404 217.366 C 226.753 215.251 234.742 209.378 234.977 205.619 C 235.212 201.86 223.699 180.949 210.542 182.359 C 197.385 183.769 186.813 185.883 180.704 198.336 Z" style="fill: rgb(171, 85, 35); mask: url(#mask-0);"/>
    <path d="M 180.994 199.031 C 180.994 199.031 188.692 203.315 193.315 199.149 C 197.938 194.983 208.52 198.774 207.678 204.213 C 206.836 209.652 202.497 210.948 198.352 210.43 C 194.207 209.912 191.347 211.093 189.803 212.503 C 188.259 213.913 196.639 224.779 199.668 228.875 C 202.697 232.971 199.388 238.669 197.057 238.151 C 194.726 237.633 179.44 220.534 178.922 216.648 C 178.404 212.762 179.44 200.067 180.994 199.031 Z" style="stroke: black; mask: url(#mask-0);"/>
    <path d="M 211.137 212.391 C 207.622 214.132 205.151 213.927 205.153 219.855 C 205.155 225.783 215.976 222.117 218.868 219.991 C 221.761 217.866 221.622 214.768 219.091 210.518 C 216.559 206.267 214.336 210.806 211.137 212.391 Z" style="fill: rgb(14, 18, 1);"/>
    <ellipse cx="62.541" cy="33.11" rx="4.333" ry="4.333" style="stroke: rgb(128, 128, 128);" transform="matrix(1, 0, 0, 0.999999, 135.629166, 170.084281)"/>
    <path d="M 189.086 217.439 C 189.274 217.627 185.641 213.208 184.647 211.805 C 182.907 209.073 184.054 207.475 182.735 206.344 C 173.534 206.344 165.941 220.124 166.079 220.124 C 166.025 220.109 178.991 216.036 189.086 217.439 Z" style="stroke: black; stroke-linejoin: round; fill: rgb(140, 128, 128);"/>
    <path d="M 188.125 222.404 L 188.615 217.124 C 182.068 217.124 167.728 219.67 167.826 219.67 C 167.788 219.659 180.942 221.406 188.125 222.404 Z" style="stroke: black; stroke-linejoin: round; fill: rgb(140, 128, 128);"/>
    <ellipse cx="34.584" cy="12.385" rx="0.857" ry="0.857" style="fill: rgb(216, 216, 216);" transform="matrix(0.999991, 0, 0, 0.999992, 162.379782, 190.021087)"/>
    <g>
      <desc>羽</desc>
      <path d="M 239.34 217.258 C 232.467 222.962 228.814 241.555 243.3 257.808 C 257.786 274.061 299.184 281.154 315.836 277.774 C 311.162 271.113 252.153 212.023 239.34 217.258 Z" style="stroke: black; fill: rgb(187, 115, 74);"/>
      <path d="M 248.972 223.588 C 245.351 221.425 242.524 218.548 247.948 220.207 C 253.371 221.867 263.211 232.392 248.972 223.588 Z" style="fill: rgb(68, 70, 63);"/>
      <path d="M 244.378 253.28 C 242.784 252.637 243.335 248.534 246.696 248.591 C 250.057 248.648 252.927 257.912 244.378 253.28 Z" style="fill: rgb(204, 181, 180);" transform="matrix(0.960263, 0.279097, -0.279097, 0.960263, 80.52285, -59.113395)"/>
      <path d="M 279.894 273.05 C 277.934 272.093 276.074 263.601 282.745 266.071 C 287.41 267.798 317.522 280.687 314.228 281.342 C 309.536 282.274 285.589 277.505 279.894 273.05 Z" style="stroke: rgb(0, 0, 0); fill: rgb(197, 162, 142);" transform="matrix(0.998653, -0.051886, 0.051886, 0.998653, -13.761861, 15.767314)"/>
      <path d="M 283.096 269.389 C 281.135 268.431 281.56 261.102 288.232 263.572 C 292.896 265.298 321.446 279.641 318.15 280.296 C 313.461 281.227 288.792 273.844 283.096 269.389 Z" style="stroke: rgb(0, 0, 0); fill: rgb(197, 162, 142);" transform="matrix(0.998653, -0.051886, 0.051886, 0.998653, -13.66382, 15.998032)"/>
      <path d="M 288.305 266.144 C 286.345 265.188 285.804 259.854 289.471 261.306 C 294.107 263.14 326.445 279.497 323.151 280.151 C 318.459 281.083 294.001 270.599 288.305 266.144 Z" style="stroke: rgb(0, 0, 0); fill: rgb(197, 162, 142);" transform="matrix(0.998653, -0.051886, 0.051886, 0.998653, -13.621192, 16.247904)"/>
      <path d="M 252.829 249.204 C 251.235 248.561 251.786 244.458 255.147 244.515 C 258.508 244.572 261.378 253.836 252.829 249.204 Z" style="fill: rgb(204, 181, 180);"/>
      <path d="M 260.086 244.379 C 258.823 243.758 259.259 239.797 261.922 239.852 C 264.585 239.907 266.858 248.852 260.086 244.379 Z" style="fill: rgb(204, 181, 180);"/>
      <path d="M 287.3 263.338 C 286.068 262.649 284.901 256.535 289.091 258.314 C 292.022 259.557 310.831 271.248 308.761 271.72 C 305.812 272.391 290.877 266.548 287.3 263.338 Z" style="stroke: rgb(0, 0, 0); fill: rgb(197, 162, 142);"/>
      <path d="M 287.641 260.007 C 286.408 259.319 286.675 254.041 290.868 255.82 C 293.797 257.063 308.258 268.809 306.14 268.598 C 303.413 268.327 291.218 263.218 287.641 260.007 Z" style="stroke: rgb(0, 0, 0); fill: rgb(197, 162, 142);"/>
      <path d="M 290.161 256.91 C 288.93 256.221 288.59 252.382 290.894 253.426 C 293.807 254.748 304.175 264.923 303.466 265.218 C 302.326 265.692 293.739 260.118 290.161 256.91 Z" style="stroke: rgb(0, 0, 0); fill: rgb(197, 162, 142);"/>
      <path d="M 270.684 262.48 C 268.055 261.464 265.88 252.828 274.733 254.641 C 283.586 256.455 298.198 276.751 270.684 262.48 Z" style="fill: rgb(68, 70, 63); stroke: rgb(164, 137, 137);"/>
      <path d="M 277.785 257.392 C 275.359 256.446 273.352 248.409 281.52 250.097 C 289.686 251.785 303.163 270.672 277.785 257.392 Z" style="fill: rgb(68, 70, 63); stroke: rgb(164, 137, 137);"/>
      <path d="M 265.635 235.445 C 262.048 233.227 259.188 230.404 264.611 232.064 C 270.034 233.724 279.874 244.249 265.635 235.445 Z" style="fill: rgb(68, 70, 63);"/>
      <path d="M 239.701 228.096 C 238.06 227.434 236.504 221.563 242.086 223.271 C 247.668 224.979 255.529 238.33 239.701 228.096 Z" style="fill: rgb(68, 70, 63);"/>
      <path d="M 246.08 244.882 C 244.486 244.239 241.961 239.294 247.385 240.953 C 252.808 242.613 261.459 254.826 246.08 244.882 Z" style="fill: rgb(68, 70, 63);"/>
      <path d="M 241.188 249.993 C 239.895 249.35 238.3 244.474 243.068 245.304 C 247.836 246.134 255.904 254.907 241.188 249.993 Z" style="fill: rgb(68, 70, 63);" transform="matrix(0.972221, 0.234065, -0.234065, 0.972221, 65.308081, -50.901776)"/>
      <path d="M 242.735 239.988 C 241.094 239.326 239.538 233.455 245.12 235.163 C 250.702 236.871 258.563 250.222 242.735 239.988 Z" style="fill: rgb(171, 85, 35); stroke: rgb(187, 115, 74);"/>
      <path d="M 236.573 243.265 C 234.932 242.603 233.376 236.732 238.958 238.44 C 244.54 240.148 252.401 253.499 236.573 243.265 Z" style="fill: rgb(171, 85, 35); stroke: rgb(187, 115, 74);"/>
      <path d="M 246.865 237.002 C 244.985 236.329 242.306 230.6 248.833 232.775 C 255.361 234.95 266.679 252.984 246.865 237.002 Z" style="fill: rgb(68, 70, 63);"/>
      <path d="M 239.335 232.541 C 237.694 231.879 236.138 226.008 241.72 227.716 C 247.302 229.424 255.163 242.775 239.335 232.541 Z" style="fill: rgb(171, 85, 35); stroke: rgb(187, 115, 74);"/>
      <path d="M 280.371 252.556 C 278.638 251.852 277.202 245.882 283.044 247.135 C 288.887 248.391 298.53 262.42 280.371 252.556 Z" style="fill: rgb(68, 70, 63); stroke: rgb(164, 137, 137);"/>
      <path d="M 275.188 245.746 C 273.447 245.14 271.795 239.76 277.72 241.325 C 283.645 242.89 291.989 255.124 275.188 245.746 Z" style="fill: rgb(171, 85, 35); stroke: rgb(187, 115, 74);"/>
      <path d="M 262.455 258.122 C 260.231 257.352 258.122 250.517 265.688 252.505 C 273.255 254.493 283.911 270.036 262.455 258.122 Z" style="fill: rgb(171, 85, 35); stroke: rgb(187, 115, 74);" transform="matrix(0.971807, -0.235777, 0.235777, 0.971807, -53.72651, 71.237422)" bx:origin="0.547 0.338"/>
      <path d="M 275.784 268.973 C 274.591 268.426 273.403 263.136 277.623 264.749 C 281.842 266.363 289.32 279.99 275.784 268.973 Z" style="fill: rgb(68, 70, 63); stroke: rgb(164, 137, 137);" transform="matrix(0.970817, -0.239822, 0.239822, 0.970817, -56.915768, 75.401738)"/>
      <path d="M 255.574 262.481 C 253.76 261.693 251.954 254.079 258.368 256.402 C 264.782 258.724 276.15 278.334 255.574 262.481 Z" style="fill: rgb(68, 70, 63); stroke: rgb(164, 137, 137);" transform="matrix(0.998875, 0.047418, -0.047418, 0.998875, 12.919987, -12.221357)"/>
      <path d="M 272.695 271.919 C 271.502 271.372 270.314 266.082 274.534 267.695 C 278.753 269.309 286.231 282.936 272.695 271.919 Z" style="fill: rgb(68, 70, 63); stroke: rgb(164, 137, 137);" transform="matrix(0.970817, -0.239822, 0.239822, 0.970817, -57.712439, 74.74689)"/>
      <path d="M 268.768 243.041 C 266.888 242.368 261.62 237.564 268.147 239.739 C 274.675 241.914 280.63 252.55 268.768 243.041 Z" style="fill: rgb(68, 70, 63);"/>
      <path d="M 269.652 247.451 C 267.772 246.778 262.504 241.974 269.031 244.149 C 275.559 246.324 281.514 256.96 269.652 247.451 Z" style="fill: rgb(68, 70, 63);" transform="matrix(0.996485, -0.083776, 0.083776, 0.996485, -19.943127, 23.664796)"/>
      <animateTransform attributeName="transform" id="s33" dur="0.4s" type="rotate" values="0,250,230;-10,250,230; 0,250,230"  begin="0s; s33.end" calcMode="spline" keyTimes="0;0.3;1" keySplines="0.0 0.0 0.58 1.0;0.0 0.0 0.58 1.0"/>
    </g>
    <animateMotion id="s34" dur="0.4s" path="M0 0 Q -28 -82 -80 0" begin="0s; s34.end" repeatCount="10" accumulate="sum" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.0 0.2 0.58 1.0;0.0 0.3 0.58 1.0" />
  </g>
</svg>
!

CSS
!

JS 

              
                "🐔 ♥️"
!
999px

Console