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 class="notepad">
  <div class="line1"></div>
   <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>
  <div class="line6"></div>
  <div class="line7"></div>
  <div class="line8"></div>
  <div class="line9"></div>
  <div class="line10"></div>
  <div class="line11"></div>
  <div class="line12"></div>
  <div class="line13"></div>
  <div class="line14"></div>
  <div class="line15"></div>
  <div class="line16"></div>
  <div class="line17"></div>
  <div class="line18"></div>
  <div class="dot1"></div>
  <div class="dot2"></div>
  <div class="dot3"></div>
  <div class="dot4"></div>
  <div class="dot5"></div>
</div>
<div class="metal1"></div>
<div class="metal2"></div>
<div class="metal3"></div>
<div class="metal4"></div>
<div class="metal5"></div>

<div class="pencil-wrapper">
  <div class="pencil"></div>
  <div class="pencilTip">
    <div class="lead"></div>
  </div>
  <div class="eraser"></div>
  <div class="eMetal"></div>
</div>

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1334 750" style="enable-background:new 0 0 1334 750;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<g>
	<path d="M241,348.5c0.9-2,1.7-4,2.6-6c0.2-0.5,0.4-0.9,0.6-1.5c1.9,0.5,3.8,1.1,5.6,1.5c5,1.3,10.1,2.1,15.2,2.1
		c7.1-0.1,13.6-2,19.8-5.3c9.3-5,15.8-12.7,20.8-21.9c6.9-12.7,11.7-26.2,15.7-40c4-13.9,7.7-27.8,10.4-42c0.9-4.5,1.7-9,2.6-13.5
		c0.1-0.5,0.5-1.1,0.9-1.3c3.3-1.7,6.7-3.3,10.1-5c0.1-0.1,0.3-0.1,0.8-0.3c-4.9,28.3-12.7,55.4-22.7,82c0.3,0,0.6,0.1,0.9,0.1
		c13.2,0,26.3,0,39.5,0c1,0,1.3-0.3,1.5-1.2c4.1-19.9,8.3-39.8,12.5-59.8c1.4-6.7,2.8-13.4,4.2-20c0.1-0.4,0.3-1,0.7-1.1
		c3.3-1.7,6.6-3.3,10.1-5.1c-0.4,1.8-0.6,3.3-1,4.8c-2.8,13.2-5.6,26.4-8.3,39.6c-3.4,16-6.8,32.1-10.2,48.1
		c-2.9,13.8-5.8,27.6-8.7,41.5c-0.2,0.8-0.4,1.1-1.2,1c-1.5-0.1-3,0-4.4,0c-0.7,0-1-0.2-1.2-0.9c-2.5-7.3-6.1-14-10.6-20.2
		c-5.9-8.2-12.6-15.6-21-21.2c-1.3-0.9-2.7-1.6-4.3-2.5c-0.3,0.5-0.6,1-0.8,1.4c-4,9-9.1,17.2-15.4,24.8
		c-9.4,11.4-21.4,18.2-35.7,21.3c-6.2,1.3-12.4,2.1-18.8,2c-3.5-0.1-6.9-0.7-10.3-1C241,348.8,241,348.6,241,348.5z M330.5,301
		c10.7,8.9,19.8,18.8,27.5,30.2c2.1-10.1,4.1-20.1,6.2-30.2C352.9,301,341.8,301,330.5,301z"/>
	<path d="M734.8,251.7c2.8-2.2,5.6-4.2,8.2-6.3c4.7-3.9,9-8.3,12.2-13.6c1.5-2.6,2.7-5.2,2.8-8.3c0-3.5-1.6-6-4.8-7.4
		c-3-1.3-6.2-1.6-9.4-1.3c-14.8,1.1-27.7,7.1-39.1,16.3c-4.9,4-8.7,8.9-10.1,15.3c-1.2,5.6,0.2,10.4,4.2,14.5c5.1,5.1,11.1,9,17,13
		c5.1,3.6,10.4,6.9,15.2,10.8c5,3.9,8.8,9,10.4,15.3c1.8,6.7,0.8,13.3-2.3,19.4c-6.2,12.5-16.2,20.7-29.4,25.1
		c-7,2.3-14.2,3.2-21.6,3.3c-7.3,0.1-14.5-0.2-21.6-2.1c-2.7-0.7-5.4-1.7-8.3-2.7c2-3.6,3.8-7,5.5-10.1c4.7,2,9.3,4.1,14,5.8
		c6.5,2.4,13.4,3.5,20.3,3.3c9.5-0.3,18.3-2.7,25.9-8.5c5.1-3.9,8.9-8.7,10.3-15.1c1.8-8.1-0.3-15.2-6.1-21.2
		c-5-5.2-11.1-9.1-17-13.2c-5.8-4-11.7-8-17.3-12.2c-4.8-3.5-7.8-8.3-8.3-14.4c-0.4-5.8,1.2-11,4.3-15.9c3.7-5.9,8.7-10.6,14.3-14.7
		c10.1-7.5,21.4-12.4,33.9-14.6c5.7-1,11.4-1.2,17.1,0.1c3.9,0.9,7.3,2.5,9.6,6c2.1,3.1,2,6.6,1.2,10c-1.2,5.6-4.2,10.2-7.7,14.5
		c-4.2,5.1-9.2,9.3-14.7,12.9c-0.3,0.2-0.9,0.4-1.1,0.2C739.9,254.5,737.4,253.1,734.8,251.7z"/>
	<path d="M953,323.9c0.9-1.9,1.7-3.8,2.6-5.7c4.2-9.1,9.5-17.3,16.8-24.3c3-2.8,6.3-5.2,10.4-6.1c4.3-0.9,7.9,0.5,9.7,3.9
		c1.4,2.6,1.4,5.4,0.7,8.2c-1.6,6.6-3.3,13.1-4.8,19.7c-0.9,3.8-1.7,7.7-2.3,11.6c-0.3,2.1-0.2,4.1,0.7,6.1c1.1,2.4,2.8,3.1,5.1,1.8
		c2.6-1.4,4.7-3.5,6.8-5.6c0.3-0.3,0.6-0.7,1.1-1.1c0.5,0.5,1,0.9,1.7,1.5c-1,1.2-1.9,2.3-2.9,3.4c-2.1,2.3-4.1,4.6-6.4,6.7
		c-4.3,4.1-8.9,3.1-11.4-2.3c-1.5-3.2-1.6-6.6-1-10c1.7-9.9,3.5-19.7,5.2-29.6c0.3-1.6,0.4-3.3,0.4-4.9c0-2.2-1.4-3.7-3.6-3.8
		c-2.4-0.1-4.4,0.9-6.2,2.2c-4.1,2.9-7.3,6.8-10.1,10.9c-6.8,9.9-11.7,20.6-14.8,32.1c-0.4,1.5-0.7,3.1-1,4.7c-0.1,0.6-0.4,1-1,1.1
		c-1,0.2-2,0.6-3,0.9c-0.9,0.3-1.9,0.6-3,1c0.4-2.1,0.7-4,1.1-5.9c4-20.4,7.9-40.8,11.9-61.2c2.7-13.8,5.4-27.6,8.1-41.5
		c1.8-9.2,3.6-18.3,5.4-27.5c0.1-0.4,0.4-1,0.7-1.2c3.3-1.7,6.6-3.2,10.1-4.9c-9.1,40.1-18.2,79.9-27.2,119.7
		C952.8,323.9,952.9,323.9,953,323.9z"/>
	<path d="M755.1,346.3c0.6-2.9,1.1-5.7,1.6-8.4c3.7-19.1,7.5-38.1,11.2-57.2c1.9-9.6,3.8-19.2,5.7-28.8c2.7-13.7,5.4-27.4,8-41.1
		c0.2-1.1,0.7-1.7,1.7-2.2c3-1.4,6-2.8,9-4.2c0.1-0.1,0.3-0.1,0.6-0.2c-8.9,38.8-17.8,77.5-26.7,116.2c0,0,0.1,0,0.1,0
		c1.4-2.5,2.7-5.1,4.3-7.6c4.6-7.3,10.1-14,17-19.3c5.4-4.1,11.5-6.4,18.3-6.9c0.2,0,0.5,0,0.7,0c0.2,0,0.4,0,0.7,0.1
		c-0.6,2.6-1.2,5.2-1.8,8c-0.5-0.1-1-0.2-1.5-0.2c-7-1.2-13,1.1-18.4,5.3c-2.2,1.7-4.1,3.8-6.1,5.7c-0.2,0.2-0.3,0.9-0.2,1.2
		c1.8,4.5,3.5,9,5.6,13.3c2.5,5,5.2,10,8,14.8c0.8,1.4,2.1,2.6,3.3,3.7c1.3,1.2,2.8,1.3,4.5,0.8c2.2-0.7,4-2.1,5.7-3.7
		c1-0.9,2-2,3-3c0.5,0.5,0.9,1,1.4,1.6c-1.2,1.4-2.4,2.9-3.7,4.2c-2.4,2.5-4.8,5.1-7.9,7c-3.2,2-6.4,0.9-8.6-1.1
		c-2.8-2.6-4.7-5.8-6.5-9.1c-3.8-6.9-7.3-14-10.2-21.4c-0.1-0.3-0.3-0.5-0.6-1.2c-2.1,4.2-4.2,8.1-6,12.2c-2.7,5.9-4.5,12-5.6,18.4
		c-0.1,0.3-0.3,0.8-0.5,0.8C759.4,344.9,757.4,345.5,755.1,346.3z"/>
	<path d="M553.9,380.9c1.7-2.3,3.4-4.5,5-6.7c1.2,1,2.3,2,3.4,2.9c6,4.4,13.7,4.4,19.3,0c2.8-2.2,4.5-5.2,6-8.4
		c2.3-5.2,3.7-10.7,4.9-16.2c1.3-6,2.7-12.1,4-18.1c0,0,0-0.1,0.1,0.2c-1.6,1.5-3.4,3.1-5.1,4.7c-3.2,2.9-6.6,5.6-10.9,6.7
		c-4.9,1.3-10,0.3-12.7-3.7c-2-2.9-2.5-6.3-2-9.6c1.1-7.1,2.4-14.2,3.7-21.3c1.2-6.5,2.5-13,3.7-19.5c0.1-0.8,0.5-1.2,1.2-1.6
		c2.9-1.2,5.7-2.4,8.8-3.7c-0.2,1.2-0.4,2.1-0.7,3c-3,12.6-6.1,25.2-9.1,37.8c-0.4,1.9-0.8,3.7-1,5.6c-0.8,6.1,3.9,10.2,9.9,8.5
		c3.2-0.9,5.8-2.8,8.2-5c2.3-2.1,4.4-4.4,6.5-6.7c0.6-0.6,1-1.6,1.2-2.4c2.7-11.8,5.3-23.6,7.9-35.4c0.2-1,0.6-1.6,1.6-2
		c2.5-1,5-2.2,7.6-3.3c0.2-0.1,0.4-0.1,0.7-0.2c-0.7,2.7-1.3,5.3-1.9,7.8c-4.5,17.9-8.9,35.9-13.4,53.8c-1.4,5.8-3,11.5-5.6,16.9
		c-4.2,8.8-10.4,15.4-19.9,18.4c-5.9,1.9-12,1.9-17.8-0.6C556.3,382.5,555.2,381.6,553.9,380.9z"/>
	<path d="M433.6,293.5c0.1-0.3,0.3-0.5,0.3-0.8c0.2-2.1,1.4-3.2,3.4-3.9c2.3-0.7,4.4-1.8,6.9-2.8c-0.4,1.5-0.7,2.8-1,4.1
		c-3,11.6-6,23.2-8.9,34.8c-0.6,2.5-0.8,5.2-0.9,7.8c-0.1,1.8,0.5,3.5,1.5,5c1.3,1.8,2.8,2.4,4.7,1.2c1.9-1.2,3.7-2.8,5.5-4.2
		c0.8-0.7,1.5-1.4,2.3-2.2c0.4,0.5,0.8,1,1.3,1.6c-3.2,3.6-6.2,7.5-10.2,10.5c-3.4,2.6-6.6,2.1-9.2-1.2c-2.7-3.4-3.1-7.3-2.4-11.4
		c0.7-4.5,1.6-9,2.5-13.7c-1.1,2-2,3.9-3.1,5.8c-3.2,5.5-6.9,10.7-11.5,15.1c-2.8,2.7-5.9,5.2-9.7,6.4c-8.8,3-16.1-1.6-17.2-10.8
		c-0.8-6.4,0.5-12.4,2.9-18.2c3.3-8.1,8.1-15.3,14.7-21.2c4.1-3.6,8.5-6.5,14-7.3c4.5-0.6,8.7,0.1,12.2,3.2
		C432.3,292,432.9,292.7,433.6,293.5z M396,330.2c0.3,1.8,0.5,3.6,1,5.3c1.3,4.5,4.8,6.4,9.4,5.1c3.4-0.9,6.1-3,8.5-5.4
		c5.1-5.2,9.4-11.2,12-18c2.2-5.5,3.6-11.4,5.3-17.1c0.2-0.7,0.2-1.6-0.1-2.3c-2.5-6.1-9-8.6-15-5.7c-3.3,1.6-6,4-8.3,6.7
		c-4.8,5.7-7.9,12.2-10.2,19.2C397.4,322,396.3,326,396,330.2z"/>
	<path d="M506.8,332.3c0.6,0.5,1.1,1,1.7,1.5c-1.8,2.1-3.6,4.1-5.4,6.1c-1.4,1.5-2.7,2.9-4.2,4.2c-4,3.6-8.2,2.7-10.7-2
		c-1.6-2.9-2.1-6.1-1.6-9.3c1.1-6.6,2.4-13.2,3.6-19.8c3.3-16.6,6.6-33.2,9.9-49.8c3.5-17.6,7-35.3,10.5-53c0.2-0.9,0.6-1.4,1.4-1.7
		c3.1-1.5,6.2-3,9.5-4.6c-0.3,1.3-0.5,2.4-0.8,3.5c-3.6,15.8-7.2,31.5-10.8,47.3c-3.6,15.8-7.2,31.7-10.8,47.5
		c-1.9,8.5-3.9,17-5.7,25.6c-0.5,2.4-0.2,4.9-0.2,7.4c0,0.3,0.1,0.6,0.2,0.9c1.1,3.6,3.4,4.5,6.4,2.3c2.1-1.5,4-3.4,5.9-5.2
		C506.1,333.1,506.4,332.7,506.8,332.3z"/>
	<path d="M902.3,204.1c-0.9,4-1.7,7.7-2.6,11.4c-3.4,14.7-6.7,29.4-10.1,44.1c-3.5,15.5-7.1,31-10.6,46.5
		c-1.6,7.2-3.3,14.3-4.8,21.5c-0.6,2.7-0.8,5.4-0.2,8.2c0.1,0.3,0.2,0.7,0.3,1c1.2,3,3.2,3.8,5.8,2c2.4-1.6,4.4-3.8,6.6-5.7
		c0.3-0.2,0.5-0.5,0.8-0.8c0.6,0.5,1.1,1,1.9,1.6c-3.4,3.6-6.6,7.2-10.1,10.5c-2.8,2.6-5.9,2.7-8.1,0.7c-1.8-1.7-3-3.7-3.6-6.1
		c-0.7-3-0.5-6,0.1-8.9c1.8-9.4,3.6-18.7,5.5-28.1c3.8-19.2,7.6-38.3,11.4-57.5c2.3-11.4,4.5-22.8,6.8-34.2c0.1-0.7,0.5-1.2,1.2-1.5
		C895.7,207.3,898.9,205.7,902.3,204.1z"/>
	<path d="M856,329.7c0.5,0.4,1.1,0.9,1.8,1.5c-0.8,1-1.5,1.9-2.3,2.9c-3.6,4.2-7.4,8.1-12.6,10.5c-4.9,2.2-10,3-15.2,1.6
		c-6.9-1.8-10.8-6.6-12.3-13.3c-1.6-7.4-0.2-14.4,2.8-21.2c2.8-6.4,6.6-12,11.7-16.8c3.6-3.4,7.6-6.3,12.6-7.1c1.9-0.3,4-0.4,5.9,0
		c4.7,1,7.2,4.8,6.7,9.8c-0.5,4.3-2.6,7.8-5.4,11c-4.9,5.5-11,9.4-17.6,12.6c-2.5,1.2-5.1,2.2-7.6,3.3c-0.3,0.1-0.6,0.4-0.7,0.7
		c-0.3,5.5,1,10.5,5.5,14.1c3.6,2.9,7.8,3.3,12.2,2.1c3.5-1,6.4-3.2,9-5.7C852.5,333.7,854.2,331.7,856,329.7z M824,321.8
		c0.3,0,0.4,0.1,0.4,0c1.6-0.8,3.2-1.5,4.7-2.3c7.5-3.9,13.6-9.1,17.6-16.7c1.5-2.8,2.5-5.7,2.4-8.9c-0.1-2.5-1.4-3.8-3.9-4
		c-0.6,0-1.3,0-1.9,0.1c-3.6,0.7-6.1,3.1-8.3,5.7c-5.3,6.4-8.7,13.7-10.4,21.8C824.4,318.9,824.2,320.3,824,321.8z"/>
	<path d="M1047.9,329.6c0.7,0.5,1.2,1,1.9,1.6c-1.4,1.7-2.8,3.4-4.2,5c-3.8,4.2-8,7.8-13.6,9.4c-5.7,1.7-11.5,1.8-16.8-1.4
		c-5.3-3.3-7.7-8.4-8.3-14.5c-0.8-9.4,2.3-17.8,7.3-25.7c3.4-5.4,7.6-9.9,12.9-13.4c3.2-2.1,6.7-3.4,10.6-3.4
		c6.6,0,10.4,4.7,9.2,11.3c-0.7,3.9-2.8,7.2-5.4,10.1c-5.7,6.3-12.9,10.5-20.6,13.9c-1.3,0.6-2.5,1.2-3.9,1.6
		c-1,0.3-1.3,0.8-1.3,1.7c0,6,1.7,11.2,7.2,14.4c4.1,2.4,8.4,2.1,12.7,0.2c4.4-2,7.7-5.4,10.7-9
		C1046.9,330.8,1047.4,330.3,1047.9,329.6z M1015.9,321.7c0.1,0.1,0.2,0.1,0.3,0.2c1.6-0.8,3.2-1.6,4.8-2.4
		c5.4-2.8,10.3-6.3,14-11.1c2.9-3.7,5.2-7.6,6-12.3c0.8-4.8-1.9-7.2-6.6-5.8c-3.1,0.9-5.4,3.1-7.4,5.5c-4.8,5.8-8.1,12.4-9.9,19.7
		C1016.6,317.5,1016.3,319.6,1015.9,321.7z"/>
	<path d="M554.3,329.6c0.7,0.5,1.2,1,2,1.6c-1.5,1.8-2.9,3.6-4.4,5.2c-3.8,4.1-8,7.6-13.4,9.2c-5,1.5-10.1,1.7-15-0.6
		c-6.3-3-9.3-8.4-9.9-15.2c-0.8-7.6,1.2-14.7,4.6-21.5c2.5-4.8,5.5-9.2,9.4-12.9c3.5-3.5,7.4-6.5,12.3-7.7c2-0.5,4.1-0.7,6.1-0.5
		c5.2,0.5,8.3,4.9,7.6,10.1c-0.6,4.4-2.8,8-5.7,11.2c-5.9,6.4-13.2,10.6-21.1,14c-1.2,0.5-2.5,0.9-3.6,1.5c-0.4,0.2-0.9,0.8-0.9,1.2
		c-0.1,5.9,1.4,11.1,6.7,14.5c4.3,2.7,8.8,2.5,13.3,0.4c3.9-1.8,6.8-4.7,9.6-7.8C552.6,331.7,553.4,330.7,554.3,329.6z M522.4,322.1
		c2.3-1.2,4.3-2.1,6.3-3.2c6.8-3.7,12.4-8.6,16.2-15.5c1.5-2.8,2.8-5.8,2.7-9.1c-0.1-2.9-1.6-4.4-4.3-4.4c-0.8,0-1.7,0.2-2.5,0.4
		c-2.7,0.8-4.7,2.5-6.5,4.5c-4.3,4.8-7.4,10.4-9.5,16.5C523.6,314.6,522.8,318.1,522.4,322.1z"/>
	<path d="M1092.5,332.5c0.6,0.6,1.1,1.2,1.8,1.9c-1.5,1.4-2.9,2.8-4.4,4.1c-2.5,2-5,4-7.7,5.8c-2.1,1.4-4.6,2.2-7.3,2
		c-4.5-0.3-7.6-3.7-7.8-8.3c-0.3-5.9,1.6-11.2,3.9-16.5c3.8-8.7,9-16.7,14.1-24.7c0.5-0.7,1-1.5,1.4-2.2c0-0.1,0-0.1,0.1-0.4
		c-4.7,4.1-10,5.4-16.1,4.2c-2.6,7.5-6.9,14.1-12,20.1c-0.1,0-0.2,0-0.2,0c-1.8-1.5-1.8-1.5-0.4-3.3c4.1-5.2,7.8-10.7,9.9-17.1
		c0.1-0.1,0.1-0.3,0-0.1c-1.9-1.9-3.9-3.4-5.5-5.4c-3-3.8-3.3-10.2-1-13.9c2.6-4.2,7.9-4.3,10.5-0.1c1.8,2.9,1.9,6.1,1.5,9.4
		c-0.2,1.4-0.5,2.8-0.8,4.4c3.6,1,7.2,1,10.8-0.4c0.7-0.3,1.5-0.5,2-1c2-1.9,4.4-1.5,7-1.4c-0.7,1.4-1.3,2.6-2,3.9
		c-5.9,11.2-11,22.7-14.1,35c-0.6,2.5-0.8,5.1-1.1,7.7c-0.1,0.7,0.1,1.5,0.4,2.2c0.9,2.7,3.1,3.8,5.7,2.6c2.1-1,4-2.3,5.9-3.6
		C1089,335.7,1090.6,334.1,1092.5,332.5z M1070.3,291.2c0.5-2.9,0.7-5.6-0.2-8.2c-0.3-0.8-0.6-1.6-1.2-2.1c-0.7-0.6-1.6-1-2.5-1
		c-1.1,0-1.7,1-2,2c-0.2,0.6-0.2,1.3-0.1,1.9C1064.8,287.3,1067.3,289.3,1070.3,291.2z"/>
	<path d="M923.4,307.1c1.6-1.4,3.2-2.6,4.3-4c2-2.6,2.4-5.6,1.9-8.8c-0.6-3.3-3.3-4.8-6.9-4c-3.2,0.7-5.7,2.5-7.8,4.9
		c-6.8,7.5-10.7,16.5-11.7,26.6c-0.4,4.2-0.2,8.3,1.6,12.2c2.8,6.4,8.7,9.1,15.3,7c3.6-1.1,6.6-3.3,9.2-5.8c1.9-1.9,3.7-4,5.6-6.1
		c0.4,0.4,0.9,0.7,1.5,1.2c-1.5,1.9-2.9,3.8-4.4,5.6c-2.8,3.3-5.8,6.3-9.7,8.3c-4.8,2.6-10,3.4-15.3,2.1
		c-6.4-1.5-11.5-7.4-12.5-14.3c-1.1-7.4,0.4-14.5,3.5-21.2c3.3-7.1,7.8-13.3,14.1-18.2c3.6-2.8,7.6-4.9,12.3-5.2
		c5.6-0.3,10,2.4,10.9,7.5c0.7,4.1-0.8,7.4-3.6,10.3c-1.6,1.7-3.5,2.9-5.9,2.6C924.9,307.8,924.1,307.3,923.4,307.1z"/>
	<path d="M474.4,286.6c-0.5,1.9-0.9,3.6-1.4,5.3c-2.7,10.3-5.5,20.7-8.2,31c-0.9,3.4-1.6,6.9-1.3,10.5c0.1,1.4,0.4,2.9,1,4.3
		c0.9,2.1,2.7,2.8,4.6,1.6c2-1.2,3.8-2.8,5.7-4.3c0.9-0.7,1.7-1.6,2.6-2.4c0.4,0.4,0.9,0.8,1.6,1.4c-1.9,2.1-3.6,4.2-5.5,6.2
		c-1.4,1.5-2.9,3.1-4.5,4.4c-2.6,2.2-5.3,2.6-7.6,1c-2.6-1.7-3.6-4.4-4.2-7.3c-0.6-3.2-0.1-6.5,0.5-9.6c2.2-12.4,4.4-24.7,6.7-37.1
		c0.1-0.3,0.3-0.8,0.5-0.9C468,289.3,471.1,288,474.4,286.6z"/>
	<path d="M477.3,259.2c-3.2,0-6.1-2.8-6-6c0.1-3.4,2.6-5.8,6.1-5.8c3.4,0,5.7,2.3,5.7,5.8C483.1,256.7,480.6,259.2,477.3,259.2z"/>
	<path class="st0" d="M1070.3,291.2c-3-1.9-5.5-3.9-6-7.5c-0.1-0.6,0-1.3,0.1-1.9c0.3-1,0.9-2,2-2c0.8,0,1.8,0.5,2.5,1
		c0.6,0.5,1,1.4,1.2,2.1C1070.9,285.6,1070.7,288.3,1070.3,291.2z"/>
