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

Big update:
This is now an actual plugin: GitHub - taneltm/obsidian-year-timeline: Add a configurable year timeline to your Obsidian notes

Original message:


The white dot indicates the current day of year.

# 📆 {{date}}
<svg viewBox="0 0 3760 100">
  <title>Timeline 2022</title>
  <g class='bars'>
    <rect fill='#0066FF' x='0' width='310' height='25'></rect>
    <rect fill='#3366AA' x='320' width='280' height='25'></rect>
    <rect fill='#99AA33' x='610' width='310' height='25'></rect>
    <rect fill='#99EE33' x='930' width='300' height='25'></rect>
    <rect fill='green' x='1240' width='310' height='25'></rect>
    <rect fill='yellow' x='1560' width='300' height='25'></rect>
    <rect fill='gold' x='1870' width='310' height='25'></rect>
    <rect fill='cyan' x='2190' width='310' height='25'></rect>
    <rect fill='orange' x='2510' width='300' height='25'></rect>
    <rect fill='red' x='2820' width='310' height='25'></rect>
    <rect fill='brown' x='3140' width='300' height='25'></rect>
    <rect fill='white' x='3450' width='310' height='25'></rect>
  </g>
  <g class='labels' style="font-size:50px;" text-anchor="middle">
    <text fill='#747474' x='0' y='80' text-anchor="start">January</text>
    <text fill='#747474' x='320' y='80' text-anchor="start">February</text>
    <text fill='#747474' x='610' y='80' text-anchor="start">March</text>
    <text fill='#747474' x='930' y='80' text-anchor="start">April</text>
    <text fill='#747474' x='1240' y='80' text-anchor="start">May</text>
    <text fill='#747474' x='1560' y='80' text-anchor="start">June</text>
    <text fill='#747474' x='1870' y='80' text-anchor="start">July</text>
    <text fill='#747474' x='2190' y='80' text-anchor="start">August</text>
    <text fill='#747474' x='2510' y='80' text-anchor="start">September</text>
    <text fill='#747474' x='2820' y='80' text-anchor="start">October</text>
    <text fill='#747474' x='3140' y='80' text-anchor="start">November</text>
    <text fill='#747474' x='3450' y='80' text-anchor="start">December</text>
  </g>
  <g>
    <circle cx="{{date:DDD}}0" cy="14" r="15" stroke="black" fill="white" />
  </g>
</svg>

(rest of your template)

Doesn’t require templater, just Daily Notes plugin.

It could probably use better colors or better design all together.
Just sharing the core idea.

49 Likes

This is very cool!

Love the idea. Tinkering with colors. How about this? Roughly based on temps.

<svg viewBox="0 0 3760 100">
  <title>Timeline 2022</title>
  <g class='bars'>
    <rect fill='#D1E2F3' x='0' width='310' height='25'></rect>
    <rect fill='#CCE0E2' x='320' width='280' height='25'></rect>
    <rect fill='#C2DCC5' x='610' width='310' height='25'></rect>
    <rect fill='#B8D7A8' x='930' width='300' height='25'></rect>
    <rect fill='#C5A68D' x='1240' width='310' height='25'></rect>
    <rect fill='#D37B74' x='1560' width='300' height='25'></rect>
    <rect fill='#DA6467' x='1870' width='310' height='25'></rect>
    <rect fill='#D76C6C' x='2190' width='310' height='25'></rect>
    <rect fill='#D8A8AC' x='2510' width='300' height='25'></rect>
    <rect fill='#D1E2F3' x='2820' width='310' height='25'></rect>
    <rect fill='#E5EFF9' x='3140' width='300' height='25'></rect>
    <rect fill='#FBFDFF' x='3450' width='310' height='25'></rect>
  </g>
  <g class='labels' style="font-size:50px;" text-anchor="middle">
    <text fill='#747474' x='0' y='80' text-anchor="start">January</text>
    <text fill='#747474' x='320' y='80' text-anchor="start">February</text>
    <text fill='#747474' x='610' y='80' text-anchor="start">March</text>
    <text fill='#747474' x='930' y='80' text-anchor="start">April</text>
    <text fill='#747474' x='1240' y='80' text-anchor="start">May</text>
    <text fill='#747474' x='1560' y='80' text-anchor="start">June</text>
    <text fill='#747474' x='1870' y='80' text-anchor="start">July</text>
    <text fill='#747474' x='2190' y='80' text-anchor="start">August</text>
    <text fill='#747474' x='2510' y='80' text-anchor="start">September</text>
    <text fill='#747474' x='2820' y='80' text-anchor="start">October</text>
    <text fill='#747474' x='3140' y='80' text-anchor="start">November</text>
    <text fill='#747474' x='3450' y='80' text-anchor="start">December</text>
  </g>
  <g>
    <circle cx="{{date:DDD}}0" cy="14" r="15" stroke="black" fill="white" />
  </g>
</svg>
11 Likes

Looks great! Those colors match my theme quite nicely.

Love this idea, thankyou for getting it together and sharing. However, the little white dot stays resolutely at the beginning of Jan for me. Any ideas for where to look for the cause? (Sorry this is so vague!)

2 Likes

It’s only in the beginning of January when you view it in the template. If you use the daily notes template to create a new daily note, then the dot will be placed correctly :wink:

Also, it will stay at that position for each daily note.

2 Likes

