tree.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 600" width="500" height="600">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
* {
  font-family: monospace;
  color: #0f0;
  text-shadow: 0 0 5px #fff;
  background-color: #000;
}
.s {
  color: #ff0;
}
.c0 {
  animation: anim 3s infinite;
}
.c1 {
  animation: anim 3s infinite 1.2s;
}
.c2 {
  animation: anim 3s infinite 2.3s;
}
@keyframes anim {
  0%   { color: #f00; }
  32% { color: #f00; }

  33% { color: #f70; }
  65% {color: #f70; }

  66% { color: #00f;}
  100% { color: #00f;}
}
.t {
  color: #a00;
}
pre {
  padding: 2em;
}
      </style><pre>
                            <span class="s">*</span>
                           / \
                          / <span class="c1">•</span> \
                         /    <span class="s">*</span>\
                        /       \
                       /^^ <span class="c0">•</span>   ^^\
                         / <span class="c1">•</span><span class="c1">•</span><span class="s">*</span> \
                        / <span class="c2">•</span> <span class="c0">•</span>   \
                       /<span class="c1">•</span><span class="s">*</span>  <span class="s">*</span><span class="c2">•</span>   \
                      /<span class="c1">•</span>  <span class="c1">•</span>      <span class="c0">•</span>\
                     /<span class="c1">•</span>   <span class="c1">•</span>  <span class="c1">•</span>    <span class="s">*</span>\
                    /  <span class="s">*</span><span class="c0">•</span> <span class="c1">•</span>  <span class="c2">•</span>    <span class="s">*</span> \
                   /^^<span class="c1">•</span>         <span class="s">*</span><span class="s">*</span><span class="s">*</span>^^\
                     /     <span class="c0">•</span><span class="s">*</span> <span class="c2">•</span><span class="c2">•</span><span class="c1">•</span>  \
                    / <span class="s">*</span>    <span class="c2">•</span>        \
                   /   <span class="c2">•</span>         <span class="c0">•</span>   \
                  /       <span class="c1">•</span>  <span class="c2">•</span> <span class="s">*</span> <span class="s">*</span>  <span class="c1">•</span> \
                 /<span class="c2">•</span>   <span class="c2">•</span>  <span class="c2">•</span><span class="c2">•</span>  <span class="s">*</span> <span class="s">*</span><span class="c0">•</span>   <span class="c1">•</span> <span class="c2">•</span>\
                /<span class="c1">•</span>          <span class="c2">•</span> <span class="c2">•</span> <span class="c2">•</span>    <span class="c2">•</span><span class="s">*</span><span class="c1">•</span>\
               /^^<span class="c1">•</span>      <span class="c1">•</span> <span class="c1">•</span> <span class="c1">•</span>  <span class="c2">•</span>   <span class="c1">•</span> <span class="s">*</span>^^\
                 /<span class="c0">•</span>  <span class="c2">•</span>   <span class="s">*</span>    <span class="c0">•</span>     <span class="c0">•</span>  \
                /<span class="c1">•</span>   <span class="s">*</span>           <span class="c0">•</span> <span class="c0">•</span><span class="s">*</span><span class="c0">•</span>  \
               /   <span class="s">*</span> <span class="s">*</span> <span class="c2">•</span><span class="c0">•</span>  <span class="c2">•</span><span class="c2">•</span> <span class="c2">•</span><span class="s">*</span><span class="s">*</span>     <span class="s">*</span><span class="c1">•</span> \
              /               <span class="c0">•</span><span class="c0">•</span> <span class="c0">•</span><span class="c1">•</span><span class="c2">•</span>  <span class="c2">•</span>   \
             /           <span class="s">*</span> <span class="c2">•</span>         <span class="c1">•</span><span class="c1">•</span>  <span class="c1">•</span> \
            / <span class="c2">•</span><span class="c2">•</span>    <span class="c2">•</span>          <span class="c1">•</span> <span class="c1">•</span>          \
           /^^^^<span class="s">*</span>^^^^^<span class="c1">•</span><span class="c1">•</span>^^<span class="c2">•</span>^^<span class="c0">•</span>^^<span class="c0">•</span>^^<span class="c2">•</span><span class="c2">•</span><span class="c0">•</span><span class="s">*</span><span class="c1">•</span><span class="c1">•</span>^^^^\
<span class="t">                           ===
                           ===
                           ===
                           ===
                           ===
</span></pre></div></foreignObject></svg>