How to get count in raw text form, not the SVG

[byanko55]

I'd like get the raw counts and do something others in my JS code, using these numerical values . Is there any way to do so?

[cmwillett]

same

[pacoxu]

Something like

![xxx](https://img.shields.io/badge/dynamic/json?url=https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fpacoxu%2Fpacoxu)

I just want to change the badge style like this. The img.shields.io can support an input from json.

[yjose]

@byanko55 @pacoxu @cmwillett you can use this tricks i used with my astro website

---
import { Icon } from "astro-icon/components";

export interface Props {
  url: string;
}
const { url = "" } = Astro.props;

const encodedUrl = encodeURIComponent(url);
const counterUrl = `https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=${encodedUrl}&count_bg=%234E763000&title_bg=%237A464600&icon=&icon_color=%23E7E7E7&title=Reads+%28Today+%2F+All+Time%29+%3A&edge_flat=true`;
---

<div class="flex items-center gap-1">
  <Icon name="eye" class="h-4 w-4" />
  <span id="views-count" class="inline-flex items-center">
    <span class="loading-dot">.</span>
    <span class="loading-dot">.</span>
    <span class="loading-dot">.</span>
  </span>
</div>

<style>
  @keyframes loadingDots {
    0% {
      opacity: 0.2;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0.2;
    }
  }

  .loading-dot {
    animation: loadingDots 1.4s infinite;
    animation-fill-mode: both;
  }

  .loading-dot:nth-child(2) {
    animation-delay: 0.2s;
  }

  .loading-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
</style>

<script define:vars={{ counterUrl }}>
  function animateNumber(start, end, duration, element) {
    const startTime = performance.now();
    const targetNumber = parseInt(end);

    function update(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);

      const easeOutQuad = t => t * (2 - t);
      const easedProgress = easeOutQuad(progress);

      const currentNumber = Math.floor(targetNumber * easedProgress);
      element.textContent = currentNumber.toString();

      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  async function fetchWithProxy(targetUrl) {
    const proxyUrl = "https://corsproxy.io/?" + encodeURIComponent(targetUrl);
    const response = await fetch(proxyUrl);
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return response.text();
  }

  async function updateViewCount() {
    const viewsCount = document.getElementById("views-count");
    if (!viewsCount) return;

    try {
      const svgText = await fetchWithProxy(counterUrl);
      const match = svgText.match(
        /<text[^>]*fill="#fff"[^>]*>([\d\s/]+)<\/text>/
      );

      if (match && match[1]) {
        const count = match[1].trim();
        const totalViews = count.split("/")[1].trim();
        viewsCount.textContent = "0"; // Start from zero
        animateNumber(0, totalViews, 1000, viewsCount); // Animate to actual count over 1 second
      } else {
        viewsCount.textContent = "0";
      }
    } catch {
      viewsCount.textContent = "0";
    }
  }

  updateViewCount();
</script>