Used to combine multiple conditions and return a Boolean result — True or False.
They help your program make decisions based on more than one condition.
Operator | What It Does | Example |
|---|---|---|
| Returns |
|
| Returns |
|
| Reverses the result. |
|
and Logical AND
x = 5
x > 3 and x < 10 # Output: Trueor Logical OR
x = 5
x > 10 or x < 10 # Output: Truenot Logical NOT
x = 5
not (x > 3) # Output: False<div class="infographic-pylogic">
<style>
.infographic-pylogic {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--true-c: #1f9d55;
--true-soft: #e3f6ea;
--false-c: #c0392b;
--false-soft: #fbe9e7;
--mono-font: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', system-ui, sans-serif;
box-sizing: border-box;
max-width: 880px;
margin: 0 auto;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-pylogic[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
--true-c: #6fdc8c;
--true-soft: #1c3324;
--false-c: #e57373;
--false-soft: #3a2222;
}
.infographic-pylogic *, .infographic-pylogic *::before, .infographic-pylogic *::after { box-sizing: border-box; }
.infographic-pylogic .lg-wrap { padding: 0 clamp(1rem, 4vw, 2rem) 1.5rem; }
.infographic-pylogic h1 {
font-family: var(--display-font); font-weight: 600;
font-size: clamp(1.6rem, 5vw, 2.2rem); text-align: center; margin: 1.5rem 0 0.25rem; letter-spacing: -0.01em;
}
.infographic-pylogic .lg-sub { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 1.4rem; }
.infographic-pylogic .lg-op-row { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.2rem; }
.infographic-pylogic .lg-op-btn {
font: inherit; font-family: var(--mono-font); font-size: 0.85rem; font-weight: 700;
background: var(--paper-alt); border: 1.5px solid var(--line); color: var(--ink-soft);
padding: 0.5rem 1.1rem; cursor: pointer; border-radius: 5px;
}
.infographic-pylogic .lg-op-btn.is-selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.infographic-pylogic .lg-x-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.infographic-pylogic .lg-x-row span { font-family: var(--mono-font); font-size: 0.9rem; color: var(--ink-soft); }
.infographic-pylogic .lg-x-input {
width: 80px; font-family: var(--mono-font); font-size: 1.05rem; text-align: center;
padding: 0.4rem 0.3rem; border: 1.5px solid var(--line); background: var(--paper-alt); color: var(--ink);
border-radius: 5px;
}
.infographic-pylogic .lg-x-input:focus { outline: none; border-color: var(--accent); }
.infographic-pylogic .lg-conditions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.infographic-pylogic .lg-cond {
display: flex; align-items: center; gap: 0.35rem; background: var(--paper-alt); border: 1px solid var(--line);
padding: 0.5rem 0.6rem; border-radius: 6px;
}
.infographic-pylogic .lg-cond-label {
font-family: var(--display-font); font-size: 0.95rem; color: var(--accent);
width: 20px; height: 20px; border: 1.5px solid var(--accent); border-radius: 50%;
display: flex; align-items: center; justify-content: center; flex: none;
}
.infographic-pylogic .lg-cond select, .infographic-pylogic .lg-cond input {
font: inherit; font-family: var(--mono-font); font-size: 0.85rem;
border: 1px solid var(--line); background: var(--paper); color: var(--ink);
border-radius: 4px; padding: 0.25rem 0.35rem;
}
.infographic-pylogic .lg-cond input { width: 56px; text-align: center; }
.infographic-pylogic .lg-cond select:focus, .infographic-pylogic .lg-cond input:focus { outline: none; border-color: var(--accent); }
.infographic-pylogic .lg-cond.is-hidden { display: none; }
.infographic-pylogic .lg-cond-truth { font-family: var(--mono-font); font-size: 0.72rem; font-weight: 700; margin-left: 0.15rem; }
.infographic-pylogic .lg-cond-truth.t-true { color: var(--true-c); }
.infographic-pylogic .lg-cond-truth.t-false { color: var(--false-c); }
/* venn diagram */
.infographic-pylogic .lg-venn-box { display: flex; justify-content: center; margin-bottom: 1rem; }
.infographic-pylogic .lg-venn-box svg { width: 220px; height: 150px; }
.infographic-pylogic .venn-circle { stroke: var(--accent); stroke-width: 2; fill: var(--accent); fill-opacity: 0; transition: fill-opacity 0.3s; }
.infographic-pylogic .venn-circle.is-true { fill-opacity: 0.35; }
.infographic-pylogic .venn-label { font-family: var(--display-font); font-size: 15px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.infographic-pylogic .venn-rect { fill: var(--accent); fill-opacity: 0; stroke: var(--line); stroke-width: 1.5; transition: fill-opacity 0.3s; }
.infographic-pylogic .venn-rect.is-true { fill-opacity: 0.35; }
.infographic-pylogic .venn-hole { fill: var(--paper); transition: fill 0.3s; }
.infographic-pylogic .lg-equation {
text-align: center; font-family: var(--mono-font); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.9rem;
}
.infographic-pylogic .lg-result-row { display: flex; justify-content: center; margin-bottom: 0.3rem; }
.infographic-pylogic .lg-result-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--display-font); font-size: 1.6rem; font-weight: 600;
padding: 0.5rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.infographic-pylogic .lg-result-badge.is-true { background: var(--true-soft); color: var(--true-c); border-color: var(--true-c); }
.infographic-pylogic .lg-result-badge.is-false { background: var(--false-soft); color: var(--false-c); border-color: var(--false-c); }
.infographic-pylogic .lg-result-badge .badge-icon { width: 22px; height: 22px; }
.infographic-pylogic .lg-result-badge.is-pulsing { animation: lg-pop 0.3s ease; }
@keyframes lg-pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.infographic-pylogic .lg-caption { text-align: center; font-size: 0.8rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
.infographic-pylogic *, .infographic-pylogic *::before, .infographic-pylogic *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="lg-wrap">
<h1>Logical Operators</h1>
<p class="lg-sub">Combine two conditions on x. Watch the circles fill in.</p>
<div class="lg-op-row">
<button class="lg-op-btn is-selected" data-op="and">and</button>
<button class="lg-op-btn" data-op="or">or</button>
<button class="lg-op-btn" data-op="not">not</button>
</div>
<div class="lg-x-row">
<span>x =</span>
<input class="lg-x-input" id="lgX" type="text" value="5" inputmode="decimal" />
</div>
<div class="lg-conditions">
<div class="lg-cond" id="lgCondA">
<span class="lg-cond-label">A</span>
<span style="font-family:var(--mono-font); font-size:0.85rem; color:var(--ink-soft);">x</span>
<select id="lgOpA">
<option value="gt">></option>
<option value="lt"><</option>
<option value="gte">>=</option>
<option value="lte"><=</option>
<option value="eq">==</option>
<option value="neq">!=</option>
</select>
<input id="lgValA" type="text" value="3" inputmode="decimal" />
<span class="lg-cond-truth" id="lgTruthA"></span>
</div>
<div class="lg-cond" id="lgCondB">
<span class="lg-cond-label">B</span>
<span style="font-family:var(--mono-font); font-size:0.85rem; color:var(--ink-soft);">x</span>
<select id="lgOpB">
<option value="gt">></option>
<option value="lt" selected><</option>
<option value="gte">>=</option>
<option value="lte"><=</option>
<option value="eq">==</option>
<option value="neq">!=</option>
</select>
<input id="lgValB" type="text" value="10" inputmode="decimal" />
<span class="lg-cond-truth" id="lgTruthB"></span>
</div>
</div>
<div class="lg-venn-box">
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="lgNotMask">
<rect x="0" y="0" width="220" height="150" fill="white"/>
<circle cx="110" cy="75" r="52" fill="black"/>
</mask>
</defs>
<!-- AND / OR mode: two circles -->
<g id="lgTwoCircleGroup">
<circle class="venn-circle" id="lgCircleA" cx="85" cy="75" r="52"/>
<circle class="venn-circle" id="lgCircleB" cx="135" cy="75" r="52"/>
<text class="venn-label" x="60" y="45">A</text>
<text class="venn-label" x="160" y="45">B</text>
</g>
<!-- NOT mode: universe rect with a hole for A -->
<g id="lgNotGroup" style="display:none;">
<rect class="venn-rect" id="lgNotOutside" x="6" y="6" width="208" height="138" rx="6" mask="url(#lgNotMask)"/>
<circle cx="110" cy="75" r="52" id="lgNotCircle" class="venn-circle"/>
<text class="venn-label" x="110" y="80">A</text>
</g>
</svg>
</div>
<div class="lg-equation" id="lgEquation">x > 3 and x < 10</div>
<div class="lg-result-row">
<div class="lg-result-badge is-true" id="lgBadge">
<svg class="badge-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" id="lgIcon"><polyline points="4,13 9,18 20,6"/></svg>
<span id="lgResultText">True</span>
</div>
</div>
<p class="lg-caption" id="lgCaption"></p>
</div>
<script>
(function () {
var root = document.currentScript.closest('.infographic-pylogic')
|| document.querySelector('.infographic-pylogic');
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') { dark = true; }
else if (bodyAttr === 'false') { dark = false; }
else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) root.setAttribute('data-theme', 'dark');
var opBtns = root.querySelectorAll('.lg-op-btn');
var xInput = root.querySelector('#lgX');
var condA = root.querySelector('#lgCondA');
var condB = root.querySelector('#lgCondB');
var opA = root.querySelector('#lgOpA');
var opB = root.querySelector('#lgOpB');
var valA = root.querySelector('#lgValA');
var valB = root.querySelector('#lgValB');
var truthA = root.querySelector('#lgTruthA');
var truthB = root.querySelector('#lgTruthB');
var twoCircleGroup = root.querySelector('#lgTwoCircleGroup');
var notGroup = root.querySelector('#lgNotGroup');
var circleA = root.querySelector('#lgCircleA');
var circleB = root.querySelector('#lgCircleB');
var notOutside = root.querySelector('#lgNotOutside');
var notCircle = root.querySelector('#lgNotCircle');
var equationEl = root.querySelector('#lgEquation');
var badge = root.querySelector('#lgBadge');
var resultText = root.querySelector('#lgResultText');
var icon = root.querySelector('#lgIcon');
var caption = root.querySelector('#lgCaption');
var currentLogicOp = 'and';
var compSyms = { gt: '>', lt: '<', gte: '>=', lte: '<=', eq: '==', neq: '!=' };
var checkIcon = '<polyline points="4,13 9,18 20,6"/>';
var crossIcon = '<line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/>';
function evalCond(x, op, val) {
switch (op) {
case 'gt': return x > val;
case 'lt': return x < val;
case 'gte': return x >= val;
case 'lte': return x <= val;
case 'eq': return x === val;
case 'neq': return x !== val;
}
}
function setBadge(result) {
badge.classList.remove('is-true', 'is-false');
badge.classList.add(result ? 'is-true' : 'is-false');
resultText.textContent = result ? 'True' : 'False';
icon.innerHTML = result ? checkIcon : crossIcon;
badge.classList.remove('is-pulsing');
void badge.offsetWidth;
badge.classList.add('is-pulsing');
}
function recompute() {
var x = parseFloat(xInput.value);
var vA = parseFloat(valA.value);
var vB = parseFloat(valB.value);
var rawX = xInput.value.trim();
if (isNaN(x) || isNaN(vA) || (currentLogicOp !== 'not' && isNaN(vB))) {
equationEl.textContent = 'Enter valid numbers';
return;
}
var aResult = evalCond(x, opA.value, vA);
truthA.textContent = aResult ? 'True' : 'False';
truthA.className = 'lg-cond-truth ' + (aResult ? 't-true' : 't-false');
var condAText = 'x ' + compSyms[opA.value] + ' ' + valA.value.trim();
if (currentLogicOp === 'not') {
condB.classList.add('is-hidden');
twoCircleGroup.style.display = 'none';
notGroup.style.display = 'block';
var finalResult = !aResult;
notCircle.classList.toggle('is-true', aResult);
notOutside.classList.toggle('is-true', !aResult);
equationEl.textContent = 'not (' + condAText + ')';
setBadge(finalResult);
caption.textContent = aResult
? ('A is True, so not A is False.')
: ('A is False, so not A is True.');
return;
}
condB.classList.remove('is-hidden');
twoCircleGroup.style.display = 'block';
notGroup.style.display = 'none';
var bResult = evalCond(x, opB.value, vB);
truthB.textContent = bResult ? 'True' : 'False';
truthB.className = 'lg-cond-truth ' + (bResult ? 't-true' : 't-false');
var condBText = 'x ' + compSyms[opB.value] + ' ' + valB.value.trim();
circleA.classList.toggle('is-true', aResult);
circleB.classList.toggle('is-true', bResult);
var finalResult2 = currentLogicOp === 'and' ? (aResult && bResult) : (aResult || bResult);
equationEl.textContent = condAText + ' ' + currentLogicOp + ' ' + condBText;
setBadge(finalResult2);
if (currentLogicOp === 'and') {
caption.textContent = (aResult && bResult)
? 'Both A and B are True.'
: 'and needs both to be True — at least one is False.';
} else {
caption.textContent = (aResult || bResult)
? 'or only needs one to be True — and it is.'
: 'Neither A nor B is True.';
}
}
opBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
opBtns.forEach(function (b) { b.classList.toggle('is-selected', b === btn); });
currentLogicOp = btn.dataset.op;
recompute();
});
});
[xInput, opA, opB, valA, valB].forEach(function (el) {
el.addEventListener('input', recompute);
el.addEventListener('change', recompute);
});
recompute();
})();
</script>
</div>