Animated SVG logo

risk-first · Aug 3, 2024 · e241fcb · e241fcb
1 parent c5dd684
commit e241fcb
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 18 deletions.
diff --git a/src/components/front/NewSplashTop/index.js b/src/components/front/NewSplashTop/index.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import styles from './styles.module.css'
+
+export default function NewSplashTop() {
+	return (
+
+		<section className={styles.nst}>
+			<svg version="1.1" id="Layer_1" x="0px" y="0px" className={styles.logo}
+				viewBox="50 50 180 180" width="500px" height="500px" style={{enableBackground: "new 0 0 283.5 283.5;"}}>
+				<g>
+					<path className={styles.st1} d="M142.4,70c-39.9,0-72.3,32.4-72.3,72.3c0,39.9,32.4,72.3,72.3,72.3c39.9,0,72.3-32.4,72.3-72.3
+		C214.7,102.3,182.3,70,142.4,70z M192.6,192.5c-12.9,12.9-30.6,20.8-50.2,20.8c-19.6,0-37.4-8-50.2-20.8
+		c-12.9-12.9-20.8-30.6-20.8-50.2c0-19.6,8-37.4,20.8-50.2c12.9-12.9,30.6-20.8,50.2-20.8c19.6,0,37.4,8,50.2,20.8
+		c12.9,12.9,20.8,30.6,20.8,50.2C213.5,161.9,205.5,179.7,192.6,192.5z"/>
+					<g>
+						<path className={styles.st1} d="M78.6,133.1l0.7-3.3c0.5-2.7,2.4-3.8,4.5-3.4c1.4,0.3,2.5,1.3,2.8,2.7l6.2-1.9l-0.4,2.2l-5.7,1.6l-0.3,1.7
+			l5.1,1l-0.4,2L78.6,133.1z M84.9,130.9c0.2-1.2-0.3-2.3-1.5-2.5c-1.2-0.2-2.1,0.3-2.4,1.8l-0.3,1.3l3.9,0.8L84.9,130.9z"/>
+						<path className={styles.st1} d="M87.8,108.1l1.1-1.7l10.7,6.9l-1.1,1.7L87.8,108.1z" />
+						<path className={styles.st1} d="M107.8,99.2c0.8,0.5,1.9,0.8,3.1,0c0.9-0.7,1.2-1.6,0.5-2.5c-1.6-2.2-5.8,1.7-8.3-1.6c-1.2-1.6-0.8-3.6,1-5
+			c1.9-1.4,3.8-0.7,4.6-0.1l-0.9,1.6c-0.6-0.3-1.6-0.7-2.6,0.1c-0.9,0.7-1,1.6-0.5,2.3c1.5,2,5.9-1.7,8.2,1.5c1.3,1.7,1,3.9-1.1,5.4
+			c-2.1,1.5-4,0.8-5,0.1L107.8,99.2z"/>
+						<path className={styles.st1} d="M124.9,80.2l2-0.4l1.2,5.7l3.4-6.7l2.2-0.5l-3.6,7l6.4,5.4l-2.3,0.5l-6-5.2l1.3,6.1l-2,0.4L124.9,80.2z" />
+					</g>
+					<g>
+						<path className={styles.st1} d="M195.5,143.6l0,3.2l-1.8,0l0-8.5l1.8,0l0,3.2l11,0l0,2L195.5,143.6z" />
+						<path className={styles.st1} d="M196.9,169.1c1,0.1,2.1-0.3,2.7-1.6c0.5-1.1,0.2-2-0.8-2.5c-2.5-1.1-4.3,4.4-8,2.8c-1.8-0.8-2.6-2.8-1.6-4.9
+			c1-2.2,3-2.5,3.9-2.4l0,1.8c-0.7,0-1.7,0.2-2.2,1.4c-0.5,1-0.1,1.9,0.7,2.3c2.3,1,4.2-4.5,7.9-2.9c2,0.9,2.8,2.9,1.8,5.3
+			c-1.1,2.4-3.1,2.7-4.3,2.6L196.9,169.1z"/>
+						<path className={styles.st1} d="M173.9,183.1l2.6-2.3c2-1.8,4.3-1.7,5.7-0.1c1,1.1,1.3,2.6,0.7,3.8l6.2,2.2l-1.7,1.5l-5.6-2.1l-1.3,1.2
+			l3.6,3.9l-1.5,1.4L173.9,183.1z M180.3,185.1c1-0.9,1.2-2,0.3-3c-0.8-0.9-1.9-1-3,0l-1,0.9l2.7,3L180.3,185.1z"/>
+						<path className={styles.st1} d="M159.3,191l1.9-0.7l4.5,12l-1.9,0.7L159.3,191z" />
+						<path className={styles.st1} d="M139.1,193.8l6.3,0l0,1.8l-4.3,0l0,3.7l3.8,0l0,1.8l-3.8,0l0,5.5l-2,0L139.1,193.8z" />
+					</g>
+					<g>
+						<path className={styles.st1} d="M179.8,117.8c-0.4-0.6-0.9-1.3-1.3-1.9v2.1v48.3v2.2c0.5-0.6,0.9-1.3,1.3-1.9c4.6-7,7.2-15.4,7.2-24.4
+			C187.1,133.2,184.4,124.8,179.8,117.8z M179.8,120.2c3.8,6.5,6,14,6,22.1c0,8.1-2.2,15.6-6,22.1V120.2z"/>
+						<path className={styles.st1} d="M97.4,142.2c0,8.7,2.5,16.8,6.8,23.7c0.4,0.7,0.9,1.3,1.3,2v-2.2v-46.9v-2.2c-0.5,0.6-0.9,1.3-1.3,2
+			C99.9,125.4,97.4,133.5,97.4,142.2z M104.2,163.5c-3.5-6.3-5.6-13.6-5.6-21.3c0-7.7,2-15,5.6-21.3V163.5z"/>
+						<path className={styles.st1} d="M142.3,97.4c-10.9,0-20.9,3.9-28.7,10.4c-0.5,0.4-1,0.9-1.5,1.3h1.9h14.8c13.8,0,20.8,6.8,20.8,20.4
+			c0,8.2-2.9,14.1-8.8,17.6l12.6,37.2l0.4,1.2c0.5-0.1,0.9-0.2,1.3-0.4c2.2-0.7,4.4-1.5,6.5-2.5c0.4-0.2,0.9-0.4,1.3-0.7v-1.4v-4.5
+			V127H154v-9.9c3.4-0.3,6-1.1,7.7-2.2c1.7-1.2,2.9-3.1,3.6-5.8h5.3h1.9c-0.5-0.4-1-0.9-1.5-1.3C163.2,101.3,153.2,97.4,142.3,97.4z
+			 M164.3,107.8l-0.3,1c-0.3,1.2-0.8,2.3-1.3,3.1c-0.5,0.8-1.1,1.5-1.8,2c-0.7,0.5-1.6,0.9-2.8,1.3c-1.2,0.3-2.6,0.6-4.3,0.8
+			l-1.2,0.1v12.4h8.8v53c-2.2,1.1-4.5,2-6.9,2.7l-2.9-8.3l-9.4-28c2.7-1.8,4.8-4.2,6.2-7c1.6-3.2,2.3-6.9,2.3-11.2
+			c0-3.5-0.4-6.6-1.4-9.3c-0.7-2-1.7-3.8-2.9-5.4c-1.9-2.3-4.3-4.1-7.3-5.2c-3-1.1-6.5-1.7-10.5-1.7h-13.2
+			c7.4-5.7,16.7-9.2,26.7-9.2c10.1,0,19.4,3.4,26.7,9.2H164.3z"/>
+						<path className={styles.st1} d="M133.5,176.1L133.5,176.1l-7.9-25.7h-4.3v25.7v4.3v1.4c0.4,0.2,0.9,0.5,1.3,0.7c3.9,1.9,8.1,3.3,12.6,4
+			c0.5,0.1,1.1,0.2,1.6,0.2l-0.4-1.3L133.5,176.1z M122.5,181.1v-29.3h2l10.1,33.3C130.4,184.4,126.3,183,122.5,181.1z"/>
+						<path className={styles.st1} d="M133.6,130c0-5.4-2-8.1-6-8.1h-6.3v16.4h6C131.5,138.2,133.6,135.5,133.6,130z M122.5,123.2l5,0
+			c0.9,0,1.5,0.1,2.1,0.4c0.4,0.2,0.8,0.4,1.1,0.8c0.5,0.5,0.8,1.2,1.1,2.1c0.3,0.9,0.4,2.1,0.4,3.6c0,1.3-0.1,2.4-0.4,3.3
+			c-0.2,0.7-0.4,1.2-0.7,1.7c-0.4,0.7-0.9,1.1-1.5,1.5c-0.6,0.3-1.4,0.5-2.5,0.5h-4.7V123.2z"/>
+					</g>
+				</g>
+			</svg>
+
+			<h1 className={styles.siteHeader}>Risk-First</h1>
+			<p className={styles.lead}> Exploring the risks that ruin software projects </p>
+		</section>
+	)
+}
diff --git a/src/components/front/NewSplashTop/styles.module.css b/src/components/front/NewSplashTop/styles.module.css
@@ -0,0 +1,72 @@
+
+.siteHeader {
+	font-family: Geomanist;
+	font-weight: 600;
+    color: rgb(245, 62, 121);
+    font-size: 6rem;
+    text-transform: uppercase;
+}
+
+.lead {
+	font-family: Geomanist;
+	font-weight: 400;
+	font-size: 1.5rem;
+}
+
+section.nst {
+	margin: auto;
+	max-width: 1200px;
+	text-align: center;
+}
+
+svg.logo {
+	height: calc(70vh);
+	width: 100%;
+}
+
+@keyframes change {
+	100% {
+		stroke-dashoffset: 0;
+	}	
+	0% {
+		fill: white;
+		stroke-dashoffset: 700;
+	}
+}
+
+@keyframes change-dark {
+	100% {
+		stroke-dashoffset: 0;
+	}	
+	0% {
+		fill: black;
+		stroke-dashoffset: 700;
+	}
+}
+
+.st1 {
+	animation-direction: normal;
+	animation-duration: 4s;
+	animation-name: change; 
+	animation-timing-function: ease-in-out;
+	animation-fill-mode: both;
+	fill: black;
+	opacity: 1;
+	stroke: black;
+	stroke-width: .1;
+	stroke-dasharray: 700;
+}
+
+html[data-theme=dark] .st1 {
+  fill: white;
+  stroke: white;	
+}
+
+html[data-theme=dark] .st1 {
+  animation-name: change-dark; 
+}
+
+div.footerImage {
+	width: 3rem;
+	margin: auto;
+}
diff --git a/src/pages/index.md b/src/pages/index.md
@@ -3,13 +3,13 @@ title: Welcome to Risk First!
 hide_table_of_contents: true
 ---
 
