From 8aca1358035bc009526d9a1a7f56ff7fdc84c8e3 Mon Sep 17 00:00:00 2001 From: Xevion Date: Thu, 24 Nov 2022 19:13:52 -0600 Subject: [PATCH] Noise & Gradient Generation --- src/App.tsx | 124 ++++++++++++++++++++++++++++++++++++++++++++++ src/index.scss | 35 +++++++++++++ src/main.tsx | 10 ++++ src/utils.ts | 14 ++++++ src/vite-env.d.ts | 1 + 5 files changed, 184 insertions(+) create mode 100644 src/App.tsx create mode 100644 src/index.scss create mode 100644 src/main.tsx create mode 100644 src/utils.ts create mode 100644 src/vite-env.d.ts diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..6867732 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,124 @@ +import Chance from "chance"; +import ReactDOMServer from "react-dom/server"; +import { useEventListener, useWindowSize } from "usehooks-ts"; +import { useState } from "react"; +import { getEdgePoint } from "@/utils"; + +const chance = Chance(); +const colors = [ + "#ed625d", + "#42b6c6", + "#f79f88", + "#446ba6", + "#4b95f0", + "#d16ba5", +]; + +const generateBackground = () => { + return chance.pickset(colors, 5).map((color) => { + const [x, y] = getEdgePoint(chance.integer({ min: 0, max: 100 }), 100, 100); + return `radial-gradient(farthest-corner at ${x}% ${y}%, ${chance.pickone( + colors + )}, ${chance.pickone(colors)}, transparent 100%)`; + }); +}; + +function App() { + const { width, height } = useWindowSize(); + const [background, setBackground] = useState(generateBackground()); + + useEventListener("keydown", (e) => { + if (e.code != "Enter") return; + e.preventDefault(); + + setBackground(generateBackground()); + }); + + const ratio = 0.3; + const svgWidth = Math.ceil((width ?? 1920) * ratio); + const svgHeight = Math.ceil((height ?? 1080) * ratio); + console.log({ svgWidth, svgHeight }); + + const noise = ( + + + + + + + + + ); + + const svg = `data:image/svg+xml;base64,${window.btoa( + ReactDOMServer.renderToString(noise) + )}`; + + const appStyle = { + background: [`url("${svg}")`, ...background].join(", "), + }; + + return ( +
+
+
+
+
+
+
+

+ Ryan Walters +

+ + Published on {new Date().toLocaleDateString()} + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + consequat lacus sit amet erat efficitur elementum. Fusce + hendrerit bibendum ipsum, sit amet volutpat augue egestas sed. + Curabitur ut blandit felis. Suspendisse euismod, orci quis + consectetur pretium, libero eros lobortis lacus, vel interdum + ex sem sed sapien. Aliquam erat volutpat. Curabitur tempus + faucibus lobortis. Nulla sodales ipsum sit amet ligula + elementum faucibus. Donec aliquam enim a arcu gravida tempus. + Etiam tempus lectus et mauris feugiat, vel imperdiet quam + mattis. Suspendisse urna enim, cursus quis nibh et, egestas + ultrices tortor. Quisque imperdiet elit molestie lorem + placerat posuere. Duis in dolor non elit tempor mattis. Proin + vehicula facilisis nibh. +

+

+ Maecenas rhoncus, erat auctor scelerisque condimentum, nibh + magna tristique felis, vitae condimentum mi est quis dui. + Fusce non imperdiet massa. Sed varius ultrices odio non + faucibus. Pellentesque habitant morbi tristique senectus et + netus et malesuada fames ac turpis egestas. Pellentesque + semper pulvinar vehicula. Fusce vel convallis eros. Duis + cursus feugiat quam, quis sodales enim malesuada non. + Vestibulum ante ipsum primis in faucibus orci luctus et + ultrices posuere cubilia curae; Maecenas in efficitur elit, + sed suscipit magna. Duis finibus blandit leo vitae mollis. In + et est pulvinar, condimentum est sed, scelerisque nisl. Nunc + eleifend eros aliquet libero. +

+
+
+
+
+
+
+ ); +} + +export default App; diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..36aa82e --- /dev/null +++ b/src/index.scss @@ -0,0 +1,35 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} +body { + min-width: 100vw; + min-height: 100vh; + + background-color: #242424; +} + +.gradient { + filter: contrast(150%) brightness(90%); + background-blend-mode: overlay; +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..c224b3c --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' +import './index.scss' + +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + + +) diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..3c72b35 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,14 @@ +export const getEdgePoint = ( + n: number, + width: number, + height: number +): [number, number] => { + const full = 2 * width + 2 * height; + if (n > full) n %= full; + if (n < 0) n = full - n; + + if (n < width) return [n, 0]; + if (n < width + height) return [width, n - width]; + if (n < 2 * width + height) return [n - (2 * width + height), height]; + return [0, height - (n - (2 * width + height))]; +}; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +///