Third SVG of the “svg.svg” series: Code is tower.
1999 bytes (year of the SVG spec)
Some insights in the thread.
↓
ertdfgcvb.xyz/+/svg.svg
1999 bytes (year of the SVG spec)
Some insights in the thread.
↓
ertdfgcvb.xyz/+/svg.svg
SVG:
Self contained SVG files; the markup is limited to these three nodes: <svg>, <style> and <script>.
CSS is used only for background color, all other text attributes are set directly via JS.
Self contained SVG files; the markup is limited to these three nodes: <svg>, <style> and <script>.
CSS is used only for background color, all other text attributes are set directly via JS.
Embedding:
The SVG can be embedded in an HTML document without any special directives, simply as an <object>; easily resized via style/CSS.
The SVG can be embedded in an HTML document without any special directives, simply as an <object>; easily resized via style/CSS.
File size:
Final file sizes are a choice, the minifying process is manual and a balance between not removing too much lines and leaving some spaces here and there to create a texture (check etymology of text)… this phase feels a bit like sculpting.
Final file sizes are a choice, the minifying process is manual and a balance between not removing too much lines and leaving some spaces here and there to create a texture (check etymology of text)… this phase feels a bit like sculpting.
Rendering:
Rendering is fast because text elements (rows) are absolutely positioned only once, there is no reflow like in inline HTML.
Rendering is fast because text elements (rows) are absolutely positioned only once, there is no reflow like in inline HTML.
Setup steps:
Determine number of rows: equal to nr of LOC which are obtained trough ‘svg.outerHTML’… cheating a bit here (cfr. #quine).
Determine font size: ‘height / rows * factor’.
TIP: don’t parse the SVG el by hand to get its size, use ‘svg.viewBox.baseVal.height’ instead.
Determine number of rows: equal to nr of LOC which are obtained trough ‘svg.outerHTML’… cheating a bit here (cfr. #quine).
Determine font size: ‘height / rows * factor’.
TIP: don’t parse the SVG el by hand to get its size, use ‘svg.viewBox.baseVal.height’ instead.
Cell width:
Once font size is known, find cell width: ‘textEl.getBBox().width / nOfSampleChars’
Determine number of cols: ‘svg.viewBox.baseVal.height / cellWidth’ (due to a bug in FF and Safari (fingerprinting?) document.fonts.ready fires too early sometimes → cumbersome hack).
Once font size is known, find cell width: ‘textEl.getBBox().width / nOfSampleChars’
Determine number of cols: ‘svg.viewBox.baseVal.height / cellWidth’ (due to a bug in FF and Safari (fingerprinting?) document.fonts.ready fires too early sometimes → cumbersome hack).
Main loop:
The main loop is timed at 60fps trough rAF and consists in a traversal of cols and rows.
A string is composed for each row and finally assigned at the corresponding text element.
TIP: don’t measure time width ‘Date.now()’, use rAF function param instead.
The main loop is timed at 60fps trough rAF and consists in a traversal of cols and rows.
A string is composed for each row and finally assigned at the corresponding text element.
TIP: don’t measure time width ‘Date.now()’, use rAF function param instead.
Animations:
Interpolations are obtained through a combination of shader-like ‘smootherstep’, ‘mix’ and a bit of trig functions in a normalised space.
Values are then usually multiplied by str.length and floored.
Interpolations are obtained through a combination of shader-like ‘smootherstep’, ‘mix’ and a bit of trig functions in a normalised space.
Values are then usually multiplied by str.length and floored.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
