Yet Another SVG+JavaScript Clock
i

Fabien FellayYet 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
i

Fabien FellayChromatic 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
i

Fabien FellayChromatic 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...
Chromatic Aberration RC-CR Demo
i

Fabien FellayChromatic 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...