Kontribuutiokuulat

kontribuutiokuulat.js

(function () {
  const svg = document.querySelector(".js-calendar-graph-svg");
  let filter = svg.querySelector("#qla");
  if (!filter) {
    filter = document.createElement("filter");
    filter.id = "qla";
    svg.appendChild(filter);
  }
  filter.outerHTML = `<filter id="qla" primitiveUnits="objectBoundingBox">
  <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
  <feDisplacementMap in2="turbulence" in="SourceGraphic" scale=".15" xChannelSelector="R" yChannelSelector="G" result="disOut"/>
  <feSpecularLighting result="specOut" specularExponent="35" surfaceScale="1" lighting-color="#ffffff">
    <fePointLight x="-2.5" y="-2" z="3"/>
  </feSpecularLighting>
  <feComposite in="disOut" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>`;

  [...svg.querySelectorAll("rect.ContributionCalendar-day")].forEach((r) => {
    r.style.outline = "none";
    r.style.filter = "url(#qla)";
    r.setAttribute("rx", 10);
    r.setAttribute("ry", 10);
  });
})();