Skip to content

Instantly share code, notes, and snippets.

View mattdanielbrown's full-sized avatar

Matt Daniel Brown mattdanielbrown

30 followers · 151 following
View GitHub Profile
@mattdanielbrown
mattdanielbrown / index.html
Created February 24, 2023 04:30
<meta name="theme-color">
<div>
<label for="color">&lt;meta name="theme-color" content="<span class="preview"></span>"&gt;</label>
<input id="color" type="color" value="#6224b5">
</div>
@mattdanielbrown
mattdanielbrown / index.html
Created February 13, 2023 04:11
Shuffle Icons
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<rect id="bg" width="800" height="600" fill="#b3b3b3"/>
<g class="icon" id="camera">
<rect x="255" y="275" width="50" height="50" rx="25" ry="25" fill="#fff"/>
<path d="M288.5,294.7h-3.2a.61.61,0,0,1-.46-.28l-.68-1.86a1.59,1.59,0,0,0-1.5-1.06h-6.32a1.59,1.59,0,0,0-1.5,1.06l-.67,1.84a.56.56,0,0,1-.47.3h-3.2a1,1,0,0,0-1,1V306.5a1,1,0,0,0,1,1h18a1,1,0,0,0,1-1V295.7A1,1,0,0,0,288.5,294.7Zm-9,8.8a3.6,3.6,0,1,1,3.6-3.6A3.6,3.6,0,0,1,279.5,303.5Z" fill="#b3b3b3"/>
</g>
<g class="icon" id="clip">
<rect x="315" y="275" width="50" height="50" rx="25" ry="25" fill="#fff"/>
<path d="M336,309.15a6.16,6.16,0,0,1-4.2-1.62l-.08-.07a5.46,5.46,0,0,1-.33-7.7l.33-.32,10.4-9.41a4.42,4.42,0,0,1,6,0,3.84,3.84,0,0,1,.07,5.77l-9.78,8.82a2.62,2.62,0,0,1-3.55,0,2.36,2.36,0,0,1-.15-3.33l.15-.16,9.14-8.19,1.08,1.21L336,302.31a.75.75,0,0,0-.24.54.73.73,0,0,0,.25.55,1,1,0,0,0,1.35,0l9.78-8.76a2.27,2.27,0,0,0,.15-3.
@mattdanielbrown
mattdanielbrown / html-kitchen-sink.markdown
Created February 13, 2023 04:02
HTML Kitchen-sink
@mattdanielbrown
mattdanielbrown / index.html
Created February 1, 2023 20:25
Three JS Data Globe
<div id="container"></div>
<script src="https://cdn.rawgit.com/dataarts/webgl-globe/2d24ba30/globe/third-party/three.min.js"></script>
<!-- <script src="https://cdn.rawgit.com/dataarts/webgl-globe/2d24ba30/globe/globe.js"></script> -->
@mattdanielbrown
mattdanielbrown / index.html
Created February 1, 2023 20:21
MediaPipe - Hands
<body>
<style>
.square-box {
width: 33%;
height: 0;
padding-top: 33%;
position: absolute;
right: 20px;
top: 20px;
}
@mattdanielbrown
mattdanielbrown / 9-button-types-unified-modern-style-visual-differences-reinforce-purpose.markdown
Created February 1, 2023 15:47
9 button types Unified modern style, visual differences reinforce purpose.
@mattdanielbrown
mattdanielbrown / index.html
Created January 27, 2023 03:08
Simple folder prototype
<button class="back">
<i class="mdi mdi-arrow-left"></i>
</button>
<div class="stage">
<div class="folder-wrap level-current scrolling">
<div class="tile folder">
@mattdanielbrown
mattdanielbrown / fallback-system-fontstacks.css
Created January 26, 2023 23:56
CSS Fallback / System fontstacks (extended)
/**
* Use the default user interface font in all browsers (opinionated).
*/
html {
font-family:
system-ui,
/* macOS 10.11-10.12 */ -apple-system,
/* Windows 6+ */ "Segoe UI",
/* Android 4+ */ "Roboto",
@mattdanielbrown
mattdanielbrown / index.html
Created January 24, 2023 00:51
Speech Recognition using Tensorflow.js 2
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://unpkg.com/@tensorflow-models/speech-commands"></script>
</head>
<body>
<div class="demo">
Please enable the microphone checkbox and authorize this site to access the microphone.
<br />
Once the process finished loading speak one of the word bellow and see the magic happen.
@mattdanielbrown
mattdanielbrown / index.html
Created January 24, 2023 00:49
Speech Recognition using Tensorflow.js
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://unpkg.com/@tensorflow-models/speech-commands"></script>
<style type="text/css">
.hidden {
display: none;
}