</g>
</svg>

              
            
!

CSS

              
                .notepad {
  width: 400px;
  height: 600px;
  background-color: #f2e9de;
  top: 100px;
  left: 300px;
  position: absolute;
  box-shadow: 10px 10px 5px #888888;
}

.line1 {
  width: 400px;
  height: 3px;
  top: 60px;
  background-color: #a5b9e2;
  position: absolute;
}

.line2 {
  width: 400px;
  height: 2px;
  top: 90px;
  background-color: #a5b9e2;
  position: absolute;
}
.line3 {
  width: 400px;
  height: 2px;
  top: 120px;
  background-color: #a5b9e2;
  position: absolute;
}
.line4 {
  width: 400px;
  height: 2px;
  top: 150px;
  background-color: #a5b9e2;
  position: absolute;
}
.line5 {
  width: 400px;
  height: 2px;
  top: 180px;
  background-color: #a5b9e2;
  position: absolute;
}
.line6 {
  width: 400px;
  height: 2px;
  top: 210px;
  background-color: #a5b9e2;
  position: absolute;
}
.line7 {
  width: 400px;
  height: 2px;
  top: 240px;
  background-color: #a5b9e2;
  position: absolute;
}
.line8 {
  width: 400px;
  height: 2px;
  top: 270px;
  background-color: #a5b9e2;
  position: absolute;
}
.line9 {
  width: 400px;
  height: 2px;
  top: 300px;
  background-color: #a5b9e2;
  position: absolute;
}
.line10 {
  width: 400px;
  height: 2px;
  top: 330px;
  background-color: #a5b9e2;
  position: absolute;
}
.line11 {
  width: 400px;
  height: 2px;
  top: 360px;
  background-color: #a5b9e2;
  position: absolute;
}
.line12 {
  width: 400px;
  height: 2px;
  top: 390px;
  background-color: #a5b9e2;
  position: absolute;
}
.line13 {
  width: 400px;
  height: 2px;
  top: 420px;
  background-color: #a5b9e2;
  position: absolute;
}
.line14 {
  width: 400px;
  height: 2px;
  top: 450px;
  background-color: #a5b9e2;
  position: absolute;
}
.line15 {
  width: 400px;
  height: 2px;
  top: 480px;
  background-color: #a5b9e2;
  position: absolute;
}
.line16 {
  width: 400px;
  height: 2px;
  top: 510px;
  background-color: #a5b9e2;
  position: absolute;
}
.line17 {
  width: 400px;
  height: 2px;
  top: 540px;
  background-color: #a5b9e2;
  position: absolute;
}
.line18 {
  width: 400px;
  height: 2px;
  top: 570px;
  background-color: #a5b9e2;
  position: absolute;
}

