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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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

              
                <div id="root"> </div>
              
            
!

CSS

              
                .svg-definition {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.svg-letter {
  stroke-width: 1px;
  stroke: #ff0054;
  fill: none;
}


.r {
    // fill: none;
  path {
    
    stroke-width: 1px;
    stroke: firebrick;
  }
}
              
            
!

JS

              
                console.clear()

class App extends React.Component {
  componentDidMount() {
    console.log('didMount')

    TweenMax.fromTo(
      '.r-path',
      2,
      { drawSVG: '0% 0%'},
      { drawSVG: '100% 100%' }
    );
  }
  
  render() {
    return (
      <main className="main">

        <svg 
          className="r" 
          width="240"
          height="257"
          viewBox="0 0 240 257">

            <path 
              className="r-path" 
              d="M107.544 116.604L106.544 116.604L106.544 117.104L106.944 117.404L107.544 116.604ZM117.637 88.4209L116.742 88.8681L116.759 88.9025L116.779 88.9354L117.637 88.4209ZM107.354 86.1357L106.857 85.2675L106.232 85.6251L106.373 86.3319L107.354 86.1357ZM205.806 160.022L206.521 159.323L205.911 158.699L205.21 159.219L205.806 160.022ZM238.75 193.729L239.743 193.843L239.798 193.37L239.465 193.03L238.75 193.729ZM219.897 239.432L219.178 238.737L219.173 238.742L219.897 239.432ZM142.202 245.716L142.745 244.876L142.737 244.871L142.202 245.716ZM113.447 206.868L114.389 206.532L114.386 206.523L113.447 206.868ZM106.592 188.206L107.53 187.861L107.296 187.223L106.616 187.206L106.592 188.206ZM86.4063 186.111L86.5606 185.123L86.0585 185.045L85.6991 185.404L86.4063 186.111ZM100.308 196.395L101.237 196.026L101.004 195.436L100.369 195.396L100.308 196.395ZM111.162 223.816L112.162 223.816L112.162 223.626L112.092 223.448L111.162 223.816ZM111.162 240.003L111.738 240.82L112.162 240.522L112.162 240.003L111.162 240.003ZM16.5186 18.9141L16.9702 19.8063L16.9789 19.8018L16.5186 18.9141ZM56.8896 6.15527L57.0771 7.13757L57.0843 7.13614L56.8896 6.15527ZM196.094 24.627L195.505 25.4355L195.507 25.4367L196.094 24.627ZM215.518 137.552L214.734 136.931L214.733 136.932L215.518 137.552ZM179.336 162.688L179.03 161.737L178.336 161.96L178.336 162.688L179.336 162.688ZM106.944 117.404C107.208 117.603 107.525 117.728 107.825 117.815C108.136 117.905 108.495 117.973 108.89 118.025C109.682 118.128 110.698 118.176 111.924 118.176L111.924 116.176C110.737 116.176 109.818 116.129 109.149 116.041C108.815 115.998 108.563 115.947 108.382 115.894C108.19 115.838 108.133 115.797 108.144 115.804L106.944 117.404ZM111.924 118.176C114.649 118.176 116.812 117.074 118.278 114.874L116.614 113.765C115.542 115.373 114.023 116.176 111.924 116.176L111.924 118.176ZM118.278 114.874C119.718 112.715 120.351 109.353 120.351 104.988L118.351 104.988C118.351 109.256 117.714 112.115 116.614 113.765L118.278 114.874ZM120.351 104.988L120.351 98.1328L118.351 98.1328L118.351 104.988L120.351 104.988ZM120.351 98.1328C120.351 93.536 119.786 90.0598 118.494 87.9064L116.779 88.9354C117.772 90.5906 118.351 93.589 118.351 98.1328L120.351 98.1328ZM118.531 87.9737C117.945 86.8015 117.117 85.8838 116.038 85.2675C114.966 84.6549 113.707 84.374 112.305 84.374L112.305 86.374C113.442 86.374 114.341 86.601 115.046 87.004C115.745 87.4033 116.313 88.009 116.742 88.8681L118.531 87.9737ZM112.305 84.374C111.068 84.374 109.998 84.4388 109.106 84.5761C108.226 84.7114 107.454 84.9265 106.857 85.2675L107.85 87.004C108.142 86.8372 108.639 86.6714 109.41 86.5528C110.168 86.4362 111.129 86.374 112.305 86.374L112.305 84.374ZM106.373 86.3319C106.479 86.8602 106.544 87.8512 106.544 89.373L108.544 89.373C108.544 87.8481 108.482 86.6808 108.334 85.9396L106.373 86.3319ZM106.544 89.373L106.544 116.604L108.544 116.604L108.544 89.373L106.544 89.373ZM205.091 160.721L238.035 194.427L239.465 193.03L206.521 159.323L205.091 160.721ZM237.757 193.614C235.488 213.275 229.263 228.278 219.178 238.738L220.617 240.126C231.098 229.257 237.442 213.791 239.743 193.843L237.757 193.614ZM219.173 238.742C209.247 249.165 195.441 254.428 177.622 254.428L177.622 256.428C195.857 256.428 210.236 251.027 220.622 240.121L219.173 238.742ZM177.622 254.428C164.203 254.428 152.591 251.232 142.745 244.876L141.66 246.556C151.872 253.149 163.873 256.428 177.622 256.428L177.622 254.428ZM142.737 244.871C130.146 236.892 120.68 224.147 114.389 206.532L112.506 207.205C118.91 225.136 128.614 238.29 141.667 246.561L142.737 244.871ZM114.386 206.523L107.53 187.861L105.653 188.551L112.509 207.213L114.386 206.523ZM106.616 187.206C101.344 187.081 94.6629 186.389 86.5606 185.123L86.2519 187.099C94.3996 188.372 101.176 189.077 106.568 189.206L106.616 187.206ZM85.6991 185.404C84.4535 186.65 83.8828 188.325 83.8828 190.301L85.8828 190.301C85.8828 188.722 86.3277 187.604 87.1134 186.818L85.6991 185.404ZM83.8828 190.301C83.8828 192.65 85.6828 194.263 88.3716 195.325C91.0911 196.399 95.0736 197.073 100.246 197.393L100.369 195.396C95.2584 195.081 91.5286 194.422 89.1064 193.465C86.6536 192.496 85.8828 191.38 85.8828 190.301L83.8828 190.301ZM99.3778 196.763L110.232 224.184L112.092 223.448L101.237 196.026L99.3778 196.763ZM110.162 223.816L110.162 240.003L112.162 240.003L112.162 223.816L110.162 223.816ZM110.586 239.185C96.1969 249.32 77.6884 254.428 54.9854 254.428L54.9854 256.428C77.9854 256.428 96.9281 251.252 111.738 240.82L110.586 239.185ZM54.9854 254.428C38.7361 254.428 25.8799 251.089 16.3238 244.511L15.1899 246.159C25.1845 253.038 38.4807 256.428 54.9854 256.428L54.9854 254.428ZM16.3238 244.511C6.84426 237.986 2.09375 228.533 2.09375 216.009L0.09375 216.009C0.09375 229.129 5.11863 239.227 15.1899 246.159L16.3238 244.511ZM2.09375 216.009L2.09375 35.1006L0.09375 35.1006L0.09375 216.009L2.09375 216.009ZM2.09375 35.1006C2.09375 32.6408 3.21957 30.1299 5.67389 27.5544C8.13535 24.9714 11.8809 22.3823 16.9702 19.8063L16.0669 18.0218C10.873 20.6509 6.90616 23.3621 4.22602 26.1746C1.53874 28.9946 0.09375 31.9745 0.09375 35.1006L2.09375 35.1006ZM16.9789 19.8018C27.1465 14.5297 40.5017 10.3008 57.0771 7.13755L56.7022 5.173C40.0159 8.35741 26.457 12.6344 16.0582 18.0263L16.9789 19.8018ZM57.0843 7.13614C73.6523 3.84784 90.218 2.2041 106.782 2.2041L106.782 0.204102C90.0847 0.204102 73.3887 1.86115 56.695 5.17441L57.0843 7.13614ZM106.782 2.2041C144.745 2.2041 174.281 9.98831 195.505 25.4355L196.682 23.8184C174.996 8.03513 144.991 0.204102 106.782 0.204102L106.782 2.2041ZM195.507 25.4367C217.826 41.6118 228.99 64.3422 228.99 93.7529L230.99 93.7529C230.99 63.7496 219.557 40.3961 196.681 23.8172L195.507 25.4367ZM228.99 93.7529C228.99 110.562 224.229 124.937 214.734 136.931L216.302 138.172C226.103 125.791 230.99 110.967 230.99 93.7529L228.99 93.7529ZM214.733 136.932C205.334 148.837 193.44 157.1 179.03 161.737L179.642 163.64C194.431 158.882 206.658 150.387 216.302 138.171L214.733 136.932ZM178.336 162.688C178.336 164.923 179.008 166.766 180.501 168.024C181.961 169.254 184.044 169.782 186.572 169.782L186.572 167.782C184.276 167.782 182.741 167.295 181.789 166.494C180.87 165.72 180.336 164.516 180.336 162.688L178.336 162.688ZM186.572 169.782C191.865 169.782 198.5 166.688 206.402 160.826L205.21 159.219C197.369 165.037 191.182 167.782 186.572 167.782L186.572 169.782Z" />
        </svg>

    </main>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));
              
            
!
999px

Console