Interactive Generative Art - Silk Canvas

Open In Editor Video Publish Your Code

<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>

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>Silk – Interactive Generative Art</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 }">
  
  
  <a class="email-me" href="mailto:yurivish@gmail.com">Send Feedback</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.js#xfbml=1&appId=408271179236250";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

<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>
              
            </a>

<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlTwitter }">
              <span class="text"><i class="ss-twitter"></i></span>
              
            </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>

<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="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>

</svg>
        <div class="label" style="text-align: center;">Drag colors to blend.</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>

<div class="social" data-bind="css: { visible: notPristine }">
          <div class="fb-like" data-href="https://www.facebook.com/pages/Silk/135022713223750?ref=ts&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>

</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>
  
  <a href="http://goo.gl/oIIuif" id="appstore-badge">
    <div id="announcement" style='pointer-events: none;' data-bind="css: { visible: showBigAnnouncement }">
      <style>
        .callme {
          opacity: 0;
          transition: opacity 0.7s ease-in-out;
        }

.callme.visible {
          opacity: 0.75;
        }
      </style>
      <div class="callme" data-bind="css: { visible: showBigAnnouncement }" style="font-family: sans-serif;color: #b5a2cf;width: 135px;margin-left: 10px;font-size: 13px; text-shadow: 0 0 2px #000, 0 0 10px #000, 0 0 5px #000; background: rgba(0,0,0,1); padding: 10px;">
        <template shadowrootmode="open">
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          ✨ I’m working on a new Silk. Is there anything you'd like to see? <a style="color: white; pointer-events: all; padding: 5px 2px; text-decoration: underline;" href="https://forms.gle/Ss9xLHPbcvs25RzQ6">click here</a><br>
          <br>Double-click the <b style="color: #ffede0;">?</b> (top right) to remove this message.
        </template>
      </div>

</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 }">
    
    <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> — 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="magic tip">Try different colors and symmetries.</div>
    <div class="tip">Sally forth, you weaver of wonder, sower of silken waves.</div>
  </div>

</html>

Interactive Generative Art - Silk Canvas

Recommended

HTML Admin Dashboard Template with CSS & Charts

Space Bar Click Counter - JavaScript HTML

A Code by Maxi-Digital, une page 404 sophistiquée avec une bougie animée réaliste

HTML

CSS

JS

Recommended

HTML Admin Dashboard Template with CSS & Charts

Space Bar Click Counter - JavaScript HTML

A Code by Maxi-Digital, une page 404 sophistiquée avec une bougie animée réaliste

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS