Yet Another SVG+JavaScript Clock
Fabien Fellay
Click on the magnifying glass icon (below the artwork) or select 'open the link in a new window' in your browser for accessing the interactive animation. This interactive document is a SVG live clock inspired (though different) by the Swiss Railway (SBB CFF FFS) iconic station clock by Hans Hilfiker. See <https://www.sbb.ch/>. The document also features vectorized portions of the free and open source font 'Fira Sans' (light weight used). See <https://carrois.com/typefaces/FiraSans/>. The hand colors are chosen according to the RGB canonical color scheme. It is a mnemonic: Red for seconds, Green for minutes and Blue for hours. A JavaScript dynamical simulation is running in order to animate the clock hands. Click on the hands to perturb them. Ctrl+click changes the direction of the perturbation. Shift+click increases the perturbation impulse amplitude. Ctrl and Shift can be combined. The (embedded) script for the dynamical simulation uses Math.js (version 3.16.4, embedded as well): <http://mathjs.org/> V1.0 (04.10.2017): Initial Design V1.1 (06.10.2017): Design Update (the initial version was identical to the SBB CFF FFS clock, leading to potential copyright issues) Copyright (C) 2017 by Fabien Fellay The script is licensed under the GNU General Public License version 3 (GPL-3.0). <https://opensource.org/licenses/GPL-3.0> <https://www.gnu.org/licenses/> The artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/> --- Curated by Martin Owens on October 6 2017 2:55 PM
Comment here...
Chromatic Aberration with Rotating Figures Demo
Fabien Fellay
This is an animated SVG featuring the Chromatic Aberration Filters available here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-filters> The document also contains vectorized portions of the free and open source font 'Fira Sans'. See <https://carrois.com/typefaces/FiraSans/>. The animation is obtained by using SMIL to rotate the figures continuously and directly alter the filter parameters (x-offset values): <https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL> The filters are actually applied on groups surrounding the rotating figures. That way, the decomposition layers remain scattered horizontally while the figures rotate. 27.01.2018: Release Copyright (C) 2018 by Fabien Fellay This artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/>
Comment here...
Chromatic Aberration RGB-CMY Demo
Fabien Fellay
This is an animated SVG featuring the Chromatic Aberration Filters available here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-filters> The document also contains vectorized portions of the free and open source font 'Fira Sans'. See <https://carrois.com/typefaces/FiraSans/>. The Moon bitmap picture comes from Wikipedia and is licensed with CC-BY-SA 3.0 (Gregory H. Revera) <https://en.wikipedia.org/wiki/Moon#/media/File:FullMoon2010.jpg> The Sun bitmap picture comes from Wikipedia and is in the public domain (CC0). <https://en.wikipedia.org/wiki/Sun#/media/File:Sun_-_August_1,_2010.jpg> The animation is obtained by using SMIL to directly alter the filter parameters (x-offset values): <https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL> 26.01.2018: Release Copyright (C) 2018 by Fabien Fellay This artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/>
Comment here...
Python Matplotlib colormaps as Inkscape gradients
Fabien Fellay
This is an Inkscape gradient implementation of the famous Python Matplotlib colormaps designed by Stéfan van der Walt and Nathaniel J. Smith: > viridis > inferno > magma > plasma See: <https://bids.github.io/colormap/> Those colormaps are perfectly perceptually uniform according to color distance in the CAM02-UCS color space. Here, an approximation of those colormaps is proposed by using only 17 gradient stops. Between the stops, the colors are linearly interpolated (by Inkscape or any browsers) in the sRGB color space (which is not ideal for uniform perception) as mentioned here: <http://tavmjong.free.fr/SVG/COLOR_INTERPOLATION/> The original data of the colormaps are available here (256 points): <https://github.com/BIDS/colormap/blob/master/colormaps.py> The font used for the text is Inconsolata. See <https://levien.com/type/myfonts/inconsolata.html>. Fabien Fellay, 12.11.2018
Comment here...
Chromatic Aberration RC-CR Demo
Fabien Fellay
This is an animated SVG featuring the Chromatic Aberration Filters available here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-filters> The filters have been adapted in order to obtain a red-cyan decomposition instead of the initial RGB or CMY: the horizontal offset values of the blue/yellow layer have been set to 0 user unit instead of 1. The document also contains vectorized portions of the free and open source font 'Fira Sans'. See <https://carrois.com/typefaces/FiraSans/>. The Moon bitmap picture comes from Wikipedia and is licensed with CC-BY-SA 3.0 (Gregory H. Revera) <https://en.wikipedia.org/wiki/Moon#/media/File:FullMoon2010.jpg> The Sun bitmap picture comes from Wikipedia and is in the public domain (CC0). <https://en.wikipedia.org/wiki/Sun#/media/File:Sun_-_August_1,_2010.jpg> The animation is obtained by using SMIL to directly alter the filter parameters (x-offset values): <https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL> 26.01.2018: Release Copyright (C) 2018 by Fabien Fellay This artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/>
Comment here...
