<h1><a href="/">Sketch Toy</a></h1>
<div class="share">
<span class="facebook-like-wrapper"></span>
<a href="
https://twitter.com/share" ; class="twitter-share-button" data-url="
http://sketchtoy.com/" ; data-text="Sketch using animated lines and share replays with friends on @sketchtoy!" data-related="sketchtoy" data-count="none">Tweet</a>
<a href="
https://twitter.com/SketchToy" ; class="twitter-follow-button" data-show-count="false">Follow @SketchToy</a>
</div>
</header>
<div class="toolbar">
<button class="btn save-button" title="Save the sketch" name="save-button">Save</button>
<button class="btn reset-button" title="Clear the whole canvas" name="reset-button">Clear</button>
<button class="btn undo-button" title="Undo last action" name="undo-button">Undo</
<div class="divider"></div>
<button class="btn eraser-toggle" title="Eraser" name="eraser-toggle">Eraser</button>
<button class="btn dash-toggle" title="Dash" name="dash-toggle">Dash</button>
<div class="dropdown size-dropdown">
<button class="btn dropdown-title">Size: <span class="value"></span></button>
<div class="dropdown-list">
<ul>
<li><button data-value="0.5" class="small"><span style="width: 1px; height: 1px;"></span></button></li>
<li><button data-value="1" class="small"><span style="width: 2px; height: 2px;"></span></button></li>
<li><button data-value="2" class="small"><span style="width: 3px; height: 3px;"></span></button></li>
<li><button data-value="3" class="small"><span style="width: 4px; height: 4px;"></span></button></li>
<li><button data-value="4"><span style="width: 6px; height: 6px;"></span></button></li>
<li><button data-value="5"><span style="width: 8px; height: 8px;"></span></button></li>
<li><button data-value="7"><span style="width: 10px; height: 10px;"></span></button></li>
<li><button data-value="9"><span style="width: 12px; height: 12px;"></span></button></li>
<li><button data-value="16"><span style="width: 16px; height: 16px;"></span></button></li>
<li><button data-value="32" class="large"><span style="width: 28px; height: 28px;"></span></button></li>
</ul>
</div>
</div>
<div class="dropdown vibration-dropdown">
<button class="btn dropdown-title">Vibration: <span class="value"></span></button>
<div class="dropdown-list">
<ul>
<li><button data-value="0">0</button></li>
<li><button data-value="1">1</button></li>
<li><button data-value="2">2</button></li>
<li><button data-value="3">3</button></li>
<li><button data-value="5">5</button></li>
<li><button data-value="10">10</button></li>
<li><button data-value="20">20</button></li>
</ul>
</div>
</div>
<div class="dropdown color-dropdown">
<button class="btn dropdown-title"><span class="value"></span></button>
<div class="dropdown-list">
<ul>
<li><button data-value="#000000" style="background: #000000;"> </button></li>
<li><button data-value="#555555" style="background: #555555;"> </button></li>
<li><button data-value="#999999" style="background: #999999;"> </button></li>
<li><button data-value="#0a67a3" style="background: #0a67a3;"> </button></li>
<li><button data-value="#3e97d1" style="background: #3e97d1;"> </button></li>
<li><button data-value="#8ec9ef" style="background: #8ec9ef;"> </button></li>
<li><button data-value="#ff0000" style="background: #ff0000;"> </button></li>
<li><button data-value="#f56c36" style="background: #f56c36;"> </button></li>
<li><button data-value="#f8a881" style="background: #f8a881;"> </button></li>
<li><button data-value="#407f1a" style="background: #407f1a;"> </button></li>
<li><button data-value="#7ed616" style="background: #7ed616;"> </button></li>
<li><button data-value="#ddec38" style="background: #ddec38;"> </button></li>
</ul>
</div>
</div>
<div class="divider"></div>
<button class="btn share-button blue">Share <span class="icon"></span></button>
<button class="btn facebook-connect blue loading">Facebook Connect</button>
</div>
<div class="share-overlay">
<div class="inner">
<a class="close" href="#"></a>
<div class="url">
<p class="label">Link:</p>
<input type="text" readonly value="" />
</div>
<div class="share">
<a class="share-facebook" href="#">Share <span></span></a>
<a class="share-facebook-message" href="#">Send Message <span></span></a>
<a class="share-facebook-photo" href="#">Upload Photo <span></span></a>
<a class="share-twitter" href="#">Tweet <span></span></a>
<a class="share-email" href="#">Email <span></span></a>
<a class="share-download" href="#">Download Image <span></span></a>
</div>
</div>
</div>
<div class="loading-overlay">
<div class="inner">
<div class="status"></div>
<div class="message"></div>
</div>
</div>
<div id="spinner"></div>
<div class="sketch-canvas-wrapper">
<p id="left-ad">
<script type="text/javascript">
google_ad_client = "ca-pub-1850057652725073";
google_ad_slot = "6616331175";
google_ad_width = 120;
google_ad_height = 600;
</script>
<script type="text/javascript" src="
http://pagead2.googlesynd...s"></script> ;
</p>
<canvas class="sketch-canvas">
<p class="noCanvas">You need a <a href="
http://www.google.com/chrome">modern browser</a> to view this.</p>
</canvas>
</a>
</section>
<section>
<a class="facebook-app-link" href="
http://www.facebook.com/SketchToy" ; target="_blank">
<img src="
http://d1835mevib0k1p.clo...ebook-app-banner.png" ; alt="Sketch Toy Chrome App " width="340" height="96">
</a>
</section>
</div>
<div class="right">
<section class="about">
<h3>About Sketch Toy</h3>
<p>
Remember those old cartoons where hand drawn lines appeared to vibrate because of
slight variance between frames? This app lets you draw sketches like that right
in your browser and share replays with friends!
</p>
<p>
All sketches are user generated and do <strong>not</strong> represent the views
of Sketch Toy.
</p>
</section>
<section class="instructions">
<h3>Tips</h3>
<p>
Use the left/right keyboard arrows to rotate the sketch in 3D!
</p>
<p>
Press <strong>CTRL + Z</strong> to undo.
</p>
</section>
</div>
<p class="links">
© 2013 <a href="
http://hakim.se/">Hakim El Hattab</a> —
<a href="/terms">Terms of Service</a> —
<a href="/privacy">Privacy Policy</a> —
<a href="
http://facebook.com/sketc...uot;>Facebook</a> ; —
<a href="
http://twitter.com/sketch...quot;>Twitter</a> ; —
<a href="
http://sketch-toy.tumblr....">Tumblr</a> ;
</p>
</footer>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '433337680065765',
channelUrl : '//sketchtoy.com/facebook/channel.php',
status : true,
cookie : true,
xfbml : true
});
sketch.Facebook.initialize();
};
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
</body>
</html>