Skip to the content

Hata旗

Load a native country or region flag, choose supported framing and keep each drawing’s source, author and licence.

Hata (旗) is Japanese for a flag. About the name

Contents

Reference · Codes, URLs and SVG helpers

Fittype

How a flag sits in a frame of another shape. Every flag offers both a whole and a cropped square (and 4:3, and round): whole and crop choose one, auto chooses the better for the flag.

  • auto (the default): the way measured for this flag, so that the frame never misrepresents it. A flag's own SVG from this package names its flag (data-hata), and pnpm data:framing recorded, for each frame, what to do: a crop kept at the side a person chose for the flag where there is one (the United States' canton and a slice of its stripes, kept at the left, rather than the middle stripes a centre crop shows), else a crop from the centre where that keeps every colour that covers 5% of the flag, else the whole flag. An SVG that names no flag of this package is shown whole.
  • whole: shows the entire flag, with clear bands where the shapes differ, and a neutral disc behind it in a round frame. (contain is the same, under its CSS name.)
  • crop: crops the flag to fill the frame, at the side chosen for it (see manifest(code).framings[shape].crop: at is where, why is the reason), and from the centre for a flag nobody chose a side for. Asked for by name, it crops even where auto would show the whole flag, so a crop that drops a colour is yours to ask for.
  • cover: fills the frame and crops what is outside it, centred, as CSS's object-fit: cover does.
  • hoist: fills the frame and crops from the fly, keeping the side by the pole, whatever the flag.

Where a flag set draws a hand-adapted square or 4:3 version of the flag (flag-icons redraws Canada's square with narrower red bars), flag(code, { shape }) from /load uses that drawing for auto and crop, because a person made it for the shape; frame() works on the one SVG it is given, so it can only crop or fit it.

Import it

import type { Fit } from "@johnmorrisdotca/hata";

Definition

type Fit = "auto" | "whole" | "crop" | "cover" | "hoist" | "contain";

Examples

import { frame, type Fit } from "@johnmorrisdotca/hata";
import usa from "@johnmorrisdotca/hata/flags/us";
import canada from "@johnmorrisdotca/hata/flags/ca";

const fit: Fit = "whole";
console.log(frame(usa, { shape: "1:1", fit }));              // all of the US flag, centred in a square
console.log(frame(usa, { shape: "1:1", fit: "crop" }));      // the canton and a slice of the stripes, kept at the left
console.log(frame(canada, { shape: "1:1" }));                // auto: the whole flag, because no crop of Canada keeps its red bars
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><svg data-hata="us" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7410 3900" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid meet"><path fill="#bf0a30" d="M0 0h7410v3900H0"/><path stroke="#fff" stroke-width="300" d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0"/><path fill="#00205b" d="M0 0h2964v2100H0"/><g fill="#fff"><g id="hata-us-d"><g id="hata-us-c"><g id="hata-us-e"><g id="hata-us-b"><path id="hata-us-a" d="m247 90 71 217-185-134h228L176 307z"/><use y="420" href="#hata-us-a"/><use y="840" href="#hata-us-a"/><use y="1260" href="#hata-us-a"/></g><use y="1680" href="#hata-us-a"/></g><use x="247" y="210" href="#hata-us-b"/></g><use x="494" href="#hata-us-c"/></g><use x="988" href="#hata-us-d"/><use x="1976" href="#hata-us-c"/><use x="2470" href="#hata-us-e"/></g></svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><svg data-hata="us" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7410 3900" x="0" y="0" width="512" height="512" preserveAspectRatio="xMinYMid slice"><path fill="#bf0a30" d="M0 0h7410v3900H0"/><path stroke="#fff" stroke-width="300" d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0"/><path fill="#00205b" d="M0 0h2964v2100H0"/><g fill="#fff"><g id="hata-us-d"><g id="hata-us-c"><g id="hata-us-e"><g id="hata-us-b"><path id="hata-us-a" d="m247 90 71 217-185-134h228L176 307z"/><use y="420" href="#hata-us-a"/><use y="840" href="#hata-us-a"/><use y="1260" href="#hata-us-a"/></g><use y="1680" href="#hata-us-a"/></g><use x="247" y="210" href="#hata-us-b"/></g><use x="494" href="#hata-us-c"/></g><use x="988" href="#hata-us-d"/><use x="1976" href="#hata-us-c"/><use x="2470" href="#hata-us-e"/></g></svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid meet"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></svg>

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/hata 1.6.0.