Arno Arno - 4 months ago 9
CSS Question

Create a list using SVG and HTML/CSS

The question is a follow-up to my previous question here:

Creating a git commits graph style list with css/js

Basically, can I have a list in a git-style, which would include SVG, so that when I zoom in it wouldn't lose it's quality?

While a basic

:before
and
:after
does work, I was wondering if you can improve this somehow?

Thank you!

Answer

Here is a SVG version of Git Commits Graph.
I have created this SVG graphic with using of Path, Circle and Text SVG elements.

You can change the fill and stroke colors as your like.

Demo Here:

<svg xmlns="http://www.w3.org/2000/svg" id="Git-Commits" width="350" height="450" viewBox="0 0 350 450">
  <path class="svg_img" id="Outline" fill="none" stroke="#010101" stroke-width="2" d="M57.016 43.048v360l108-79v-210z"/>
  <circle id="List-Item6" cx="165.016" cy="324.048" r="15.62" fill="#4B5AA8" stroke="#121241"  stroke-width="2"/>
  <circle id="List-Item5" cx="164.877" cy="253.1" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/>
  <circle id="List-Item4" cx="164.877" cy="185.48" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/>
  <circle id="List-Item3" cx="165.016" cy="114.048" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/>
  <circle id="List-Item2" cx="57.016" cy="403.048" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/>
  <circle id="List-Item1" cx="57.016" cy="42.107" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/>
  <text transform="translate(192.016 121.814)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 1
  </text>
  <text transform="translate(192.016 192.815)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 2
  </text>
  <text transform="translate(192.016 258.815)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 3
  </text>
  <text transform="translate(192.016 331.815)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 4
  </text>
</svg>

Comments