HA! Now I feel like such a simpleton. I was running the template (just for the datebar) on its own to test it. Doh!
Many thanks for putting me straight.

2 Likes

Hey ! Thanks a bunch, that’s very cool and I will definitely use it in my daily notes. I tweaked the colors to be the one I associate with each month (e.g. green for spring months).


For anyobdy that’s interested, the code is the following:

<svg viewBox="0 0 3760 100">
  <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="middle">
    <text fill='#747474' x='0' y='80' text-anchor="start">January</text>
    <text fill='#747474' x='320' y='80' text-anchor="start">February</text>
    <text fill='#747474' x='610' y='80' text-anchor="start">March</text>
    <text fill='#747474' x='930' y='80' text-anchor="start">April</text>
    <text fill='#747474' x='1240' y='80' text-anchor="start">May</text>
    <text fill='#747474' x='1560' y='80' text-anchor="start">June</text>
    <text fill='#747474' x='1870' y='80' text-anchor="start">July</text>
    <text fill='#747474' x='2190' y='80' text-anchor="start">August</text>
    <text fill='#747474' x='2510' y='80' text-anchor="start">September</text>
    <text fill='#747474' x='2820' y='80' text-anchor="start">October</text>
    <text fill='#747474' x='3140' y='80' text-anchor="start">November</text>
    <text fill='#747474' x='3450' y='80' text-anchor="start">December</text>
  </g>
  <g>
    <circle cx="{{date:DDD}}0" cy="14" r="15" stroke="black" fill="white" />
  </g>
</svg>
11 Likes

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

# 📆 {{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

The current day marker isn’t very visible on lighter colors, so if you want a red line instead, you can replace the last <g><circle ....></g> with:

  <g transform="translate({{date:DDD}}0,0)">
    <rect x="-10" width="10" height="25" fill="red" />
  </g>

image

5 Likes

You can also play around with the stroke-width of the circle to make it stand out a little more on lighter colors:

<circle cx="280" cy="14" r="20" stroke="black" stroke-width="7" fill="white" />

image

Granted I get that not everyone will still be able to see that well, but that’s the beauty of having the code so it can be played around with.

I’ve made mine gray scale so it better fits in with my dark theme

image

Thanks to @TanelTM for sharing this with us.

3 Likes

For anybody that uses templater, it’s the same moment.js formatting so just replace the {{date:....}} with

<%tp.date.now("YYYY")%> and <%tp.date.now("DDDD")%>0

4 Likes

So I played around with this a little more and came up with the following:

image

  • The height of the bar is a little bit bigger which is good for higher resolution screens, old eyes, or a combination of both.
  • I have gotten rid of the individual month boxes so they run together.
  • The timeline color is now a pure gradient from black to white and back to black

Here is the code for anyone wanting to tweak for their own use:

<svg viewBox="0 0 3760 150">
	<title>Timeline 2022</title>
	  <defs>
      	<linearGradient id="Gradient3" x1="0" x2="1" y1="0" y2="0">
        	<stop offset="0%" stop-color="black"/>
        	<stop offset="50%" stop-color="white"/>
        	<stop offset="100%" stop-color="black"/>
      </linearGradient>
	</defs>
	<g class="bars">
		<rect fill="url(#Gradient3)" x="0" y="20" width="3760" height="45"></rect>
	</g>
	<g class="labels" style="font-size:50px;" text-anchor="middle">
		<text fill="#AAAAAA" x="0" y="120" text-anchor="start">January</text>
		<text fill="#AAAAAA" x="320" y="120" text-anchor="start">February</text>
		<text fill="#AAAAAA" x="610" y="120" text-anchor="start">March</text>
		<text fill="#AAAAAA" x="930" y="120" text-anchor="start">April</text>
		<text fill="#AAAAAA" x="1240" y="120" text-anchor="start">May</text>
		<text fill="#AAAAAA" x="1560" y="120" text-anchor="start">June</text>
		<text fill="#AAAAAA" x="1870" y="120" text-anchor="start">July</text>
		<text fill="#AAAAAA" x="2190" y="120" text-anchor="start">August</text>
		<text fill="#AAAAAA" x="2510" y="120" text-anchor="start">September</text>
		<text fill="#AAAAAA" x="2820" y="120" text-anchor="start">October</text>
		<text fill="#AAAAAA" x="3140" y="120" text-anchor="start">November</text>
		<text fill="#AAAAAA" x="3450" y="120" text-anchor="start">December</text>
	</g>
	<g>
		<circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />
	</g>
</svg>
9 Likes

Very nice! I love it! i’ll probably fiddle with the colors a bit more, but I’m partial to your original multicolored option. Thanks for sharing this!

Cool visual addition to my daily note :+1:

I love the gradient!

For some reason, it displays great perfectly in Live Preview mode, but the gradient does not render in Reading mode on my computer…

That’s interesting. I don’t use Live Preview, but the gradient bar displays without issue for me in reading mode.

How is the bar showing up in reading mode for you?

Live Preview

Preview

I posted a bug report

SVG gradient rendered differently in Live Preview vs Preview - Bug reports - Obsidian Forum

Ah, I use the legacy editor where the gradient bar shows for me in reading mode. Sorry for misunderstanding. This definitely seems like a bug.

I was able to replicate this in the Obsidian Help vault, so something to do with Live Preview editor.