grysnxx/waves
1
0
Fork 0
forked from sent/waves
Code Pull Requests Activity
03ec66c1a1
waves/public/assets/g/weavesilk/index.html
𓍼 afd9e46a0d waves
2025-04-09 17:11:14 -05:00

405 lines
23 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<script src="/js/all.min.js"></script>
<meta charset="utf-8">
<!-- affiliate-data=myAffiliateData, app-argument=myURL -->
<!-- <meta name="apple-itunes-app" content="app-id=436590129"> -->
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width">
<meta property="og:image" content="http://weavesilk.com/img/silk_thumb.png" />
<link rel="image_src" type="image/png" href="http://weavesilk.com/img/silk_thumb.png" />
<meta property="og:description"content="Create beautiful flowing art with Silk."/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/ss-social.css" />
<link rel="stylesheet" href="css/site.css" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-20622056-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-20622056-1');
</script>
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.fullscreen.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/knockout-2.2.0.min.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/keymaster.js"></script>
<script src="js/noise.js"></script>
<script src="js/detect.js"></script>
<script src="js/site.js"></script>
<style>
.email-me { display: none; }
body.iphone .email-me {
display: block;
z-index: 10000;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
padding: 0.5em 0;
xtext-decoration: none;
color: #6A6378;
}
body.iphone .email-me:hover {
color: #fff;
text-decoration: underline;
}
</style>
<title>Weave Silk</title>
</head>
<body data-bind="css: { 'iphone': isIPhone, 'right-side-up': isRightSideUp, 'silk-active': silkActive, 'mouse-over-previewable-controls': mouseOverControls, 'mouse-down-on-slider': mouseDownOnSlider }">
<!-- https://itunes.apple.com/us/app/id436590129?mt=8&ls=1 -->
<!-- http://goo.gl/urr6sT-->
<a class="email-me" href="mailto:yurivish@gmail.com">Send Feedback</a>
<a href="https://goo.gl/oIIuif" id="iphone-image-link"> </a>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.min.js#xfbml=1&appId=408271179236250";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="canvii-container">
<div id="main-controls" class="controls-container">
<div class="row btn-row share-btn-row">
<div class="btn" id="btn-new" data-bind="click: clear, css: { visible: notPristine }">
<span class="text">New</span>
</div>
<div id="share-wrap">
<div class="btn" id="btn-share" data-bind="click: shareButtonClick, css: { visible: showShareButton, disabled: shareDisabled, loading: shareLoading, 'hide': showShareOptions }">
<div class="text">Share</div>
<div class="loading-stripes"></div>
</div>
<div id="share-options" data-bind="css: { 'show-share-options': showShareOptions }">
<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlFacebook }">
<span class="text"><i class="ss-facebook"></i></span>
<!-- <div class="tt">Facebook</div> -->
</a>
<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlTwitter }">
<span class="text"><i class="ss-twitter"></i></span>
<!-- <div class="tt">Twitter</div> -->
</a>
<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlPinterest }">
<span class="text"><i class="ss-pinterest"></i></span>
<div class="tt">Pinterest</div>
</a>
<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlEmail }">
<span class="text"><i class="ss-mail"></i></span>
<div class="tt">Email</div>
</a>
<input class="visible direct-link" data-bind="value: shareUrlDirect, text: shareUrlDirect" />
</div>
</div>
</div>
<div class="row">
<div class="btn silk-icon" data-bind="click: toggleFullscreen, css: { visible: notPristine }">
<div class="contents"><i class="icon-fullscreen"></i></div>
<div class="tt" data-bind="visible: isFullscreen">Fullscreen</div>
<div class="tt" data-bind="visible: isNotFullscreen">Fullscreen</div>
</div>
<div class="btn silk-icon" data-bind="click: download, css: { visible: notPristine }">
<div class="contents"><i class="icon-camera"></i></div>
<div class="tt">Save Picture</div>
</div>
<div class="btn silk-icon" id="selected-color-icon" data-bind="click: toggleAllControls, css: { visible: notPristine }">
<div class="contents"><i class="icon-circle"></i></div>
<div class="tt">Controls</div>
</div>
<div class="btn silk-icon" data-bind="click: undo, css: { visible: notPristine, 'flip-icon': nextUndoIsRedo }">
<div class="contents"><i class="icon-undo"></i></div>
<div class="tt" data-bind="visible: nextUndoIsNotRedo">Undo</div>
<div class="tt" data-bind="visible: nextUndoIsRedo">Redo</div>
</div>
</div>
<div class="row controls-row download-row" data-bind="css: { visible: showDownload }">
<p class="instructions">To save, right click the thumbnail and choose <em>Save Image As...</em>.</p>
<img id="download-image" />
</div>
<div class="row controls-row color-and-symmetry-row" data-bind="css: { visible: showColorPicker }">
<svg id="colorpicker">
</svg>
<div class="label" style="text-align: center;">Drag colors to blend.</div>
<div id="symmetry-controls">
<div class="one-d slider control" id="sym-num-rotations">
<div class="slider-bg">
<div class="ticks">
<div class="tick one"></div>
<div class="tick two"></div>
<div class="tick three"></div>
<div class="tick four"></div>
<div class="tick five"></div>
<div class="tick six"></div>
</div>
<div class="slider-bg-pc"></div>
</div>
<div class="handle"></div>
<div class="ghost-handle"></div>
</div>
<div id="sym-num-rotations-label" class="label"></div>
<div class="toggle control" id="toggle-mirror" data-bind="click: toggleMirror, css: { on: mirror }">
<div class="description">Mirror across center</div>
<div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
</div>
<div class="toggle control" id="toggle-spiral" data-bind="click: toggleSpiral, css: { on: spiral }">
<div class="description">Spiral towards center</div>
<div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
</div>
</div>
</div>
</div>
<div id="sound-and-about" class="controls-container">
<div class="row social-row">
<div class="btn silk-icon" id="about-button" data-bind="click: toggleAbout, css: { visible: notPristine }">
<div class="contents">?</div>
<div class="tt">About</div>
</div>
<div class="btn silk-icon" data-bind="click: toggleMute, css: { visible: notPristine }">
<div class="contents"><i class="icon-volume-off" data-bind="visible: false"></i><i class="icon-volume-up" data-bind="visible: false"></i></div>
<div class="tt" data-bind="visible: muted">Muted</div>
<div class="tt" data-bind="visible: notMuted">Mute</div>
</div>
<!-- notPristineAndJustCleared -->
<div class="social" data-bind="css: { visible: notPristine }">
<div class="fb-like" data-href="https://www.facebook.com/pages/Silk/135022713223750?ref=ts&amp;fref=ts" data-send="false" data-layout="button_count" data-width="50" data-show-faces="true" data-colorscheme="dark" data-font="lucida grande"></div>
<a href="https://twitter.com/tweetsilk" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="app-link-container row" data-bind="css: { visible: notPristine }">
</div>
<div class="row about-row" data-bind="css: { visible: showAbout }">
<p>Silk was made by Yuri Vishnevsky, with <a href="http://click.linksynergy.com/fs-bin/stat?id=1KYVs20MuZw&offerid=146261&type=3&subid=0&tmpid=1826&RD_PARM1=https%253A%252F%252Fitunes.apple.com%252Fus%252Falbum%252Fthe-world-forgotten-single%252Fid579359664%253Fuo%253D4%2526partnerId%253D30">music</a> and sound crafted by <a href="http://microscopics.co.uk">Mat Jarvis</a>.</p>
<p>Art shared with Silk is licensed under <a href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons</a>.</p>
<p>If you enjoyed Silk, please <a href="mailto:yurivish@gmail.com">let me know</a>!</p>
</div>
</div>
<canvas id="silk-1" class="silk-canvas active"></canvas>
<canvas id="silk-2" class="silk-canvas buffer"></canvas>
<canvas id="sparks"></canvas>
</div>
<div id="replay-thumbnail" data-bind="css: { visible: showingReplayThumbnail }, click: hideReplayThumbnail ">
<img data-bind="attr: { src: shareUrlThumbnail }" width="150" />
<div class="tt">Hide thumbnail</div>
</div>
<!-- https://itunes.apple.com/us/app/id436590129?mt=8&ls=1 -->
<a href="http://goo.gl/oIIuif" id="appstore-badge">
<!-- <img src="img/now_on_ios.png" id="now-on-ios" width="135" /> -->
<!-- <img src="img/app_thumb.png" id="app-thumb" width="135" /> -->
<div id="announcement" data-bind="css: { visible: showBigAnnouncement }">
<!-- <div data-bind="click: closeAnnouncement, css: { 'ad-showing-unnecessarily': notShowBigAnnouncementDefault, 'close-pressed': announcementClosePressed }" class="close-button">X</div> -->
<img src="img/orig_announcement.png" id="app-announcement" width="170" />
<img src="img/orig_announcement_hover.png" id="app-announcement-hover" width="170" />
</div>
<div id="badge" data-bind="css: { visible: showAnyAnnouncement } ">
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
<path fill="#A6A6A6" d="M130.198,39.989H4.729C2.122,39.989,0,37.872,0,35.268V4.726C0,2.12,2.122,0,4.729,0h125.468
c2.604,0,4.729,2.12,4.729,4.726v30.542C134.928,37.872,132.803,39.989,130.198,39.989L130.198,39.989z"/>
<path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
<path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528
c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196
c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.554,2.355,3.287,4.016,3.226c1.625-0.066,2.232-1.035,4.193-1.035
c1.943,0,2.513,1.035,4.207,0.996c1.744-0.027,2.842-1.56,3.89-3.127c1.255-1.779,1.759-3.533,1.779-3.623
C33.508,24.924,30.162,23.646,30.128,19.784z"/>
<path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944
c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="98.9609" y1="0.9028" x2="98.9609" y2="36.9487" gradientTransform="matrix(1 0 0 -1 0 41)">
<stop offset="0" style="stop-color:#1A1A1A;stop-opacity:0.1"/>
<stop offset="0.1235" style="stop-color:#212121;stop-opacity:0.1506"/>
<stop offset="0.3085" style="stop-color:#353535;stop-opacity:0.2265"/>
<stop offset="0.5321" style="stop-color:#575757;stop-opacity:0.3181"/>
<stop offset="0.7834" style="stop-color:#858585;stop-opacity:0.4212"/>
<stop offset="1" style="stop-color:#B3B3B3;stop-opacity:0.51"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M130.198,0H62.993l26.323,39.989h40.882c2.604,0,4.729-2.117,4.729-4.724V4.726
C134.928,2.12,132.803,0,130.198,0z"/>
<g>
<path fill="#FFFFFF" d="M53.665,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909H42.43l4.285-13.308h2.646L53.665,31.504z
M49.775,25.955L48.65,22.48c-0.119-0.355-0.343-1.191-0.671-2.507h-0.04c-0.132,0.566-0.343,1.402-0.632,2.507l-1.106,3.475
H49.775z"/>
<path fill="#FFFFFF" d="M64.663,26.588c0,1.632-0.443,2.922-1.33,3.869c-0.794,0.843-1.781,1.264-2.958,1.264
c-1.271,0-2.185-0.453-2.74-1.361v5.035h-2.132V25.062c0-1.025-0.027-2.076-0.079-3.154h1.875l0.119,1.521h0.04
c0.711-1.146,1.79-1.719,3.238-1.719c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.663,25.127,64.663,26.588z M62.491,26.666
c0-0.934-0.21-1.704-0.632-2.311c-0.461-0.631-1.08-0.947-1.856-0.947c-0.526,0-1.004,0.176-1.431,0.523
c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.479-0.099,0.649v1.601c0,0.697,0.214,1.286,0.642,1.768
c0.428,0.48,0.984,0.721,1.668,0.721c0.803,0,1.428-0.311,1.875-0.928C62.267,28.496,62.491,27.68,62.491,26.666z"/>
<path fill="#FFFFFF" d="M75.7,26.588c0,1.632-0.443,2.922-1.33,3.869c-0.795,0.843-1.781,1.264-2.959,1.264
c-1.271,0-2.185-0.453-2.74-1.361v5.035h-2.132V25.062c0-1.025-0.027-2.076-0.079-3.154h1.875l0.119,1.521h0.04
c0.71-1.146,1.789-1.719,3.238-1.719c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.7,25.127,75.7,26.588z M73.527,26.666
c0-0.934-0.211-1.704-0.633-2.311c-0.461-0.631-1.078-0.947-1.854-0.947c-0.526,0-1.004,0.176-1.433,0.523
c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.1,0.479-0.1,0.649v1.601c0,0.697,0.215,1.286,0.641,1.768
c0.428,0.479,0.984,0.721,1.67,0.721c0.804,0,1.429-0.311,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>
<path fill="#FFFFFF" d="M88.04,27.771c0,1.133-0.396,2.054-1.183,2.765c-0.866,0.776-2.075,1.165-3.625,1.165
c-1.432,0-2.58-0.276-3.446-0.829l0.493-1.777c0.935,0.554,1.962,0.83,3.08,0.83c0.804,0,1.429-0.182,1.875-0.543
c0.447-0.362,0.673-0.846,0.673-1.45c0-0.541-0.187-0.994-0.554-1.363c-0.369-0.368-0.979-0.711-1.836-1.026
c-2.33-0.869-3.496-2.14-3.496-3.812c0-1.092,0.412-1.986,1.234-2.685c0.822-0.698,1.912-1.047,3.268-1.047
c1.211,0,2.22,0.211,3.021,0.632l-0.535,1.738c-0.754-0.408-1.605-0.612-2.557-0.612c-0.752,0-1.342,0.185-1.764,0.553
c-0.355,0.329-0.535,0.73-0.535,1.206c0,0.525,0.205,0.961,0.613,1.303c0.354,0.315,1,0.658,1.934,1.026
c1.146,0.462,1.988,1,2.527,1.618C87.77,26.081,88.04,26.852,88.04,27.771z"/>
<path fill="#FFFFFF" d="M95.107,23.508h-2.35v4.659c0,1.185,0.414,1.776,1.244,1.776c0.381,0,0.697-0.032,0.947-0.099l0.059,1.619
c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.771c-0.473-0.514-0.711-1.375-0.711-2.587v-4.837h-1.4v-1.6h1.4
v-1.757l2.094-0.632v2.389h2.35V23.508z"/>
<path fill="#FFFFFF" d="M105.689,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.881,0.975-2.053,1.461-3.514,1.461
c-1.41,0-2.531-0.467-3.367-1.4c-0.836-0.935-1.254-2.113-1.254-3.534c0-1.487,0.432-2.705,1.293-3.652
c0.863-0.948,2.025-1.422,3.486-1.422c1.408,0,2.539,0.468,3.395,1.402C105.282,24.021,105.689,25.191,105.689,26.627z
M103.479,26.676c0-0.879-0.19-1.633-0.571-2.264c-0.447-0.762-1.087-1.143-1.916-1.143c-0.854,0-1.509,0.381-1.955,1.143
c-0.382,0.631-0.572,1.398-0.572,2.304c0,0.88,0.19,1.636,0.572,2.265c0.461,0.762,1.104,1.143,1.937,1.143
c0.815,0,1.454-0.389,1.916-1.162C103.282,28.316,103.479,27.557,103.479,26.676z"/>
<path fill="#FFFFFF" d="M112.622,23.783c-0.211-0.039-0.437-0.059-0.672-0.059c-0.75,0-1.33,0.282-1.738,0.85
c-0.354,0.5-0.532,1.132-0.532,1.895v5.035h-2.132V24.93c0-1.105-0.021-2.113-0.062-3.021h1.857l0.078,1.836h0.059
c0.226-0.631,0.58-1.14,1.066-1.521c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039L112.622,23.783
L112.622,23.783z"/>
<path fill="#FFFFFF" d="M122.157,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.024,0.948,0.334,1.674,0.928,2.174
c0.539,0.446,1.236,0.67,2.092,0.67c0.947,0,1.811-0.15,2.588-0.453l0.334,1.479c-0.908,0.396-1.98,0.593-3.217,0.593
c-1.488,0-2.656-0.438-3.506-1.312c-0.848-0.875-1.273-2.051-1.273-3.524c0-1.446,0.395-2.651,1.186-3.612
c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.874,24.047,122.157,25.055,122.157,26.252z
M120.124,25.699c0.015-0.633-0.125-1.178-0.414-1.639c-0.369-0.594-0.937-0.89-1.698-0.89c-0.697,0-1.265,0.289-1.697,0.869
c-0.355,0.461-0.566,1.015-0.631,1.658L120.124,25.699L120.124,25.699z"/>
</g>
<g>
<g>
<path fill="#FFFFFF" d="M45.211,13.491c-0.593,0-1.106-0.029-1.533-0.078V6.979c0.553-0.087,1.154-0.136,1.805-0.136
c2.445,0,3.571,1.203,3.571,3.164C49.054,12.269,47.724,13.491,45.211,13.491z M45.569,7.668c-0.33,0-0.611,0.02-0.844,0.068
v4.891c0.126,0.02,0.368,0.029,0.708,0.029c1.602,0,2.514-0.912,2.514-2.62C47.947,8.513,47.122,7.668,45.569,7.668z"/>
<path fill="#FFFFFF" d="M52.563,13.54c-1.378,0-2.271-1.029-2.271-2.426c0-1.456,0.912-2.494,2.349-2.494
c1.358,0,2.271,0.98,2.271,2.417C54.912,12.511,53.971,13.54,52.563,13.54z M52.603,9.386c-0.757,0-1.242,0.708-1.242,1.698
c0,0.971,0.495,1.679,1.232,1.679c0.737,0,1.232-0.757,1.232-1.699C53.825,10.104,53.34,9.386,52.603,9.386z"/>
<path fill="#FFFFFF" d="M62.77,8.717l-1.475,4.716h-0.961l-0.611-2.048c-0.155-0.514-0.281-1.019-0.379-1.523h-0.02
c-0.077,0.514-0.223,1.029-0.378,1.523l-0.65,2.048h-0.971l-1.388-4.716h1.077l0.534,2.242c0.126,0.534,0.232,1.038,0.32,1.514
h0.02c0.077-0.397,0.203-0.893,0.388-1.504l0.67-2.251H59.8l0.641,2.203c0.155,0.534,0.281,1.058,0.379,1.553h0.028
c0.068-0.485,0.175-1,0.32-1.553l0.573-2.203L62.77,8.717L62.77,8.717z"/>
<path fill="#FFFFFF" d="M68.2,13.433h-1.048v-2.708c0-0.834-0.32-1.252-0.951-1.252c-0.621,0-1.048,0.534-1.048,1.155v2.805
h-1.048v-3.368c0-0.417-0.01-0.864-0.039-1.349h0.922l0.049,0.728h0.029C65.348,8.94,65.92,8.62,66.561,8.62
c0.99,0,1.64,0.757,1.64,1.989L68.2,13.433L68.2,13.433z"/>
<path fill="#FFFFFF" d="M71.09,13.433h-1.049v-6.88h1.049V13.433z"/>
<path fill="#FFFFFF" d="M74.911,13.54c-1.377,0-2.271-1.029-2.271-2.426c0-1.456,0.912-2.494,2.348-2.494
c1.359,0,2.271,0.98,2.271,2.417C77.26,12.511,76.318,13.54,74.911,13.54z M74.95,9.386c-0.757,0-1.242,0.708-1.242,1.698
c0,0.971,0.496,1.679,1.231,1.679c0.738,0,1.232-0.757,1.232-1.699C76.172,10.104,75.688,9.386,74.95,9.386z"/>
<path fill="#FFFFFF" d="M81.391,13.433l-0.076-0.543h-0.028c-0.32,0.437-0.787,0.65-1.379,0.65c-0.845,0-1.445-0.592-1.445-1.388
c0-1.164,1.009-1.766,2.756-1.766v-0.087c0-0.621-0.329-0.932-0.979-0.932c-0.465,0-0.873,0.117-1.232,0.35l-0.213-0.689
c0.436-0.272,0.98-0.408,1.619-0.408c1.232,0,1.854,0.65,1.854,1.951v1.737c0,0.476,0.021,0.845,0.068,1.126L81.391,13.433
L81.391,13.433z M81.247,11.084c-1.164,0-1.748,0.282-1.748,0.951c0,0.495,0.301,0.737,0.719,0.737
c0.533,0,1.029-0.407,1.029-0.96V11.084z"/>
<path fill="#FFFFFF" d="M87.357,13.433l-0.049-0.757h-0.029c-0.301,0.572-0.807,0.864-1.514,0.864c-1.137,0-1.979-1-1.979-2.407
c0-1.475,0.873-2.514,2.065-2.514c0.631,0,1.078,0.213,1.33,0.641h0.021V6.553h1.049v5.609c0,0.456,0.011,0.883,0.039,1.271
H87.357z M87.202,10.658c0-0.66-0.437-1.223-1.104-1.223c-0.777,0-1.252,0.689-1.252,1.659c0,0.951,0.493,1.602,1.231,1.602
c0.659,0,1.125-0.573,1.125-1.252V10.658z"/>
<path fill="#FFFFFF" d="M94.902,13.54c-1.377,0-2.27-1.029-2.27-2.426c0-1.456,0.912-2.494,2.348-2.494
c1.359,0,2.271,0.98,2.271,2.417C97.252,12.511,96.311,13.54,94.902,13.54z M94.941,9.386c-0.756,0-1.241,0.708-1.241,1.698
c0,0.971,0.495,1.679,1.231,1.679c0.738,0,1.232-0.757,1.232-1.699C96.165,10.104,95.68,9.386,94.941,9.386z"/>
<path fill="#FFFFFF" d="M102.887,13.433h-1.049v-2.708c0-0.834-0.32-1.252-0.951-1.252c-0.621,0-1.047,0.534-1.047,1.155v2.805
h-1.049v-3.368c0-0.417-0.01-0.864-0.039-1.349h0.922l0.049,0.728h0.029c0.281-0.504,0.854-0.825,1.494-0.825
c0.99,0,1.641,0.757,1.641,1.989V13.433z"/>
<path fill="#FFFFFF" d="M109.938,9.503h-1.153v2.29c0,0.583,0.202,0.874,0.61,0.874c0.185,0,0.34-0.02,0.465-0.049l0.029,0.796
c-0.203,0.078-0.475,0.117-0.813,0.117c-0.826,0-1.32-0.456-1.32-1.65V9.503h-0.688V8.717h0.688V7.853l1.029-0.311v1.174h1.153
V9.503z"/>
<path fill="#FFFFFF" d="M115.486,13.433h-1.047v-2.688c0-0.844-0.319-1.271-0.951-1.271c-0.543,0-1.049,0.369-1.049,1.116v2.843
h-1.047v-6.88h1.047v2.833h0.021c0.33-0.514,0.808-0.767,1.418-0.767c0.998,0,1.608,0.776,1.608,2.009V13.433z"/>
<path fill="#FFFFFF" d="M121.17,11.327h-3.145c0.02,0.893,0.611,1.397,1.486,1.397c0.465,0,0.893-0.078,1.271-0.223l0.163,0.728
c-0.446,0.194-0.971,0.291-1.582,0.291c-1.475,0-2.348-0.932-2.348-2.377c0-1.446,0.894-2.533,2.23-2.533
c1.205,0,1.961,0.893,1.961,2.242C121.209,11.036,121.2,11.201,121.17,11.327z M120.209,10.58c0-0.728-0.367-1.242-1.037-1.242
c-0.602,0-1.078,0.524-1.146,1.242H120.209z"/>
</g>
</g>
</g>
</svg>
</div>
</a>
<div id="intro-center" data-bind="css: { visible: showIntro }">
<img class="logo" src="img/silk_text.png" width="250" height="250" />
</div>
<div id="intro-draw-something" data-bind="css: { visible: showIntro }">
<!-- <div id="instructions">Draw something.</div> -->
<img class="draw-something" src="img/draw_something.png" width="250" height="29" />
</div>
<div id="intro-mute-option" data-bind="css: { visible: false }">
<em>Note</em> &mdash; Silk has sound.
<a href="#" data-bind="visible: muted, click: toggleMute">Muted</a><span data-bind="visible: muted">.</span>
<a href="#" data-bind="visible: notMuted, click: toggleMute">Mute?</a>
</div>
<div id="tips">
<div class="tip">Press <b>Space</b> to start anew.</div>
<div class="tip">Press <b>Z</b> to undo.</div>
<!-- <div class="tip"><i class="icon-undo"></i> lets you travel back in time.</div> -->
<!-- <div class="tip"><i class="icon-circle"></i> unlocks colors and symmetries.</div> -->
<div class="magic tip">Try different colors and symmetries.</div>
<div class="tip">Sally forth, you weaver of wonder, sower of silken waves.</div>
</div>
<audio id="bg-music" preload="auto" loop="true" >
<source src="http://yurivish.com/Silk%20Static/Silkura%20-May%2002%20-loop.m4a" type='audio/mp4; codecs="mp4a.40.5"'/>
<source src="http://yurivish.com/Silk%20Static/Silkura%20-May%2002%20-loop.ogg" type='audio/ogg; codecs="vorbis'/>
</audio>
<audio id="bg-music-intro" preload="auto">
<source src="http://yurivish.com/Silk%20Static/Startup%201%2016-44.m4a" type='audio/mp4; codecs="mp4a.40.5"'/>
<source src="http://yurivish.com/Silk%20Static/Startup%201%2016-44.ogg" type='audio/ogg; codecs="vorbis'/>
</audio>
</body>
</html>
View Git Blame Copy Permalink