Skip to main content
Code Golf

Return to Answer

Commonmark migration
Source Link
Community Bot
Community Bot
  • 1

SVG(HTML5), 128 126 124 120 bytes

#SVG(HTML5), 128 126 124 120 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2)
(Drawing triangles from right to left saves 2 bytes)
(Thanks Grimmy for saving 2 bytes by using a modified path)
(And reduced another 2 bytes by using a different starting point on the path)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

This is the result:

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

#SVG(HTML5), 128 126 124 120 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2)
(Drawing triangles from right to left saves 2 bytes)
(Thanks Grimmy for saving 2 bytes by using a modified path)
(And reduced another 2 bytes by using a different starting point on the path)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

SVG(HTML5), 128 126 124 120 bytes

(Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2)
(Drawing triangles from right to left saves 2 bytes)
(Thanks Grimmy for saving 2 bytes by using a modified path)
(And reduced another 2 bytes by using a different starting point on the path)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

This is the result:

SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

Applying Grimmy's suggestion for saving 2 bytes by using a modified path, saving 2 more by choosing a better starting point for the path.
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6

#SVG(HTML5), 128 126 124124 120 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2)
(Drawing triangles from right to left saves 2 bytes)
(Thanks Grimmy for saving 2 bytes by using a modified path)
(And reduced another 2 bytes by using a different starting point on the path)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,0h3.4V0h-4l1,14v3.7l24l4,-36.4h8h-2l2,3.4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,0h3.4V0h-4l1,14v3.7l24l4,-36.4h8h-2l2,3.4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,0h3.4V0h-4l1,14v3.7l24l4,-36.4h8h-2l2,3.4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

#SVG(HTML5), 128 126 124 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2)
(Drawing triangles from right to left saves 2 bytes)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

#SVG(HTML5), 128 126 124 120 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2)
(Drawing triangles from right to left saves 2 bytes)
(Thanks Grimmy for saving 2 bytes by using a modified path)
(And reduced another 2 bytes by using a different starting point on the path)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,3.4V0h-4v3.4l4,-6.8h-4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

Draw path from left to right saves 2 bytes
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6

#SVG(HTML5), 128 126 124 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2) 
(Thanks Grimmy for noting that drawingDrawing triangles from right to left saves 2 bytes)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

#SVG(HTML5), 128 126 124 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2) (Thanks Grimmy for noting that drawing triangles from right to left saves 2 bytes)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

#SVG(HTML5), 128 126 124 bytes# (Thanks Wheat Wizard for saving 2 bytes by using .2 rather than 0.2) 
(Drawing triangles from right to left saves 2 bytes)

 <svg viewbox=-2,-2,4,4>
  <circle r=1 />
  <circle r=.3 fill=#FFF />
  <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  <circle r=.2


<svg viewbox=-2,-2,4,4><circle r=1 /><circle r=.3 fill=#FFF /><path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF /><circle r=.2

Rather than basing the SVG on wikipedia's vector image - which is drawn in a reasonable way, this solution draws:

  1. A black large circle <circle r=1 />
  2. A smaller white circle <circle r=.3 fill=#FFF />
  3. Three white triangles as a single continuous path <path d=m2,0h-4l1,1.7l2,-3.4h-2l2,3.4 fill=#FFF />
  4. And a small black circle <circle r=.2

Taking advantage of modern browsers forgiving interpretation which ignores unclosed tags (saved the final 9 bytes of /></svg> )

###This is the result:### SVG output

And this is the same code with the path in yellow to demonstrate what's going on: enter image description here

Draw path from left to right (Grimmy's suggestion) - saves 2 bytes
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6
golfed 2 bytes thanks to WheatWizard
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6
removed the tag closure - works for me in Chrome in the snippet without it...
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6
closed an apperantly necessary tag, added a snippet.
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6
better code formatting
Source Link
Wheat Wizard ♦
Wheat Wizard ♦
  • 100k
  • 22
  • 282
  • 661
Source Link
G0BLiN
G0BLiN
  • 300
  • 1
  • 6