SVG Year timeline in your daily note (now a plugin)

Share & showcase
, , ,
9

Here’s an example if you wish to mark special events with emojis.

image
image743×127 9.7 KB 

# 📆 {{date}}
<svg viewBox="0 -100 3760 200">
  <title>Timeline 2022</title>
  <g class="bars">
    <rect fill="#cfe2f3" x="0" width="310" height="25"></rect>
    <rect fill="#a2c4c9" x="320" width="280" height="25"></rect>
    <rect fill="#76a5af" x="610" width="310" height="25"></rect>
    <rect fill="#93c47d" x="930" width="300" height="25"></rect>
    <rect fill="#6aa84f" x="1240" width="310" height="25"></rect>
    <rect fill="#8fce00" x="1560" width="300" height="25"></rect>
    <rect fill="#ffd966" x="1870" width="310" height="25"></rect>
    <rect fill="#f1c232" x="2190" width="310" height="25"></rect>
    <rect fill="#ce7e00" x="2510" width="300" height="25"></rect>
    <rect fill="#e06666" x="2820" width="310" height="25"></rect>
    <rect fill="#f4cccc" x="3140" width="300" height="25"></rect>
    <rect fill="#eeeeee" x="3450" width="310" height="25"></rect>
  </g>
  <g class="labels" style="font-size:50px;" text-anchor="start">
    <text fill="#CCE0E2" x="0" y="80">January</text>
    <text fill="#CCE0E2" x="320" y="80">February</text>
    <text fill="#CCE0E2" x="610" y="80">March</text>
    <text fill="#CCE0E2" x="930" y="80">April</text>
    <text fill="#CCE0E2" x="1240" y="80">May</text>
    <text fill="#CCE0E2" x="1560" y="80">June</text>
    <text fill="#CCE0E2" x="1870" y="80">July</text>
    <text fill="#CCE0E2" x="2190" y="80">August</text>
    <text fill="#CCE0E2" x="2510" y="80">September</text>
    <text fill="#CCE0E2" x="2820" y="80">October</text>
    <text fill="#CCE0E2" x="3140" y="80">November</text>
    <text fill="#CCE0E2" x="3450" y="80">December</text>
  </g>
  <g class="events" style="font-size:100px;" text-anchor="middle">
    <text fill="white" x="390" y="-5">☃️</text><!-- Winter festival -->
    <text fill="white" x="2590" y="-5">🎁</text><!-- Birthday -->
    <text fill="white" x="3690" y="-5">🎄</text><!-- Christmas -->
  </g>
  <g>
    <circle cx="{{date:DDD}}0" cy="14" r="15" stroke="black" fill="white" />
  </g>
</svg>

Changes:

  • Used colors from @CAD_O’s update.
  • Changed all single-quotes to double-quotes for consistency
  • Removed text-anchor="start" from each individual month’s <text> tag and defined the alignment on the parent <g> tag.
  • Added some example emojis
  • Increased the image height, so emojis would fit better
  • Used a lighter color for the month texts - better for dark theme

The way you calculate the emoji position is by checking the x attribute of a month (For example May has x="1240") and then add the days multiplied by 10.
For example, 27th of May would be 1240 + (27 * 10) = 1510.

21 Likes