SixFlagsSuperCalendar/app/icon.tsx

import { ImageResponse } from "next/og";

export const size = { width: 32, height: 32 };
export const contentType = "image/png";

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: 32,
          height: 32,
          borderRadius: 8,
          backgroundColor: "#0c1220",
          display: "flex",
          position: "relative",
        }}
      >
        {/* Ground line */}
        <div
          style={{
            position: "absolute",
            left: 3,
            right: 3,
            bottom: 7,
            height: 2,
            backgroundColor: "#f59e0b",
            borderRadius: 1,
          }}
        />
        {/* Lift hill — semicircle bump */}
        <div
          style={{
            position: "absolute",
            left: 3,
            bottom: 9,
            width: 10,
            height: 13,
            backgroundColor: "#f59e0b",
            borderRadius: "50% 50% 0 0",
          }}
        />
        {/* Vertical loop — circle outline */}
        <div
          style={{
            position: "absolute",
            right: 5,
            bottom: 7,
            width: 12,
            height: 12,
            border: "2.5px solid #f59e0b",
            borderRadius: "50%",
          }}
        />
      </div>
    ),
    { width: 32, height: 32 },
  );
}