<div class="product-illustration" style="--illustration-color: #215cca;">
  <!-- <use "/socks.svg#illustration"></use> -->

  <!-- 
    Normally I'd include this illustration as an external file imported with a `<use>` tag. 

    I ran into CORS issues doing this with Codepen, so the SVG is inlined. 

    Apologies for the giant SVG code. 
  -->

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 500 500">
    <g id="illustration">
      <g id="sock-1">
        <defs>
          <path id="sock-1-outline"
            d="M160 55.6s-2.7-18.5 0-20.7c0 0 29.3-1.1 38 0s41.3-1.1 44-2.7c2.7-1.6 9.8-2.7 9.8 0s-.5 18.5 0 23.4c.5 4.9 5.4 122.3 0 148.9-5.4 26.6 9.2 57.6 9.2 57.6s115.8 156 57.6 177.7c-58.2 21.7-106.5-75.5-106.5-75.5s-24.5-52.2-31-57.6c-6.5-5.4-33.7-19.6-22.3-65.2S160 55.6 160 55.6z" />
        </defs>
        <clipPath id="sock-1-clip">
          <use xlink:href="#sock-1-outline" overflow="visible" />
        </clipPath>
        <path
          d="M150.2 60.5s-2.7-18.5 0-20.7c0 0 .3-.3 9.5-4.6 6-2.8 25.2 4.2 28.5 4.6 8.7 1.1 41.3-1.1 44-2.7 2.7-1.6 9.8-2.7 9.8 0s-.5 18.5 0 23.4c.5 4.9 5.4 122.3 0 148.9s9.2 57.6 9.2 57.6 85.7 118.1 76.9 166c0 0-10.1 8.2-19.3 11.7-58.2 21.7-106.5-75.5-106.5-75.5s-24.5-52.2-31-57.6-33.7-19.6-22.3-65.2 1.2-185.9 1.2-185.9z"
          opacity="0.3" />
        <path
          d="M160 55.6s-2.7-18.5 0-20.7c0 0 29.3-1.1 38 0s41.3-1.1 44-2.7c2.7-1.6 9.8-2.7 9.8 0s-.5 18.5 0 23.4c.5 4.9 5.4 122.3 0 148.9-5.4 26.6 9.2 57.6 9.2 57.6s115.8 156 57.6 177.7c-58.2 21.7-106.5-75.5-106.5-75.5s-24.5-52.2-31-57.6c-6.5-5.4-33.7-19.6-22.3-65.2S160 55.6 160 55.6z"
          fill="var(--illustration-color)" />
        <g style="clip-path:url(#sock-1-clip)">
          <path id="tl1" fill="none" stroke="#fff" stroke-width="0.5" stroke-miterlimit="10"
            stroke-dasharray="1.8524, 1.8524" opacity="0.25" d="M106.2 37l251 .2" />
          <use xlink:href="#tl1" y="7" />
          <use xlink:href="#tl1" y="12" />
          <use xlink:href="#tl1" y="17" />
          <use xlink:href="#tl1" y="22" />
          <use xlink:href="#tl1" y="27" />
          <use xlink:href="#tl1" y="32" />
          <use xlink:href="#tl1" y="37" />
          <use xlink:href="#tl1" y="42" />
          <use xlink:href="#tl1" y="47" />
          <use xlink:href="#tl1" y="52" />
          <use xlink:href="#tl1" y="57" />
          <use xlink:href="#tl1" y="62" />
          <use xlink:href="#tl1" y="67" />
          <use xlink:href="#tl1" y="72" />
          <use xlink:href="#tl1" y="77" />
          <use xlink:href="#tl1" y="82" />
          <use xlink:href="#tl1" y="87" />
          <use xlink:href="#tl1" y="92" />
          <use xlink:href="#tl1" y="97" />
          <use xlink:href="#tl1" y="102" />
          <use xlink:href="#tl1" y="107" />
          <use xlink:href="#tl1" y="112" />
          <use xlink:href="#tl1" y="117" />
          <use xlink:href="#tl1" y="122" />
          <use xlink:href="#tl1" y="127" />
          <use xlink:href="#tl1" y="132" />
          <use xlink:href="#tl1" y="137" />
          <use xlink:href="#tl1" y="142" />
          <use xlink:href="#tl1" y="147" />
          <use xlink:href="#tl1" y="152" />
          <use xlink:href="#tl1" y="157" />
          <use xlink:href="#tl1" y="162" />
          <use xlink:href="#tl1" y="167" />
          <use xlink:href="#tl1" y="172" />
          <use xlink:href="#tl1" y="177" />
          <use xlink:href="#tl1" y="182" />
          <use xlink:href="#tl1" y="187" />
          <use xlink:href="#tl1" y="192" />
          <use xlink:href="#tl1" y="197" />
          <use xlink:href="#tl1" y="202" />
          <use xlink:href="#tl1" y="207" />
          <use xlink:href="#tl1" y="212" />
          <use xlink:href="#tl1" y="217" />
          <use xlink:href="#tl1" y="222" />
          <use xlink:href="#tl1" y="227" />
          <use xlink:href="#tl1" y="232" />
          <use xlink:href="#tl1" y="237" />
          <use xlink:href="#tl1" y="242" />
          <use xlink:href="#tl1" y="247" />
          <use xlink:href="#tl1" y="252" />
          <use xlink:href="#tl1" y="257" />
          <use xlink:href="#tl1" y="262" />
          <use xlink:href="#tl1" y="267" />
          <use xlink:href="#tl1" y="272" />
          <use xlink:href="#tl1" y="277" />
          <use xlink:href="#tl1" y="282" />
          <use xlink:href="#tl1" y="287" />
          <use xlink:href="#tl1" y="292" />
          <use xlink:href="#tl1" y="297" />
          <use xlink:href="#tl1" y="302" />
          <use xlink:href="#tl1" y="307" />
          <use xlink:href="#tl1" y="312" />
          <use xlink:href="#tl1" y="317" />
          <use xlink:href="#tl1" y="322" />
          <use xlink:href="#tl1" y="327" />
          <use xlink:href="#tl1" y="332" />
          <use xlink:href="#tl1" y="337" />
          <use xlink:href="#tl1" y="342" />
          <use xlink:href="#tl1" y="347" />
          <use xlink:href="#tl1" y="352" />
          <use xlink:href="#tl1" y="357" />
          <use xlink:href="#tl1" y="362" />
          <use xlink:href="#tl1" y="367" />
          <use xlink:href="#tl1" y="372" />
          <use xlink:href="#tl1" y="377" />
          <use xlink:href="#tl1" y="382" />
          <use xlink:href="#tl1" y="387" />
          <use xlink:href="#tl1" y="392" />
          <use xlink:href="#tl1" y="397" />
          <use xlink:href="#tl1" y="402" />
          <use xlink:href="#tl1" y="407" />
          <use xlink:href="#tl1" y="412" />
          <use xlink:href="#tl1" y="417" />
        </g>
        <g style="clip-path:url(#sock-1-clip)">
          <path style="fill:#ffffff;opacity:0.95"
            d="M188.8 84.9c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.3-13.2.6-13.9.4zM238.8 78.8c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M209.5 61c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7 0-.5-.4-.8-.8-.8zM153 155.6c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.2-13.2.5-13.9.4zM203 149.5c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M173.6 131.7c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7 0-.5-.3-.8-.8-.8zM248.6 125.2c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.2-13.2.5-13.9.4zM298.6 119c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M269.3 101.2c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7 0-.4-.4-.8-.8-.8zM214.4 201.3c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.2-13.2.5-13.9.4zM264.4 195.1c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M235.1 177.3c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7-.1-.4-.4-.8-.8-.8zM143.7 252.9c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.2-13.2.5-13.9.4zM193.7 246.7c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-1.9 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M164.4 228.9c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7 0-.4-.4-.7-.8-.8zM229 277.3c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.3-13.1.6-13.9.4zM279 271.2c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.7-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M249.7 253.4c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7 0-.5-.3-.8-.8-.8zM213.8 348c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.2-13.2.5-13.9.4zM263.8 341.9c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M234.5 324.1c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7 0-.5-.4-.8-.8-.8zM283.4 394.2c-2.6-1.5-4.5-3.8-5.5-6.6.2-1.1.7-2.1 1.5-2.9 1.4-1.6 17.6-19.2 24.5-22.2-1.8-.3-3.6-.5-5.4-.5-20.3 0-22.2 14.5-22.2 14.5s-12.3 3.8-12.3 15c0 16.1 19.8 16.9 19.8 16.9 2.1.1 4.2 0 6.3-.2 1.1-.2 2.1-1 2.6-2.1 1.2-2.9 2.9-7.5 4.6-12.3-6.8.2-13.2.5-13.9.4zM333.4 388.1c0-14.2-13.9-15.8-13.9-15.8-1.5-2.6-3.6-4.8-6.2-6.4-1.2 4.4-4.5 16.3-4.6 18.5h4.9s.8 0 .6 1c-.5 2.2-1.7 7.5-4.3 7.7l-3.4.2c-1 3.9-2 8-2.7 11 2.5 1.8 5.6 2.8 8.7 2.6 3.6.2 7.1-1.1 9.7-3.6 11.6-2 11.2-15.2 11.2-15.2z" />
          <path style="fill:#ffffff;opacity:0.95"
            d="M304.1 370.3c-5.2 4.5-10.1 9.5-14.5 14.9l10.5-.4c2.1-6 4-11.4 4.8-13.7-.1-.5-.4-.8-.8-.8z" />
        </g>
      </g>
      <use xlink:href="#sock-1" x="45" y="2" />
    </g>
  </svg>
