Source: gsap/gsap-animate-along-a-path/LICENSE.md

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <link rel="apple-touch-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-touch-de50acbf5d634ec6791894eba4ba9cf490f709b3d742597c6fc4b734e6492a5a.png">
  <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,400italic,700italic,900' rel='stylesheet'>
  <link rel="stylesheet" href="https://blog.codepen.io/wp-content/themes/codepen-5/style.css?v=muolnm85obi3b80rrc">

  <title>Licensing &#8211; CodePen</title>
<meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//cpwebassets.codepen.io' />
<link rel='preconnect' href='//c0.wp.com' />
<link rel="alternate" type="application/rss+xml" title="CodePen &raquo; Licensing Comments Feed" href="https://blog.codepen.io/documentation/licensing/feed/" />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://blog.codepen.io/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.codepen.io%2Fdocumentation%2Flicensing%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://blog.codepen.io/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.codepen.io%2Fdocumentation%2Flicensing%2F&#038;format=xml" />
<style id="wp-img-auto-sizes-contain-inline-css">
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id="wp-block-library-inline-css">
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
</style>

<style id="global-styles-inline-css">
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:root { --wp--style--global--content-size: 720px;--wp--style--global--wide-size: 720px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{font-family: var(--wp--preset--font-family--system-font);line-height: 1.75;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
</style>

<link rel='stylesheet' id='wthf-style-css' href='https://blog.codepen.io/wp-content/plugins/was-this-article-helpful/css/style.css?ver=7.1.3' media='all' />
<link rel='stylesheet' id='jetpack-instant-search-css' href='https://blog.codepen.io/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.chunk-main-payload.css?minify=false&#038;ver=d03ec9f0ac110a671db7' media='all' />
<style id="jetpack-stats-inline-css">
img#wpstats{display:none}
/*# sourceURL=jetpack-stats-inline-css */
</style>
<script id="jquery-core-js" src="https://c0.wp.com/c/7.1.3/wp-includes/js/jquery/jquery.min.js"></script>
<script id="jquery-migrate-js" src="https://c0.wp.com/c/7.1.3/wp-includes/js/jquery/jquery-migrate.min.js"></script>
<link rel="https://api.w.org/" href="https://blog.codepen.io/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://blog.codepen.io/wp-json/wp/v2/pages/453" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://blog.codepen.io/xmlrpc.php?rsd" />

<link rel="canonical" href="https://blog.codepen.io/documentation/licensing/" />
<link rel='shortlink' href='https://blog.codepen.io/?p=453' />
<!-- Better Art Direction Styles -->



<link rel="alternate" type="application/rss+xml" title="Podcast RSS feed" href="https://blog.codepen.io/feed/podcast" />

<meta name="description" content="What License Is Code I Post to CodePen? In short: public Pens are MIT Licensed, private Pens are owned by you with no implicit license. Read on for more detail. If your Pen is Public... By default, Pens you save on CodePen are public. PRO accounts have the ability to save as private, so for&hellip;" />

<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Licensing" />
<meta property="og:url" content="https://blog.codepen.io/documentation/licensing/" />
<meta property="og:description" content="What License Is Code I Post to CodePen? In short: public Pens are MIT Licensed, private Pens are owned by you with no implicit license. Read on for more detail. If your Pen is Public&#8230; By defa…" />
<meta property="article:published_time" content="2013-01-07T21:18:11+00:00" />
<meta property="article:modified_time" content="2020-04-16T21:44:58+00:00" />
<meta property="og:site_name" content="CodePen" />
<meta property="og:image" content="https://s0.wp.com/i/blank.jpg" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<meta property="og:image:alt" content="" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:site" content="@codepen" />
<meta name="twitter:text:title" content="Licensing" />
<meta name="twitter:card" content="summary" />

<!-- End Jetpack Open Graph Tags -->
</head>

<body class="wp-singular page-template-default page page-id-453 page-child parent-pageid-10 wp-theme-codepen-5 jps-theme-codepen-5">

  <header class="main-header">

  <h1 class="logo">
    <a href="https://codepen.io" class="large-screen-logo">
      CodePen
    </a>
  </h1>

  <nav>
    <ul>
      <li class="primary-blog"><a href="/">Blog</a></li>
      <li class="primary-docs"><a href="/docs/">Docs</a></li>
      <li class="primary-podcast"><a href="/radio/">Podcast</a></li>
      <li><a href="https://codepen.io">← Back to Main Site</a></li>
    </ul>
  </nav>

</header>
  <div class="search-form">
    <form method="get" action="/">
      <div>
        <label for="s">
          <span class="screen-reader-text">
            Search
          </span>
        </label>
        <input type="hidden" name="post_types" value="page">
        <input value="" type="search" name="s" id="s" class="search-input" placeholder="Search Documentation...">
      </div>
    </form>
  </div>

<header class="mega-header mega-header-documentation">

  <div class="width-wrapper">

    <h1>
      Licensing    </h1>


  </div>

</header>

<div class="page-wrap">

  <div class="width-wrapper docs-wrap">

    <article class="docs-content article article-on-blog post-453 page type-page status-publish hentry">

      <a href="#docs-nav" class="jump-docs-nav">Jump to Docs Navigation</a>

      <div class="article article-text">
        <blockquote><p>
  What License Is Code I Post to CodePen?
</p></blockquote>
<p>In short: public Pens are <a href="http://opensource.org/licenses/MIT">MIT Licensed</a>, private Pens are owned by you with no implicit license. Read on for more detail.</p>
<h3><a href="#if-your-pen-is-public" aria-hidden="true" class="aal_anchor" id="if-your-pen-is-public"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>If your Pen is Public&#8230;</h3>
<p>By default, Pens you save on CodePen are public. PRO accounts have the ability to save as private, so for information on that jump down to the next section. Public pens are automatically MIT licensed. We include it on the <a href="https://blog.codepen.io/documentation/views/details-view/">Details View</a> of your Pen and in the HTML source when the Pen is viewed in its &#8220;<a href="https://blog.codepen.io/documentation/views/full-page-view/">Full Page</a>&#8221; view. But the license applies to the Pen itself, wherever it is viewed. Here is that license:</p>
<pre><code>&lt;!--

Copyright (c) YEAR - YOUR NAME - URL TO ORIGINAL

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify,
merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall
be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.

--&gt;
</code></pre>
<p>The gist of it is <strong>open source</strong>. Anyone can use the code you put on CodePen for whatever they wish &#8211; but if they do &#8211; that code also must have this same license. This is to encourage open sharing of code. Remember that any code you post on CodePen should be compatible with this license or it is subject to removal.</p>
<h3><a href="#if-your-pen-is-private" aria-hidden="true" class="aal_anchor" id="if-your-pen-is-private"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>If your Pen is private&#8230;</h3>
<p>We don&#8217;t put any license at all on the code. It belongs entirely to you. You may still apply a license to it if you wish. To do that, we recommend putting an HTML comment into the HTML of your Pen stating the license. Remember that private Pens are still shareable if you wish. So you could, for example, send a client a private Pen of a mockup you have done for them, and that code is still owned by you. They couldn&#8217;t just take it and use it like they could if it was MIT licensed.</p>
<div id="was-this-helpful" data-post-id="453" data-thank-text="Thanks for your feedback!"><div id="wthf-title">Was this article helpful?</div><div id="wthf-yes-no"><span data-value="1">Yes</span><span data-value="0">No</span></div></div>      </div>

    </article>

    <aside class="docs-sidebar">
      <div class="docs-toggle">
  <a href="/documentation/" class="docs-toggle__link active">Classic Docs</a>
  <a href="/docs/" class="docs-toggle__link"><span class="codepen-20-badge codepen-20-badge-small"><span class="inner"></span></span> Docs</a>
</div>
      <div class="sidebar-styles">
        <div class="docs-sidebar-group" id="docs-nav">

<h2>Pens</h2>

<div class="menu-pens-container"><ul id="menu-pens" class="menu"><li id="menu-item-13501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13501"><a href="https://blog.codepen.io/documentation/pen-editor/">The Pen Editor</a></li>
<li id="menu-item-7216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7216"><a href="https://blog.codepen.io/documentation/auto-updating-previews/">Auto Updating Previews</a></li>
<li id="menu-item-8182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8182"><a href="https://blog.codepen.io/documentation/full-page-view/">Full Page View</a></li>
<li id="menu-item-8609" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8609"><a href="https://blog.codepen.io/documentation/details-view/">Details View</a></li>
<li id="menu-item-8181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8181"><a href="https://blog.codepen.io/documentation/debug-view/">Debug View</a></li>
<li id="menu-item-13290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13290"><a href="https://blog.codepen.io/documentation/live-view/"><span class="badge badge-pro">PRO</span> Live View</a></li>
<li id="menu-item-13291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13291"><a href="https://blog.codepen.io/documentation/collab-mode/"><span class="badge badge-pro">PRO</span> Collab Mode</a></li>
<li id="menu-item-13292" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13292"><a href="https://blog.codepen.io/documentation/professor-mode/"><span class="badge badge-pro">PRO</span> Professor Mode</a></li>
<li id="menu-item-13293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13293"><a href="https://blog.codepen.io/documentation/presentation-mode/"><span class="badge badge-pro">PRO</span> Presentation Mode</a></li>
<li id="menu-item-7224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7224"><a href="https://blog.codepen.io/documentation/adding-external-resources/">Adding External Resources</a></li>
<li id="menu-item-7219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7219"><a href="https://blog.codepen.io/documentation/using-html-preprocessors/">Using HTML Preprocessors</a></li>
<li id="menu-item-7220" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7220"><a href="https://blog.codepen.io/documentation/using-css-preprocessors/">Using CSS Preprocessors</a>
<ul class="sub-menu">
	<li id="menu-item-15387" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15387"><a href="https://blog.codepen.io/documentation/css-processor-add-ons/">CSS Processor Add-Ons</a></li>
</ul>
</li>
<li id="menu-item-7223" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7223"><a href="https://blog.codepen.io/documentation/using-javascript-libraries/">Using JS Libraries</a></li>
<li id="menu-item-7308" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7308"><a href="https://blog.codepen.io/documentation/turn-off-javascript-in-previews/">Turn Off JavaScript in Previews</a></li>
<li id="menu-item-7215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7215"><a href="https://blog.codepen.io/documentation/autosave/">Autosave</a></li>
<li id="menu-item-7179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7179"><a href="https://blog.codepen.io/documentation/autocomplete/">Autocomplete</a></li>
<li id="menu-item-7180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7180"><a href="https://blog.codepen.io/documentation/console/">Console</a></li>
<li id="menu-item-7221" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7221"><a href="https://blog.codepen.io/documentation/full-screen-editing/">Resizing Code Editor Panels</a></li>
<li id="menu-item-7181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7181"><a href="https://blog.codepen.io/documentation/code-commenting/">Code Commenting</a></li>
<li id="menu-item-7307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7307"><a href="https://blog.codepen.io/documentation/forks/">Forks</a></li>
<li id="menu-item-7225" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7225"><a href="https://blog.codepen.io/documentation/tab-triggers/">Tab Triggers / Emmet</a></li>
<li id="menu-item-7217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7217"><a href="https://blog.codepen.io/documentation/limitations/">Pen Limitations</a></li>
<li id="menu-item-8438" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-8438"><a href="https://blog.codepen.io/documentation/preview-template/">The Pen Preview Document</a>
<ul class="sub-menu">
	<li id="menu-item-7182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7182"><a href="https://blog.codepen.io/documentation/things-we-strip/">Things We Strip</a></li>
</ul>
</li>
<li id="menu-item-13309" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13309"><a href="https://blog.codepen.io/documentation/templates/">Pen Templates</a></li>
<li id="menu-item-7214" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7214"><a href="https://blog.codepen.io/documentation/how-do-i-delete-a-pen/">Deleting Pens</a></li>
</ul></div></div>

<div class="docs-sidebar-group">
  <h2>Other Features</h2>

  <div class="menu-other-features-container"><ul id="menu-other-features" class="menu"><li id="menu-item-14839" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14839"><a href="https://blog.codepen.io/documentation/your-work/">Your Work</a></li>
<li id="menu-item-13306" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13306"><a href="https://blog.codepen.io/documentation/exporting-pens/">Exporting Pens</a></li>
<li id="menu-item-15372" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15372"><a href="https://blog.codepen.io/documentation/es-modules-on-codepen/">JavaScript/ES Modules and Imports</a></li>
<li id="menu-item-7272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7272"><a href="https://blog.codepen.io/documentation/collections/">Collections</a>
<ul class="sub-menu">
	<li id="menu-item-10752" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10752"><a href="https://blog.codepen.io/documentation/bookmarks/">Bookmarks</a></li>
</ul>
</li>
<li id="menu-item-13437" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13437"><a href="https://blog.codepen.io/documentation/tags/">Tags</a></li>
<li id="menu-item-13289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13289"><a href="https://blog.codepen.io/documentation/asset-hosting/"><span class="badge badge-pro">PRO</span> Asset Hosting</a></li>
<li id="menu-item-7273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7273"><a href="https://blog.codepen.io/email-verification/">Email Verification</a></li>
<li id="menu-item-13282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13282"><a href="https://blog.codepen.io/documentation/blocking/">Blocking</a></li>
<li id="menu-item-13287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13287"><a href="https://blog.codepen.io/documentation/private-items/"><span class="badge badge-pro">PRO</span> Privacy</a></li>
<li id="menu-item-13299" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-13299"><a href="https://blog.codepen.io/documentation/pro-teams/"><span class="badge badge-pro">PRO</span> Teams</a>
<ul class="sub-menu">
	<li id="menu-item-15587" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15587"><a href="https://blog.codepen.io/documentation/team-management/">Team Management</a></li>
</ul>
</li>
<li id="menu-item-13300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-13300"><a href="https://blog.codepen.io/documentation/screenshots/">Screenshots</a>
<ul class="sub-menu">
	<li id="menu-item-13301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13301"><a href="https://blog.codepen.io/documentation/custom-screenshots/"><span class="badge badge-pro">PRO</span> Custom Screenshots</a></li>
</ul>
</li>
<li id="menu-item-13302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13302"><a href="https://blog.codepen.io/documentation/codepen-tv/">CodePen TV</a></li>
</ul></div></div>

<div class="docs-sidebar-group">
  <h2>Embeds</h2>

  <div class="menu-embeds-container"><ul id="menu-embeds" class="menu"><li id="menu-item-13298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13298"><a href="https://blog.codepen.io/documentation/embedded-pens/">Embedded Pens</a></li>
<li id="menu-item-13294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13294"><a href="https://blog.codepen.io/documentation/editable-embeds/">Editable Embeds</a></li>
<li id="menu-item-13296" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13296"><a href="https://blog.codepen.io/documentation/prefill-embeds/">Prefill Embeds</a></li>
<li id="menu-item-13297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13297"><a href="https://blog.codepen.io/documentation/wordpress-plugin/">Embeds &amp; WordPress</a></li>
<li id="menu-item-13295" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13295"><a href="https://blog.codepen.io/documentation/unlimited-embed-themes/"><span class="badge badge-pro">PRO</span> Unlimited Embed Themes</a></li>
</ul></div></div>

<div class="docs-sidebar-group">
<h2>API</h2>

<div class="menu-api-container"><ul id="menu-api" class="menu"><li id="menu-item-7184" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7184"><a href="https://blog.codepen.io/documentation/prefill/">POST to Prefill Editors</a></li>
<li id="menu-item-11524" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11524"><a href="https://blog.codepen.io/documentation/prefill-embeds/">Prefill Embeds</a></li>
<li id="menu-item-7183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7183"><a href="https://blog.codepen.io/documentation/oembed/">oEmbed</a></li>
<li id="menu-item-7188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7188"><a href="https://blog.codepen.io/documentation/url-extensions/">URL Extensions</a></li>
</ul></div></div>

<div class="carbon-ad docs-sidebar-ad">
  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIVK3N&placement=codepenio&format=cover" id="_carbonads_js"></script>
</div>
      </div>
    </aside>

  </div>

</div>

  <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/codepen-5/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
		<div class="jetpack-instant-search__widget-area" style="display: none">
							<div id="jetpack-search-filters-2" class="widget jetpack-filters widget_search">			<div id="jetpack-search-filters-2-wrapper" class="jetpack-instant-search-wrapper">
		</div></div>					</div>
		<script id="codepen-embed-script-js" src="https://cpwebassets.codepen.io/assets/embed/ei.js?ver=1.0.1"></script>
<script id="wthf-script-js-before">
var nonce_wthf = "c12271c2f6";var ajaxurl = "https://blog.codepen.io/wp-admin/admin-ajax.php";
//# sourceURL=wthf-script-js-before
</script>
<script id="wthf-script-js" src="https://blog.codepen.io/wp-content/plugins/was-this-article-helpful/js/script.js?ver=1.0"></script>
<script id="wp-hooks-js" src="https://c0.wp.com/c/7.1.3/wp-includes/js/dist/hooks.min.js"></script>
<script id="wp-i18n-js" src="https://c0.wp.com/c/7.1.3/wp-includes/js/dist/i18n.min.js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="wp-jp-i18n-loader-js" src="https://blog.codepen.io/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-assets/build/i18n-loader.js?minify=true&#038;ver=f04e415567eda21fe93b"></script>
<script id="wp-jp-i18n-loader-js-after">
wp.jpI18nLoader.state = {"baseUrl":"https://blog.codepen.io/wp-content/languages/","locale":"en_US","domainMap":{"jetpack-account-protection":"plugins/jetpack","jetpack-activity-log":"plugins/jetpack","jetpack-admin-ui":"plugins/jetpack","jetpack-ads-pkg":"plugins/jetpack","jetpack-agents-manager":"plugins/jetpack","jetpack-assets":"plugins/jetpack","jetpack-backup-pkg":"plugins/jetpack","jetpack-blaze":"plugins/jetpack","jetpack-block-delimiter":"plugins/jetpack","jetpack-boost-core":"plugins/jetpack","jetpack-boost-speed-score":"plugins/jetpack","jetpack-classic-theme-helper":"plugins/jetpack","jetpack-comments":"plugins/jetpack","jetpack-compat":"plugins/jetpack","jetpack-config":"plugins/jetpack","jetpack-connection":"plugins/jetpack","jetpack-explat":"plugins/jetpack","jetpack-external-connections":"plugins/jetpack","jetpack-external-media":"plugins/jetpack","jetpack-feature-flags":"plugins/jetpack","jetpack-forms":"plugins/jetpack","jetpack-image-cdn":"plugins/jetpack","jetpack-import":"plugins/jetpack","jetpack-ip":"plugins/jetpack","jetpack-jitm":"plugins/jetpack","jetpack-jwt":"plugins/jetpack","jetpack-knowledge":"plugins/jetpack","jetpack-licensing":"plugins/jetpack","jetpack-masterbar":"plugins/jetpack","jetpack-menu-badges":"plugins/jetpack","jetpack-my-jetpack":"plugins/jetpack","jetpack-newsletter":"plugins/jetpack","jetpack-password-checker":"plugins/jetpack","jetpack-paypal-payments":"plugins/jetpack","jetpack-plugins-installer":"plugins/jetpack","jetpack-podcast":"plugins/jetpack","jetpack-post-list":"plugins/jetpack","jetpack-post-media":"plugins/jetpack","jetpack-premium-analytics-pkg":"plugins/jetpack","jetpack-protect-models":"plugins/jetpack","jetpack-protect-pkg":"plugins/jetpack","jetpack-protect-status":"plugins/jetpack","jetpack-publicize-pkg":"plugins/jetpack","jetpack-scan-page":"plugins/jetpack","jetpack-search-pkg":"plugins/jetpack","jetpack-seo":"plugins/jetpack","jetpack-sharing-likes":"plugins/jetpack","jetpack-stats-admin":"plugins/jetpack","jetpack-stats-pkg":"plugins/jetpack","jetpack-sync":"plugins/jetpack","jetpack-videopress-pkg":"plugins/jetpack","jetpack-waf":"plugins/jetpack","jetpack-woocommerce-stats-pkg":"plugins/jetpack","jetpack-wp-abilities":"plugins/jetpack","jetpack-wp-build-polyfills":"plugins/jetpack"},"domainPaths":{"jetpack-account-protection":"jetpack_vendor/automattic/jetpack-account-protection/","jetpack-activity-log":"jetpack_vendor/automattic/jetpack-activity-log/","jetpack-admin-ui":"jetpack_vendor/automattic/jetpack-admin-ui/","jetpack-ads-pkg":"jetpack_vendor/automattic/jetpack-ads/","jetpack-agents-manager":"jetpack_vendor/automattic/jetpack-agents-manager/","jetpack-assets":"jetpack_vendor/automattic/jetpack-assets/","jetpack-backup-pkg":"jetpack_vendor/automattic/jetpack-backup/","jetpack-blaze":"jetpack_vendor/automattic/jetpack-blaze/","jetpack-block-delimiter":"jetpack_vendor/automattic/block-delimiter/","jetpack-boost-core":"jetpack_vendor/automattic/jetpack-boost-core/","jetpack-boost-speed-score":"jetpack_vendor/automattic/jetpack-boost-speed-score/","jetpack-classic-theme-helper":"jetpack_vendor/automattic/jetpack-classic-theme-helper/","jetpack-comments":"jetpack_vendor/automattic/jetpack-comments/","jetpack-compat":"jetpack_vendor/automattic/jetpack-compat/","jetpack-config":"jetpack_vendor/automattic/jetpack-config/","jetpack-connection":"jetpack_vendor/automattic/jetpack-connection/","jetpack-explat":"jetpack_vendor/automattic/jetpack-explat/","jetpack-external-connections":"jetpack_vendor/automattic/jetpack-external-connections/","jetpack-external-media":"jetpack_vendor/automattic/jetpack-external-media/","jetpack-feature-flags":"jetpack_vendor/automattic/jetpack-feature-flags/","jetpack-forms":"jetpack_vendor/automattic/jetpack-forms/","jetpack-image-cdn":"jetpack_vendor/automattic/jetpack-image-cdn/","jetpack-import":"jetpack_vendor/automattic/jetpack-import/","jetpack-ip":"jetpack_vendor/automattic/jetpack-ip/","jetpack-jitm":"jetpack_vendor/automattic/jetpack-jitm/","jetpack-jwt":"jetpack_vendor/automattic/jetpack-jwt/","jetpack-knowledge":"jetpack_vendor/automattic/jetpack-knowledge/","jetpack-licensing":"jetpack_vendor/automattic/jetpack-licensing/","jetpack-masterbar":"jetpack_vendor/automattic/jetpack-masterbar/","jetpack-menu-badges":"jetpack_vendor/automattic/jetpack-menu-badges/","jetpack-my-jetpack":"jetpack_vendor/automattic/jetpack-my-jetpack/","jetpack-newsletter":"jetpack_vendor/automattic/jetpack-newsletter/","jetpack-password-checker":"jetpack_vendor/automattic/jetpack-password-checker/","jetpack-paypal-payments":"jetpack_vendor/automattic/jetpack-paypal-payments/","jetpack-plugins-installer":"jetpack_vendor/automattic/jetpack-plugins-installer/","jetpack-podcast":"jetpack_vendor/automattic/jetpack-podcast/","jetpack-post-list":"jetpack_vendor/automattic/jetpack-post-list/","jetpack-post-media":"jetpack_vendor/automattic/jetpack-post-media/","jetpack-premium-analytics-pkg":"jetpack_vendor/automattic/jetpack-premium-analytics/","jetpack-protect-models":"jetpack_vendor/automattic/jetpack-protect-models/","jetpack-protect-pkg":"jetpack_vendor/automattic/jetpack-protect/","jetpack-protect-status":"jetpack_vendor/automattic/jetpack-protect-status/","jetpack-publicize-pkg":"jetpack_vendor/automattic/jetpack-publicize/","jetpack-scan-page":"jetpack_vendor/automattic/jetpack-scan-page/","jetpack-search-pkg":"jetpack_vendor/automattic/jetpack-search/","jetpack-seo":"jetpack_vendor/automattic/jetpack-seo/","jetpack-sharing-likes":"jetpack_vendor/automattic/jetpack-sharing-likes/","jetpack-stats-admin":"jetpack_vendor/automattic/jetpack-stats-admin/","jetpack-stats-pkg":"jetpack_vendor/automattic/jetpack-stats/","jetpack-sync":"jetpack_vendor/automattic/jetpack-sync/","jetpack-videopress-pkg":"jetpack_vendor/automattic/jetpack-videopress/","jetpack-waf":"jetpack_vendor/automattic/jetpack-waf/","jetpack-woocommerce-stats-pkg":"jetpack_vendor/automattic/jetpack-woocommerce-stats/","jetpack-wp-abilities":"jetpack_vendor/automattic/jetpack-wp-abilities/","jetpack-wp-build-polyfills":"jetpack_vendor/automattic/jetpack-wp-build-polyfills/"}};
//# sourceURL=wp-jp-i18n-loader-js-after
</script>
<script id="wp-polyfill-js" src="https://c0.wp.com/c/7.1.3/wp-includes/js/dist/vendor/wp-polyfill.min.js"></script>
<script id="wp-url-js" src="https://c0.wp.com/c/7.1.3/wp-includes/js/dist/url.min.js"></script>
<script id="jetpack-instant-search-js-before">
var JetpackInstantSearchOptions={"overlayOptions":{"colorTheme":"dark","enableInfScroll":true,"enableFilteringOpensOverlay":true,"enablePostDate":true,"enableProductPrice":true,"enableSort":true,"highlightColor":"#FFC","overlayTrigger":"immediate","resultFormat":"minimal","showPoweredBy":false,"defaultSort":"relevance","excludedPostTypes":["attachment","podcast"],"fallbackImageUrl":"","enableFallbackImage":false},"homeUrl":"https://blog.codepen.io","locale":"en-US","postsPerPage":10,"siteId":67416426,"searchSuggestionsEnabled":false,"postTypes":{"post":{"singular_name":"Post","name":"Posts"},"page":{"singular_name":"Page","name":"Pages"},"attachment":{"singular_name":"Media","name":"Media"},"docs":{"singular_name":"Docs Page","name":"Docs"},"podcast":{"singular_name":"Episode","name":"Episode"}},"webpackPublicPath":"https://blog.codepen.io/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-search/build/instant-search/","isPhotonEnabled":false,"isFreePlan":false,"apiRoot":"https://blog.codepen.io/wp-json/","apiNonce":"5bbbbdac13","isPrivateSite":false,"isWpcom":false,"hasOverlayWidgets":true,"widgets":[{"filters":[{"name":"Post Types","type":"post_type","count":5,"widget_id":"jetpack-search-filters-2","filter_id":"post_type_0"},{"name":"Podcasts","type":"taxonomy","taxonomy":"series","count":5,"widget_id":"jetpack-search-filters-2","filter_id":"taxonomy_1"},{"name":"Categories","type":"taxonomy","taxonomy":"category","count":5,"widget_id":"jetpack-search-filters-2","filter_id":"taxonomy_2"},{"name":"Tags","type":"taxonomy","taxonomy":"post_tag","count":5,"widget_id":"jetpack-search-filters-2","filter_id":"taxonomy_3"},{"name":"Year","type":"date_histogram","count":5,"field":"post_date","interval":"year","widget_id":"jetpack-search-filters-2","filter_id":"date_histogram_4"}],"widget_id":"jetpack-search-filters-2"}],"widgetsOutsideOverlay":[],"hasNonSearchWidgets":false,"preventTrackingCookiesReset":false,"disableTracking":false,"aiAnswersEnabled":true,"aiMasterEnabled":true,"adminQueryFilter":{"bool":{"should":[{"term":{"post_type":"page"}},{"term":{"post_type":"docs"}}]}}};
//# sourceURL=jetpack-instant-search-js-before
</script>
<script id="jetpack-instant-search-js" src="https://blog.codepen.io/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.js?minify=false&#038;ver=d03ec9f0ac110a671db7"></script>
<script id="jp-tracks-js" src="//stats.wp.com/w.js?ver=202644"></script>
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", {"v":"ext","blog":"67416426","post":"453","tz":"-7","srv":"blog.codepen.io","hp":"atomic","ac":"3","amp":"0","j":"1:16.4-a.3"} ]);
_stq.push([ "clickTrackerInit", "67416426", "453" ]);
//# sourceURL=jetpack-stats-js-before
</script>
<script data-wp-strategy="defer" defer fetchpriority="low" id="jetpack-stats-js" src="https://stats.wp.com/e-202644.js"></script>
		<script type="text/javascript">
			(function() {
			var t   = document.createElement( 'script' );
			t.type  = 'text/javascript';
			t.async = true;
			t.id    = 'gauges-tracker';
			t.setAttribute( 'data-site-id', '67d87fa072d91e4607307bda' );
			t.src = '//secure.gaug.es/track.js';
			var s = document.getElementsByTagName( 'script' )[0];
			s.parentNode.insertBefore( t, s );
			})();
		</script>

  <footer class="footer" id="link-footer">

    <div class="width-wrapper footer-grid" id="link-footer-width-wrapper">

      <div class="footer-links">

        <nav class="link-footer-links">
          <h4>CodePen</h4>
          <a href="https://codepen.io/about">About</a>
          <a href="/">Blog</a>
          <a href="/radio/">Podcast</a>
          <a href="https://codepen.io/advertise">
            Advertising
          </a>
          <a href="/docs/">Documentation</a>
          <a href="https://codepen.io/support/">Support</a>
        </nav>

        <nav class="link-footer-links">
          <h4>For</h4>
          <a href="https://codepen.io/features/teams">Teams</a>
          <a href="https://codepen.io/features/privacy">Privacy</a>
          <a href="https://codepen.io/features/embeds">Embeds</a>
          <a href="https://codepen.io/features/asset-hosting">Asset Hosting</a>
        </nav>

        <nav class="link-footer-links">
          <h4>Social</h4>
          <a href="https://www.youtube.com/c/CodePenOfficial">YouTube</a>
          <a href="https://bsky.app/profile/codepen.io">Bluesky</a>
          <a href="https://www.instagram.com/codepen/">Instagram</a>
        </nav>

        <nav class="link-footer-links">
          <h4>Community</h4>
          <a href="https://codepen.io/spark/">Spark</a>
          <a href="https://codepen.io/challenges/">Challenges</a>
          <a href="https://codepen.io/topics/">Topics</a>
          <a href="/legal/code-conduct/">
            Code of Conduct
          </a>
        </nav>

      </div>

      <div class="copyright" id="link-footer-copyright">
        <div class="logo">
          <a href="https://codepen.io" class="large-screen-logo">
            CodePen
          </a>
        </div>

        <p>&copy;2026 CodePen</p>
        <p class="slogan"><em>Demo or it didn't happen.</em></p>
        <p class="footer-legal-links">
          <a href="/legal/terms-of-service/">
            Terms of Service
          </a>
          <br>
          <a href="/legal/privacy-policy/">
            Privacy Policy
          </a>
          <br>
          <a href="/logos/">
            Brand Assets
          </a>
        </p>
      </div>

    </div>

  </footer>

  <script src="https://blog.codepen.io/wp-content/themes/codepen-5/js/min/blog.min.js?v=muolnm85obi3b80rrc"></script>
  <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

</body>

</html>
