Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Flag of Japan 日の丸 HTML5+SVG+CSS
<svg xmlns="" 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; }
<svg class="hinomaru" xmlns="">
<circle cx="50%" cy="50%" r="24%" />

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:

For a preview of the flag (works only with browsers supporting inline SVG, like Google Chrome):

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.