-import styles from './index.module.css';
 
-<h1 className={styles.siteHeader}>Risk-First</h1>
-<p className={styles.lead}> Exploring the risks that ruin software projects </p>
+import NewSplashTop from "../components/front/NewSplashTop";
 
+<NewSplashTop />
+
 
-<div className={styles.frontPageContent}>
+<div>
   <BoxOut title="Start Here"  image="/img/R1_logo_grue.svg">
    <TagList tag="Front" />
   </BoxOut>
@@ -18,4 +18,4 @@ import styles from './index.module.css';
     <TagList tag="Popular" />
   </BoxOut>
 
-</div>
+</div>
diff --git a/src/pages/index.md.copy b/src/pages/index.md.copy
@@ -0,0 +1,50 @@
+---
+title: Welcome to Risk First!
+hide_table_of_contents: true
+---
+
+import styles from './index.module.css';
+
+import NewSplashTop from "../components/front/NewSplashTop";
+<!-- import UseCases from "../components/UseCases";
+import Benefits from "../components/Benefits";
+import Parts from "../components/Parts";
+import WhatIsIt from "../components/WhatIsIt";
+
+import UserShowcase from "../components/UserShowcase";
+import Conformance from "../components/Conformance";
+import Training from "../components/Training"
+import GetInvolved from "../components/GetInvolved" -->
+
+
+
+<h1 className={styles.siteHeader}>Risk-First</h1>
+<p className={styles.lead}> Exploring the risks that ruin software projects </p>
+
+<NewSplashTop />
+    <!-- <WhatIsIt />
+    <Benefits />
+    <UseCases />
+    <Parts />
+
+
+    <UserShowcase />
+    <Conformance />
+    <Training />
+
+    <GetInvolved />
+ -->
+
+
+<div className={styles.frontPageContent}>
+  <BoxOut title="Start Here"  image="/img/R1_logo_grue.svg">
+   <TagList tag="Front" />
+  </BoxOut>
+
+  <BoxOut title="Popular" image="/img/R1_logo_grue.svg">
+    <TagList tag="Popular" />
+  </BoxOut>
+
+</div>
+
+index.js
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -22,19 +22,6 @@
   justify-content: center;
 }
 
-.siteHeader {
-	font-family: Geomanist;
-	font-weight: 600;
-    color: rgb(245, 62, 121);
-    font-size: 6rem;
-    text-transform: uppercase;
-}
-
-.lead {
-	font-family: Geomanist;
-	font-weight: 400;
-	font-size: 1.5rem;
-}
 
 .frontPageContent {
 	display: flex;