.dot1 {
  background-color: #685847;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 40px;
  position: absolute;
  -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.dot2 {
  background-color: #685847;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 110px;
  position: absolute;
  -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.dot3 {
  background-color: #685847;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 185px;
  position: absolute;
  -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.dot4 {
  background-color: #685847;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 260px;
  position: absolute;
  -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.dot5 {
  background-color: #685847;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 330px;
  position: absolute;
  -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}

.metal1 {
  background-color: #cfd4d6;
  width: 10px;
  height: 50px;
  top: 75px;
  left: 345px;
  position: absolute;
  border-radius: 25px;
  box-shadow: 2px 2px 5px #888888;
}
.metal2 {
  background-color: #cfd4d6;
  width: 10px;
  height: 50px;
  top: 75px;
  left: 414px;
  position: absolute;
  border-radius: 25px;
  box-shadow: 2px 2px 5px #888888;
}
.metal3 {
  background-color: #cfd4d6;
  width: 10px;
  height: 50px;
  top: 75px;
  left: 489px;
  position: absolute;
  border-radius: 25px;
  box-shadow: 2px 2px 5px #888888;
}
.metal4 {
  background-color: #cfd4d6;
  width: 10px;
  height: 50px;
  top: 75px;
  left: 565px;
  position: absolute;
  border-radius: 25px;
  box-shadow: 2px 2px 5px #888888;
}
.metal5 {
  background-color: #cfd4d6;
  width: 10px;
  height: 50px;
  top: 75px;
  left: 635px;
  position: absolute;
  border-radius: 25px;
  box-shadow: 2px 2px 5px #888888;
}

.pencil-wrapper {
  box-shadow: 2px 2px 5px #888888;
}

.pencil {
  background-color: #f2c459;
  width: 35px;
  height: 350px;
  top: 200px;
  left: 800px;
  position: absolute;
  box-shadow: 2px 2px 5px #888888;
}

.pencilTip {
  background-color: #e5ddc9;
  width: 35px;
  height: 50px;
  top: 150px;
  left: 800px;
  position: absolute;
  box-shadow: 5px 5px 5px #888888;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.lead {
  background-color: #3a3a3a;
  width: 35px;
  height: 20px;
  top: 0px;
  left: 0px;
  position: absolute;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.eMetal {
  background-color: #5c845c;
  width: 35px;
  height: 20px;
  top: 540px;
  left: 800px;
  position: absolute;
  box-shadow: 2px 2px 5px #888888;
}

.eraser {
  background-color: #d1b3cb;
  width: 35px;
  height: 35px;
  top: 550px;
  left: 800px;
  box-shadow: 2px 2px 5px #888888;
  position: absolute;
  border-radius: 5px;
}

svg {
  margin:auto;
  position:absolute;
  top: 50px;
  left: 170px;
  height:75%;
  padding: 5%;
  height: 300px;
}

              
            
!

JS

              
                
              
            
!
999px

Console