</div>

<div class="swatches">
  <div class="swatch">
    <input
      type="radio"
      id="Blue"
      name="colors"
      value="#215cca"
      style="background: #215cca;"
      checked
    />
    <label for="Blue">Blue</label>
  </div>

  <div class="swatch">
    <input
      type="radio"
      id="Green"
      name="colors"
      value="#158466"
      style="background: #158466;"
    />
    <label for="Green">Green</label>
  </div>

  <div class="swatch">
    <input
      type="radio"
      id="Pink"
      name="colors"
      value="#d9118f"
      style="background: #d9118f;"
    />
    <label for="Pink">Pink</label>
  </div>

  <div class="swatch">
    <input
      type="radio"
      id="Orange"
      name="colors"
      value="#f27041"
      style="background: #f27041;"
    />
    <label for="Orange">Orange</label>
  </div>

  <div class="swatch">
    <input
      type="radio"
      id="Grey"
      name="colors"
      value="#485968"
      style="background: #485968;"
    />
    <label for="Grey">Grey</label>
  </div>
</div>

<p>Pick a color for your socks.</p>

.product-illustration {
  --base-filters: saturate(300%) brightness(120%) opacity(25%);
  background: #fff;
  position: relative;
  height: 30em;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 1em;
}

.product-illustration::before {
  content: "";
  background: var(--illustration-color);
  opacity: 0.3;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

svg {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}


/* The following CSS is unrelated to the demo */

html, body {
  margin: 0;
}

input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  border-radius: 0.25em;
  border: 0.125em solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: inherit;
  margin: 0;
  margin-right: 0.5em;
  position: relative;
  width: 3.8em;
  height: 3em;
  text-align: center;
  transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

input:focus-visible {
  box-shadow: 0 0 0 0.5em #8abfff;
}

input:hover {
  filter: brightness(110%);
  transform: scale(1.05);
}

input:active {
  filter: brightness(80%);
  transform: scale(0.95);
}

input::after {
  content: "";
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke='white'%3E %3Cpolyline points='2.67 12 8.6 19 21.33 5' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E %3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: absolute;
  bottom: 0.5em;
  top: 0.5em;
  left: 0.5em;
  right: 0.5em;
}

input:checked::after {
  opacity: 1;
  transform: scale(1);
}

/* sr-only class */
label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.swatches {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

p {
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.25em;
  margin-top: 0.5em;
}

[...document.querySelectorAll('input')].forEach(input => {
  input.addEventListener('change', (e) => {
    document.querySelector('.product-illustration').style.setProperty('--illustration-color', e.target.value);
  })
})