SVG Calendar showing todays date

1 minute 34 seconds average read (313 words) DEC 02 Saturday

This is a version of Terence Eden's SVG with JavaScript Calendar icon, but here using Squiz Matrix Keyword Replacements. This could also be used with other Matrix date based keywords, such as published date, updated date, etc.


These all use the %globals_date% keyword replacement, which outputs todays date like so (10 Jul 2019 4:00 PM), also this can be changed to any date format using the PHP Date Codes.


<svg xmlns=“” aria-label=“Calendar” role=“img” viewBox=“0 0 512 512">
   <path d="M512 455c0 32-25 57-57 57H57c-32 0-57-25-57-57V128c0-31 25-57 57-57h398c32 0 57 26 57 57z" fill="#e0e7ec"/>
   <path d="M484 0h-47c2 4 4 9 4 14a28 28 0 1 1-53-14H124c3 4 4 9 4 14A28 28 0 1 1 75 0H28C13 0 0 13 0 28v157h512V28c0-15-13-28-28-28z" fill="#dd2f45"/>  
   <g fill="#f3aab9">
        <circle cx="470" cy="142" r="14"/>
        <circle cx="470" cy="100" r="14"/>
        <circle cx="427" cy="142" r="14"/>
        <circle cx="427" cy="100" r="14"/>
        <circle cx="384" cy="142" r="14"/>
        <circle cx="384" cy="100" r="14"/>
   <text id="month" x="32" y="164" fill="#fff" font-family="monospace" font-size="140px" style="text-anchor: left">%globals_date_M^uppercase%</text>
   <text id="day" x="256" y="400" fill="#66757f" font-family="monospace" font-size="256px" style="text-anchor: middle">%globals_date_d%</text>
   <text id="weekday" x="256" y="480" fill="#66757f" font-family="monospace" font-size="64px" style="text-anchor: middle">%globals_date_l%</text>