Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flag of Japan 日の丸 HTML5+SVG+CSS
<svg xmlns="http://www.w3.org/2000/svg" background="#eee" width=420 height=280><circle cx="50%" cy="50%" r="24%" fill="#bc002d" /></svg>
<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

This comment has been minimized.

Copy link
Owner 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
You can’t perform that action at this time.