Effets NVG utilisant CSS

Question

J'essaie de créer un effet NVG en utilisant CSS mais je ne sais pas par où commencer ni comment ajouter des effets de lueur et de bruit et tout ça.

Si quelqu'un connaît des astuces ou a essayé quelque chose de similaire, guidez-moi, merci <3

Answer 1

Voici les réponses aux questions que vous pouvez essayer

Obtenez différents effets

   div{width: 50vw;
    height: 50vw;
    background-image: url(https://images.unsplash.com/photo-1671938576119-9e1c53d868dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80); /*Photo From Unsplash https://unsplash.com/*/
    background-color: green;
    background-blend-mode: overlay;
}

Answer 2

Si vous souhaitez une "vraie" sensation infrarouge, vous devez inverser les couleurs de l'image et désaturer le résultat. L'inversion donne l'impression que l'objet brille. Mélangez cela avec une nuance de vert et vous obtenez NVG.

div {
    background-color: green;
}
img {
    display: block;
    width: 100%;
    object-fit: cover;

    filter: invert(100%) saturate(0%);

    /* To blend with parent background use: */
    mix-blend-mode: multiply;
}