Skip to content

Instantly share code, notes, and snippets.

@cyberbobs
Created June 24, 2015 16:32
Show Gist options
  • Save cyberbobs/7884579521f561956d83 to your computer and use it in GitHub Desktop.
Save cyberbobs/7884579521f561956d83 to your computer and use it in GitHub Desktop.
QML: recoloring fragment shader (recolor monochrome icons in runtime)
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="6"><path d="m80 92c0 14.02 12 24 26 20"/><path d="m56.47 44.699c14.07-8 33.3-7.883 47.534.117"/><path d="m45 68c15.922-24 52.981-24.583 70.07 0"/><path d="m91.77 121.82c-6.253 0-22.299-12.235-22.299-29.25 0-6.644 3.218-11.263 10.532-11.281 7.313-.018 10.835 6.317 10.835 11.418 0 4.757 4.831 9.613 10.998 9.617 6.167.004 10.167-3.975 10.167-12.523 0-13.804-14.379-29.804-32-29.804-17.621 0-32 14-32 33.924 0 6.076 3 14.08 3 14.08"/><path d="m70.49 120.38c-7.721-7.641-11.492-18.469-11.492-28.385 0-9 5.7-21.251 20.697-21.251 14.997 0 21.515 13.147 21.439 20.74"/></g></svg>
import QtQuick 2.4
Item {
width: 320
height: 640
Image {
id: img
source: 'fingerprint.svg'
sourceSize.width: 320
}
ShaderEffect {
id: shader
anchors.top: img.bottom
anchors.left: img.left
width: 320
height: 320
property variant source: img
property color color: "#4caf50"
fragmentShader: "
uniform lowp sampler2D source;
uniform highp vec4 color;
uniform lowp float qt_Opacity;
varying highp vec2 qt_TexCoord0;
void main() {
lowp vec4 tex = texture2D(source, qt_TexCoord0);
gl_FragColor = vec4(color.r, color.g, color.b, tex.a) * qt_Opacity;
}
"
}
SequentialAnimation
{
running: true
loops: Animation.Infinite
ColorAnimation {
target: shader
property: "color"
to: "#b71c1c"
duration: 1000
}
ColorAnimation {
target: shader
property: "color"
to: "#4caf50"
duration: 1000
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment