JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<h1>The Windmill Problem</h1>
<div class="name">
  Illustrated by me, <a href="https://joshuapullen.com/">Josh Pullen</a>, for my 3Blue1Brown internship application.
</div>

<div class="columns">
  <svg class="diagram" width="200" height="200" viewBox="0 0 100 100">
    <g fill="white">
      <circle cx="20" cy="50" r="4" />
      <circle cx="80" cy="20" r="4" />
      <circle cx="60" cy="70" r="4" />
    </g>
  </svg>
  <p class="text">Let <strong>S</strong> be a finite set of at least two points in the plane.</p>

  <svg class="diagram" width="200" height="200" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="rgb(55,0,0)"/>
    <g fill="white">
      <circle cx="30" cy="70" r="4" />
      <circle cx="50" cy="50" r="4" />
      <circle cx="70" cy="30" r="4" />
    </g>
    <g stroke="rgb(240,13,14)" stroke-width="6">
      <path d="M64,64L85.999,85.999" />
      <path d="M85.999,64L64,85.999" />
    </g>
  </svg>
  <p class="text">Assume that no three points of <strong>S</strong> are colinear.</p>

  <svg class="diagram" width="200" height="200" viewBox="0 0 100 100">
    <path d="M120,50L0,90" stroke="white" stroke-opacity="0.4" stroke-width="2" />
    <g fill="white">
      <circle cx="20" cy="50" r="4" />
      <circle cx="80" cy="20" r="4" />
      <circle cx="60" cy="70" r="4" fill="#1c74ff" />
    </g>
  </svg>
  <p class="text">A <em>windmill</em> is a process that starts with a line ℓ going through a single point <strong style="color: blue;">P</strong> ∈ <strong>S</strong>.</p>

  <svg class="diagram" width="200" height="200" viewBox="0 0 100 100">
    <path d="M120,50L0,90" stroke="white" stroke-opacity="0.4" stroke-width="2" />
    <path d="M100,90L0,40" stroke="white" stroke-opacity="0.4" stroke-width="2" stroke-dasharray="3,4,0,0" />
    <g fill="white">
      <circle cx="20" cy="50" r="4" />
      <circle cx="80" cy="20" r="4" />
      <circle cx="60" cy="70" r="4" fill="#1c74ff" />
    </g>
    <g fill="yellow">
     ...

CSS

body {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px;
  
  font-size: 1.2rem;
}

.name {
  margin-bottom: 2em;
  color: #666;
}

.columns {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 25px;
}

.diagram {
  width: 200px;
  height: 200px;
  background: black;
  border-radius: 4px;
}

.text {
  margin: 0;
}

footer {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
}
footer img {
  width: 180px;
  margin-right: -20px;
}

@media (max-width: 500px) {
  .columns {
    grid-template-columns: 1fr;
  }
  .diagram {
    margin: 0 auto;
  }
  .text {
    text-align: center;
  }
}