Skip to content

Instantly share code, notes, and snippets.

@remino

remino/hinomaru-short.html

Created January 5, 2012 03:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save remino/1563635 to your computer and use it in GitHub Desktop.
Save remino/1563635 to your computer and use it in GitHub Desktop.
Download ZIP
Flag of Japan 日の丸 HTML5+SVG+CSS
Raw
hinomaru-short.html
<svg xmlns="http://www.w3.org/2000/svg" background="#eee" width=420 height=280><circle cx="50%" cy="50%" r="24%" fill="#bc002d" /></svg>
Raw
hinomaru.html
<style type="text/css">
.hinomaru { background: #eeeeee; width: 420px; height: 280px; }
.hinomaru circle { fill: #bc002d; }
</style>
<svg class="hinomaru" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="24%" />
</svg>
@remino
Copy link
Author

remino commented Jan 5, 2012

  • Geometry of the flag of Japan: flag's width and height ratio of 3:2; red circle centred, 3/5 of flag's height tall.
  • Circle radius in SVG: (w+h)/2*p (w: width of circle's container, h: height of circle's container, p: radius percentage specified).

For more information about the flag, see:
http://en.wikipedia.org/wiki/Flag_of_Japan
http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E5%9B%BD%E6%97%97

For a preview of the flag (works only with browsers supporting inline SVG, like Google Chrome):
http://remino.net/hinomaru

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment