איך הגיליונות האלה שורטטו

האתר הזה הוא פנקס סקיצות: חמישה גיליונות, שני נספחים, טבלת גיליון בפינה. אין בו אף תמונה, כל קו הוא SVG שמצויר בדפדפן, בזמן אמת, מול העיניים שלכם. הנה המתכון המלא, בגובה העיניים.

קו שמצייר את עצמו

כל קו הוא path של SVG. מודדים את אורכו, הופכים אותו למקווקו שהמקטע שלו ארוך בדיוק כמו הקו כולו, ומזיזים את ההיסט מלא-קיים לאפס. הדפדפן עושה את השאר: נראה כאילו עיפרון משרטט את הקו. מהירות הציור נגזרת מאורך הקו, כמו יד אמיתית: קו ארוך לוקח יותר זמן.

/* CSS: המסכה */
.d {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}
.live .d {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset
    var(--t) cubic-bezier(.5,.06,.35,.95)
    var(--d);
}

/* JS: היד */
const len = path.getTotalLength();
path.style.setProperty('--len', len);
/* מהירות עיפרון קבועה */
const t = clamp(len * 0.9, 260, 1150);

הכוריאוגרפיה מנוהלת בקבוצות: לכל קבוצה יש data-base (מתי מתחילים) ו-data-stag (כמה מחכים בין קו לקו). קווי הבנייה הבהירים קודם, אחריהם קווי הדיו, ההצללה, ולבסוף העיפרון האדום והתוויות. כשהגיליון מסיים, קווי הבנייה דוהים, בדיוק כמו בסקיצה אמיתית.

יד רועדת, בכוונה

שלושה דברים הופכים וקטור נקי לקו של יד אנושית:

1. רעד. פילטר SVG של רעש (feTurbulence) שמזיז כל נקודה בקו כמה פיקסלים (feDisplacementMap). שלושה פילטרים עם זרעים שונים: דיו עדין, עיפרון גס, ופילטר דק לקווי מידה.
2. קו חוזר. כל קו-מתאר חשוב משורטט פעמיים: עותק שני, מוזז מעט, בשקיפות 40%. ככה יד אמיתית עוברת על קו פעמיים.
3. מהירות אמיתית. משך הציור פרופורציונלי לאורך הקו. עיפרון לא מצייר קו ארוך וקצר באותו זמן.

<filter id="wob2">
  <feTurbulence type="fractalNoise"
     baseFrequency="0.02 0.06" numOctaves="2" seed="23"/>
  <feDisplacementMap in="SourceGraphic" scale="5"/>
</filter>

<path class="d"    d="M 330 350 C 345 240, ..."/>  <!-- קו ראשון -->
<path class="d p2" d="M 334 354 C 350 246, ..."/>  <!-- מעבר שני, 40% -->

גם הטיפוגרפיה עוזרת: Amatic SC לכתב יד (כולל עברית), Miriam Libre לגוף הטקסט, כמו כתב אדריכלים מסודר. שני הקבצים מוטמעים באתר, בלי שרתים חיצוניים.

מתכון הנייר

הכל פרוצדורלי: שכבות של גרדיאנטים, רעש SVG מוטמע ככתובת data, וכמה תחבולות של הצללה.

1. קרם הנייר: גרדיאנט חם, בהיר למעלה וכהה מעט בתחתית, עם כתמי אור רדיאליים.
2. גרעיניות: מלבן feTurbulence זעיר שחוזר על עצמו, במצב multiply, פעם על כל גיליון ופעם על כל המסך.
3. השולחן: רעש מתוח לרוחב (baseFrequency לא סימטרי) שנראה כמו סיבי עץ כהים.
4. הספירלה: יחידת SVG אחת של חור מנוקב ולולאת תיל, שחוזרת אנכית לאורך הקצה הימני, כמו מחברת עברית.
5. נייר דבק, כתם קפה, נעץ: גרדיאנטים שקופים למחצה, טבעות קשת חומות במצב multiply, ועיגול רדיאלי אדום עם צל.
6. נייר השרטוט הצהוב: שכבה חצי שקופה עם רעש משלה, מוטה מעלה, שזזה מעט בגלילה, בדיוק כמו שאדריכלים מניחים טיוטה על תוכנית.

משמעת פלטה: חום, גרפיט, אדום וזהב בלבד. שום כחול-שרטוט, שום רשת CAD. זו סקיצה, לא תוכנית עבודה.

שיטת הגיליונות

כל פרק באתר הוא גיליון ממוספר עם טבלת גיליון (פרויקט, קנה מידה, תאריך), כמו בתיק שרטוטים אמיתי. חיה אחת לכל גיליון: צב לזרם, תמנון לרוחב, לוויתן לעומק, כריש לייעוץ, וכוס קפה לסגירה. קווי מידה מודדים דברים אמיתיים: 34 שנות אינטרנט, 29 שנות אתרים, קוטר של כוס קפה.

1. התעוררות: IntersectionObserver מעיר כל גיליון קצת לפני שנכנסים אליו, והכוריאוגרפיה רצה פעם אחת.
2. עיפרון השוליים: קו מקווקו בשולי המסך שנמתח לפי התקדמות הגלילה, עם עיפרון קטן שנוסע לאורכו.
3. תנועה מופחתת: מי שביקש prefers-reduced-motion מקבל את כל הרישומים גמורים מראש. שום דבר לא זז, שום דבר לא חסר.
4. בלי תלות: אין ספריות, אין CDN, אין תמונות. HTML אחד, CSS אחד, סקריפט אחד, שני גופנים.

<g class="ink" data-base="720" data-stag="150">
  ...כל קווי הדיו של הצב...
</g>
<g class="rd" data-base="2050">
  ...העיפרון האדום תמיד אחרון...
</g>

חזרה אל הגיליונות ←