tape halfsies artwork

[ryanve]

• Created on codepen in svg format
• Achievable in CSS via 2 period spans with different tape color classes .. like in tape/#vibe
• Gonna use SVG to convert to PNG for og:image

[ryanve]

svg fill via var

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 2400 2400">
  <title>tape rave</title>
  <rect x="0" y="0" width="1200" height="2400" fill="var(--tape-pink)" />
  <rect x="1200" y="0" width="1200" height="2400" fill="var(--tape-blue)" />
  <circle cx="1800" cy="1700" r="200" fill="var(--tape-black)" />
  <circle cx="600" cy="1700" r="200" fill="var(--tape-black)" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 2400 2400">
  <title>tape thrill</title>
  <rect x="0" y="0" width="1200" height="2400" fill="var(--tape-pink)" />
  <rect x="1200" y="0" width="1200" height="2400" fill="var(--tape-yellow)" />
  <circle cx="1800" cy="1700" r="200" fill="var(--tape-black)" />
  <circle cx="600" cy="1700" r="200" fill="var(--tape-black)" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 2400 2400">
  <title>tape chill</title>
  <rect x="0" y="0" width="1200" height="2400" fill="var(--tape-green)" />
  <rect x="1200" y="0" width="1200" height="2400" fill="var(--tape-blue)" />
  <circle cx="1800" cy="1700" r="200" fill="var(--tape-black)" />
  <circle cx="600" cy="1700" r="200" fill="var(--tape-black)" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 2400 2400">
  <title>tape woke</title>
  <rect x="0" y="0" width="1200" height="2400" fill="var(--tape-green)" />
  <rect x="1200" y="0" width="1200" height="2400" fill="var(--tape-yellow)" />
  <circle cx="1800" cy="1700" r="200" fill="var(--tape-black)" />
  <circle cx="600" cy="1700" r="200" fill="var(--tape-black)" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 2400 2400">
  <title>tape flow</title>
  <rect x="0" y="0" width="1200" height="2400" fill="var(--tape-blue)" />
  <rect x="1200" y="0" width="1200" height="2400" fill="var(--tape-yellow)" />
  <circle cx="1800" cy="1700" r="200" fill="var(--tape-black)" />
  <circle cx="600" cy="1700" r="200" fill="var(--tape-black)" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 2400 2400">
  <title>tape shred</title>
  <rect x="0" y="0" width="1200" height="2400" fill="var(--tape-pink)" />
  <rect x="1200" y="0" width="1200" height="2400" fill="var(--tape-green)" />
  <circle cx="1800" cy="1700" r="200" fill="var(--tape-black)" />
  <circle cx="600" cy="1700" r="200" fill="var(--tape-black)" />
</svg>