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...
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...
Chromatic Aberration Filters
Fabien Fellay
This empty SVG file contains 2 filters for simulating a basic chromatic aberration effect. To use those filters, download the empty file 'chromatic_aberration_filters.svg' and put it in your Inkscape filters folder (for example, on Windows: 'C:\Program Files\Inkscape\share\filters\'). Then, the new filters will be available from the menu: Filters > Optical Defect. See demos here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-rgb-cmy-demo> <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-rc-cr-demo> <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-with-rotating-figures-demo> The additive chromatic aberration filter decomposes the source graphic into its 3 RGB layers slightly horizontally offset. The alpha channel value of the source is preserved in each layer. Then, the layers are mixed using additive blending (screen blend mode). This filter is best suitable when applied to a light object on a dark background. Similarly, the subtractive chromatic aberration filter decomposes the source graphic into its CMY layers and then mixes them using subtractive blending (multiply blend mode). This filter is best suitable when applied to a dark object on a light background. Both filters are actually equivalent when applied to a whole graphic including background (as long as the very edge of both sides of the filtered graphic is ignored). The horizontal offset values of the decomposition layers have been set to -1 (red/cyan), 0 (green/magenta) and 1 (blue/yellow) user units. By using the Inkscape filter editor, you are free to adapt them to your need (and even add arbitrary vertical shift) once the chromatic aberration filters have been applied to an object. The created SVG drawings featuring these filters will render correctly in all modern browsers (Firefox, Chrome, Edge, etc). Similar filters are also natively available from the menu: Filters > Color > Nudge CMY/RGB... V1.0 (26.01.2018): First release Copyright (C) 2018 by Fabien Fellay The script is licensed under the GNU General Public License version 3 (GPLv3). <https://www.gnu.org/licenses/gpl.html> <https://opensource.org/licenses/GPL-3.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...