marksumoto

<div class="swappy-radios" role="radiogroup" aria-labelledby="swappy-radios-label">
  <h3 id="swappy-radios-label">Select an option</h3>
  <label>
    <input type="radio" name="options" checked /><span class="radio"></span>
    <span>First option</span>
  </label>
  <label>
    <input type="radio" name="options" /><span class="radio"></span>
    <span>Second option</span>
  </label>

marksumoto

High Res Coin Toss

A high resolution coin toss app. Forces three.js to double the canvas element size before compression to create photorealistic pennies at standard browser zoom levels. Physics handled with physi.js.

A Pen by Matthew Main on CodePen.

License.

marksumoto

Checkbox Rocker Toggle Switch

An HTML checkbox form element styled as a rocker toggle switch.

A Pen by Marcus Connor on CodePen.

License.

marksumoto

  <script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/jquery-min.js?15684938142982497657"></script>
  
<script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/breakpoints-min.js?15684938142982497657?v=1.2"></script>
  <script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/plugins-min.js?15684938142982497657?v=1.2"></script>

  <script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/scripts-min.js?15684938142982497657?v=1.2"></script>
  <!-- Liquid Shop JS -->


<div class='divider'></div>

marksumoto

3D rainbow hypnosis dance

Dancing of colored hypnotic lines with pure css

© Misha Tsankashvili

A Pen by Misha Tsankashvili on CodePen.

License.

marksumoto

 <div class="📺">
  <div class="🍌"></div>
  <div class="🍦"></div>
  <div class="🍇"></div>
  <button class="🆗"></button>
</div>

marksumoto

  <div id="app">
    <h1>Understanding Modulo (remainder of division)</h1>
    <div id="input">
      <input type="number" v-model.number="l" max="999" min="-999" v-on:input="calc()"> %
      <input type="number" v-model.number="r" max="999" min="-999" v-on:input="calc()"> is <span class="modulo">{{m}}</span>, because...
    </div>
    <section>
      <span v-if="m!=0">If you have {{l}} coins, <br>
        and want to buy items that cost {{r}} coins each,<br>
        you could only buy {{wholes}} item<span v-if="wholes>1">s</span>,<br>

marksumoto

<div>
	<svg width="150px" height="150px" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="sparkles">
	<path d="m55.301 8.3008h0.19922c0.5 0 0.89844-0.30078 1-0.80078l0.60156-3.3984c0.10156-0.5-0.30078-1.1016-0.80078-1.1992-0.5-0.10156-1.1016 0.30078-1.1992 0.80078l-0.60156 3.3984c-0.10156 0.59766 0.30078 1.0977 0.80078 1.1992z"></path>    
	<path d="m78.5 10.5c-0.39844-0.39844-1-0.39844-1.3984 0l-0.30078 0.30078-0.30078-0.30078c-0.39844-0.39844-1-0.39844-1.3984 0-0.39844 0.39844-0.39844 1 0 1.3984l0.30078 0.30078-0.30078 0.30078c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078s0.5-0.10156 0.69922-0.30078l0.30078-0.30078 0.30078 0.30078c0.19922 0.19922 0.5 0.30078 0.69922 0.30078s0.5-0.10156 0.69922-0.30078c0.39844-0.39844 0.39844-1 0-1.3984l-0.30078-0.30078 0.30078-0.30078c0.39844-0.39844 0.39844-1 0-1.3984z"></path>
	<path d="m76.602 26.699l-1.1992 1.1992c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078 0.19922 0 0.5-

marksumoto

<svg id="yetiSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 470">
	<linearGradient id="flashlightGrad" x1="126.5842" x2="90.5842" y1="176.5625" y2="213.5625" gradientUnits="userSpaceOnUse">
		<stop offset="0" stop-color="#333"/>
		<stop offset=".076" stop-color="#414141"/>
		<stop offset=".2213" stop-color="#555"/>
		<stop offset=".3651" stop-color="#626262"/>
		<stop offset=".5043" stop-color="#666"/>
		<stop offset=".6323" stop-color="#606060"/>
		<stop offset=".8063" stop-color="#4e4e4e"/>
		<stop offset="1" stop-color="#333"/>

marksumoto

CSS-Grid Gantt Chart

This is a small gantt chart with css-grid.

A Pen by Phil on CodePen.

License.