Tag Archives: SVG

Moon phases

Icons with moon phases are very often used on web calendars. The synodic month is 29.5 days long, but for calendar purposes we can think of four weeks of 28 days. The following is a total of 28 moon phase … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: NASA “meatball” logo – code update exercise

I recently went through NASA’s “meatball” logo, originally designed by James Modarelli in 1959. Looking at the svg version of this famous logo, I was interested in the svg code. It was obviously designed by some editor and not “by … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: Resizing svg element

Sometimes there is a need to resize svg element by javascript. SVG image with pink background in the following example has initial “Fullsize” dimensions 1920×1080. SVGLength interface and more is described at https://developer.mozilla.org/en-US/docs/Web/API under letter S with prefix SVG . … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: Circular text

Sometimes is needed circular text. Here is few examples how it can be done. All of them are working with a circular path with radius 100, then circumference is 628. The first example is going to create circular path from … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: Pleiades

In the recent post have been described how to create spiky star. Let’s utilize that knowledge to create star cluster Pleiades from the eight brightest spiky stars. Relative size can be computed by formula sqrt(8000/POW(2,511886432;magnitude). Number 8000 is just arbitrarily … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: Spiky Star

Let’s say we would like to create spiky star. One option would be to utilize tag path. Picture below should help to explain, how to design path. In the center “C” is a unit circle with radius 1. Each spike … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: color-keywords with colors

At the World Wide Web Consortium (W3C) document SVG Color 1.2, Part 2: Language there are defined color-keywords. Here is that part of the definition updated with horizontal rectangle with color for all 147 color-keywords. color-keyword ::= ~”aliceblue” | ~”antiquewhite” … Continue reading

Posted in workday | Tagged | Leave a comment

SVG: Circular arc

The arc command (a or A) of the element <path> is used to define an elliptical path. The special case is the circular path. Contrary to the element <circle>, where the center of the circle and radius has to be … Continue reading

Posted in workday | Tagged | Leave a comment