Document index.html and how to get path length

2 years ago · f0441fb641
parent 4028467037
commit f0441fb641
2 changed files with 6 additions and 5 deletions
--- a/Readme.md
+++ b/Readme.md
@ -59,7 +59,7 @@ To produce animations, use the [`plain_sigil.py`](./plain_sigil.py) script.
 <path style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0.784314%,8.235294%,70.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 150 50 L 250 250 L 150 150 L 50 150 L 250 50 L 250 150 L 50 50 L 250 250 L 50 50 L 150 150 L 150 250 L 250 150 L 50 250 L 150 50 L 250 50 L 50 250 L 150 50 L 50 150 L 250 50 L 50 250 "/>
 ```

-3. Adjust the path length as indicated in the file comments so the animation runs draws the whole line.
-4. Open [`index.html`](animation/index.html) 
+1. Adjust the path length as indicated in the [`index.html`](animation/index.html) file comments so the animation draws the whole line.
+2. Open [`index.html`](animation/index.html) 

 ![](animation/animation_dark.gif)
--- a/animation/index.html
+++ b/animation/index.html
@ -7,8 +7,8 @@
        background-color: black;
      }
    .sigil {
-        stroke-dasharray: 3662; /* path total length: see below how to get this */
-        stroke-dashoffset: 3662;
+        stroke-dasharray: 3662; /* 2. paste the value here */
+        stroke-dashoffset: 3662; /* and here */
        animation: dash 5s linear forwards;
      }

@ -20,7 +20,8 @@
    </style>
 </head>

-<!-- get the total length of the path in the console type -->
+<!-- 1. get the total length of the path -->
+<!-- In the browser console, run the following command and copy the output -->
 <!-- document.getElementById('line').getTotalLength() -->

 <body>