From f56a48d8c4a803448bb1d3d97dfa9be6cc7b7214 Mon Sep 17 00:00:00 2001 From: Xevion Date: Fri, 25 Nov 2022 02:23:51 -0600 Subject: [PATCH] More post content, index.html title --- index.html | 2 +- src/components/Post.tsx | 41 +++++++++++++++++++++++++++++++++++++---- src/styles/index.scss | 4 ++++ 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 9b6a2a8..9ce781d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Noise Test + Grain
diff --git a/src/components/Post.tsx b/src/components/Post.tsx index 2649320..5df5102 100644 --- a/src/components/Post.tsx +++ b/src/components/Post.tsx @@ -1,3 +1,5 @@ +import { SparklesIcon } from "@heroicons/react/20/solid"; + const Post = () => { return ( <> @@ -9,18 +11,49 @@ const Post = () => { Created by{" "} Ryan Walters + + + -
+

A small experiment on creating beautiful, dynamic backgrounds with - colorful gradients & film grain. Built in React & Vite with SVGs and layers of Radial Gradients. + colorful gradients & film grain. Built in React & Vite{" "} + with SVGs and layers of Radial Gradients. +

+

+ This app was inspired by the gradients used{" "} + + certain popular instagram post + {" "} + with beautiful gradients and a slight film grain applied. I wanted + to create something similar, but in a website form. +

+

+ By using a SVG with a{" "} + 

<feTurbulence>
filter inside, + stacked upon several 
radial-gradient
{" "} + background images, the same effect can be created. Since SVGs do not + naturally repeat internally, the SVG itself must be generated in + such a way that the noise always displays the same way. +

+

+ React comes in handy here, allowing composition of an SVG, and then + conversion to a 

base64
encoded string. + As a 
base64
image, it can be fed into + the 
background
CSS property, allowing + dynamic SVG generation.

diff --git a/src/styles/index.scss b/src/styles/index.scss index 18f19a5..d10671e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -41,3 +41,7 @@ body { font-weight: 600; } } + +pre.inline { + @apply text-zinc-900; +}