Your assignment, should you choose to accept it, is to copy code, and make it work, Soldier!
Just before 2025 got kicked to the kerb by our perception of dates and calendars, I concocted a Yin-Yang Spinner.
A simple HTML and JavaScript fidget toy.
The main premise was to have some fun and illustrate this essay: https://mattlr.com/2025/12/31/beyond-yin-yang-the-relational-reality-of-darkness-and-light/
So here’s what your assignment is: Copy the code at the very bottom of the post.
There’s no malware. It’s text
Nothing will infiltrate your computer or cause the universe to collapse.
Once you have the text, copy it into Notepad, save it as yinyang.html, and run it in your favorite browser.
You should see a similar graphic to the one I have on my post.
Code often brings me to think about verbal and visual communication.
Without the browser to interpret and run the code, it’s essentially worthless.
Yes, it does tell a story if you can read the language…
But, as humans, we can experience misfired communication or unsatisfying exchanges.
All because we don’t always have the tools, context, directed motivation, or the know-how, to interpret someone else’s code.
We all know those moments when we get an info snippet from someone, a sentence floating in a void.
Especially in a hastily churned-out online message.
No body language, no additional material supporting the sign, the words, or the intent.
And often we ask, or wonder, “What the hell did they mean.”
Context becomes the interpreter.
If you can’t manage to get the spinner to spin, it’s either a technical failure on your side or due to my inability to explain how to orchestrate the silly little experiment.
But it’s still relevant.
On our side, we encode so much stuff in our heads and then stand astonished, or even disappointed, when the recipient fails to understand.
Yes, it “does sound better in your head.”
Most communication failures are not caused by bad language.
They fail because the sender assumes the recipient already knows what to do with it.
So…
If you managed to get this thing operational, let me know. You’re in the trenches now, no turning back!
</pre>
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spinning Yin-Yang Symbol</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #333;
font-family: Arial, sans-serif;
color: #fff;
}
.yin-yang {
width: 200px;
height: 200px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 25%, black 5%, transparent 1%),
radial-gradient(circle at 50% 75%, white 5%, transparent 1%),
radial-gradient(circle at 50% 25%, white 27%, transparent 1%) 50% 0,
radial-gradient(circle at 50% 75%, black 27%, transparent 1%) 50% 100%,
linear-gradient(to right, white 50%, black 50%);
animation: rotate var(--duration, 5s) linear infinite;
margin-bottom: 20px;
}
@keyframes rotate {
to {
transform: rotate(var(--direction, 360deg));
}
}
.controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.speed-control {
display: flex;
align-items: center;
gap: 10px;
}
.direction-control {
display: flex;
align-items: center;
gap: 5px;
}
label {
font-weight: bold;
}
input[type="range"] {
width: 200px;
}
input[type="checkbox"] {
transform: scale(1.2);
}
</style>
</head>
<body>
<h3>
The Yin-Yang Spinner - Version 1.0 By
<a href="https://mattlr.com">mattlr.com</a>
</h3>
<div class="yin-yang"></div>
<div class="controls">
<div class="speed-control">
<label for="speed">Rotation Speed (Duration: <span id="duration">5</span>s):</label>
<input type="range" id="speed" min="0.5" max="20" value="5" step="0.5">
</div>
<div class="direction-control">
<input type="checkbox" id="reverse">
<label for="reverse">Reverse Direction</label>
</div>
</div>
<script>
const slider = document.getElementById('speed');
const durationSpan = document.getElementById('duration');
const yinYang = document.querySelector('.yin-yang');
const reverseCheckbox = document.getElementById('reverse');
slider.addEventListener('input', (e) => {
const value = e.target.value;
yinYang.style.setProperty('--duration', value + 's');
durationSpan.textContent = value;
});
reverseCheckbox.addEventListener('change', (e) => {
if (e.target.checked) {
yinYang.style.setProperty('--direction', '-360deg');
} else {
yinYang.style.setProperty('--direction', '360deg');
}
});
</script>
</body>
</html></pre>
<pre>
Discover more from MATTLR.COM
Subscribe to get the latest posts sent to your email.
I’ve accepted your challenge…..quick question though, what’s an alternative to Notes? I’m on an ancient Samsung with text copied but nowhere to paste. (Sorry if this is a stupid q with an obvious answer!)
That’s so cool, thanks. I might have to devise some form of participation trophy.
No worries, I’ve never subscribed to the idea that stupid questions exist.
You could try MS Word, though it sometimes adds hidden characters that don’t always play nice.
If you have an older Samsung and a Windows PC, just type “Notepad” into the search bar and use that.
For older computers, this might be useful 🙂 https://www.youtube.com/watch?v=UjkTF42k-5E
Your previous comment disappeared into the void. Not sure what happened… when I replied..But, you got it working 🔥🔥
I used to use HTML and Java, but it’s been a minute. This is great, thanks, Matt. Challenge accepted.
Way to go Niki 🏆