xevion/grain
1
0
Fork 0
mirror of https://github.com/Xevion/grain.git synced 2025-12-06 01:15:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

More post content, index.html title

Browse Source
This commit is contained in:
Xevion
2022-11-25 02:23:51 -06:00
parent ad3d5dd602
commit f56a48d8c4
3 changed files with 42 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Noise Test</title> <title>Grain</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

41
src/components/Post.tsx
View File

@@ -1,3 +1,5 @@
import { SparklesIcon } from "@heroicons/react/20/solid";
const Post = () => { const Post = () => {
return ( return (
<> <>
@@ -9,18 +11,49 @@ const Post = () => {
<span className="pl-1 py-1 text-zinc-500"> <span className="pl-1 py-1 text-zinc-500">
Created by{" "} Created by{" "}
<a <a
href="https://github.com/Xevion" href="https://xevion.dev"
target="_blank" target="_blank"
className="text-zinc-800 hover:text-sky-700" className="transition-colors text-sky-800 hover:text-sky-600"
> >
Ryan Walters Ryan Walters
</a> </a>
<a href="https://github.com/Xevion" target="_blank" className="hover:text-yellow-600 transition-colors cursor-pointer">
<SparklesIcon className="h-4 inline mb-2.5 m-2 " />
</a>
</span> </span>
</div> </div>
<div className="space-y-2"> <div className="space-y-4">
<p className="semibold-children"> <p className="semibold-children">
A small experiment on creating beautiful, dynamic backgrounds with A small experiment on creating beautiful, dynamic backgrounds with
colorful gradients & film grain. Built in <b>React</b> & <b>Vite</b> with <b>SVGs</b> and layers of <b>Radial Gradients</b>. colorful gradients & film grain. Built in <b>React</b> & <b>Vite</b>{" "}
with <b>SVGs</b> and layers of <b>Radial Gradients</b>.
</p>
<p>
This app was inspired by the gradients used{" "}
<a
href="https://www.instagram.com/p/ClUe3ONJaER/"
target="_blank"
className="text-sky-800 hover:text-sky-600"
>
certain popular instagram post
</a>{" "}
with beautiful gradients and a slight film grain applied. I wanted
to create something similar, but in a website form.
</p>
<p>
By using a SVG with a{" "}
<pre className="inline">&lt;feTurbulence&gt;</pre> filter inside,
stacked upon several <pre className="inline">radial-gradient</pre>{" "}
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.
</p>
<p>
React comes in handy here, allowing composition of an SVG, and then
conversion to a <pre className="inline">base64</pre> encoded string.
As a <pre className="inline">base64</pre> image, it can be fed into
the <pre className="inline">background</pre> CSS property, allowing
dynamic SVG generation.
</p> </p>
</div> </div>
</div> </div>

4
src/styles/index.scss
View File

@@ -41,3 +41,7 @@ body {
font-weight: 600; font-weight: 600;
} }
} }
pre.inline {
@apply text-zinc-900;
}