Skip to content

Commit e241fcb

Browse files
robmoffatrobmoffat
committed
Animated SVG logo
1 parent c5dd684 commit e241fcb

File tree

5 files changed

+186
-18
lines changed

5 files changed

+186
-18
lines changed

‎src/components/front/NewSplashTop/index.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import styles from './styles.module.css'
3+
4+
export default function NewSplashTop() {
5+
return (
6+
7+
<section className={styles.nst}>
8+
<svg version="1.1" id="Layer_1" x="0px" y="0px" className={styles.logo}
9+
viewBox="50 50 180 180" width="500px" height="500px" style={{enableBackground: "new 0 0 283.5 283.5;"}}>
10+
<g>
11+
<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
12+
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
13+
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
14+
c12.9,12.9,20.8,30.6,20.8,50.2C213.5,161.9,205.5,179.7,192.6,192.5z"/>
15+
<g>
16+
<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
17+
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"/>
18+
<path className={styles.st1} d="M87.8,108.1l1.1-1.7l10.7,6.9l-1.1,1.7L87.8,108.1z" />
19+
<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
20+
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
21+
c-2.1,1.5-4,0.8-5,0.1L107.8,99.2z"/>
22+
<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" />
23+
</g>
24+
<g>
25+
<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" />
26+
<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
27+
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
28+
c-1.1,2.4-3.1,2.7-4.3,2.6L196.9,169.1z"/>
29+
<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
30+
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"/>
31+
<path className={styles.st1} d="M159.3,191l1.9-0.7l4.5,12l-1.9,0.7L159.3,191z" />
32+
<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" />
33+
</g>
34+
<g>
35+
<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
36+
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"/>
37+
<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
38+
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"/>
39+
<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
40+
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
41+
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
42+
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
43+
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
44+
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
45+
c7.4-5.7,16.7-9.2,26.7-9.2c10.1,0,19.4,3.4,26.7,9.2H164.3z"/>
46+
<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
47+
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"/>
48+
<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
49+
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
50+
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"/>
51+
</g>
52+
</g>
53+
</svg>
54+
55+
<h1 className={styles.siteHeader}>Risk-First</h1>
56+
<p className={styles.lead}> Exploring the risks that ruin software projects </p>
57+
</section>
58+
)
59+
}

‎src/components/front/NewSplashTop/styles.module.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
.siteHeader {
3+
font-family: Geomanist;
4+
font-weight: 600;
5+
color: rgb(245, 62, 121);
6+
font-size: 6rem;
7+
text-transform: uppercase;
8+
}
9+
10+
.lead {
11+
font-family: Geomanist;
12+
font-weight: 400;
13+
font-size: 1.5rem;
14+
}
15+
16+
section.nst {
17+
margin: auto;
18+
max-width: 1200px;
19+
text-align: center;
20+
}
21+
22+
svg.logo {
23+
height: calc(70vh);
24+
width: 100%;
25+
}
26+
27+
@keyframes change {
28+
100% {
29+
stroke-dashoffset: 0;
30+
}
31+
0% {
32+
fill: white;
33+
stroke-dashoffset: 700;
34+
}
35+
}
36+
37+
@keyframes change-dark {
38+
100% {
39+
stroke-dashoffset: 0;
40+
}
41+
0% {
42+
fill: black;
43+
stroke-dashoffset: 700;
44+
}
45+
}
46+
47+
.st1 {
48+
animation-direction: normal;
49+
animation-duration: 4s;
50+
animation-name: change;
51+
animation-timing-function: ease-in-out;
52+
animation-fill-mode: both;
53+
fill: black;
54+
opacity: 1;
55+
stroke: black;
56+
stroke-width: .1;
57+
stroke-dasharray: 700;
58+
}
59+
60+
html[data-theme=dark] .st1 {
61+
fill: white;
62+
stroke: white;
63+
}
64+
65+
html[data-theme=dark] .st1 {
66+
animation-name: change-dark;
67+
}
68+
69+
div.footerImage {
70+
width: 3rem;
71+
margin: auto;
72+
}

‎src/pages/index.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ title: Welcome to Risk First!
33
hide_table_of_contents: true
44
---
55

6-
import styles from './index.module.css';
76

8-
<h1 className={styles.siteHeader}>Risk-First</h1>
9-
<p className={styles.lead}> Exploring the risks that ruin software projects </p>
7+
import NewSplashTop from "../components/front/NewSplashTop";
108

9+
<NewSplashTop />
10+
1111

12-
<div className={styles.frontPageContent}>
12+
<div>
1313
<BoxOut title="Start Here" image="/img/R1_logo_grue.svg">
1414
<TagList tag="Front" />
1515
</BoxOut>
@@ -18,4 +18,4 @@ import styles from './index.module.css';
1818
<TagList tag="Popular" />
1919
</BoxOut>
2020

21-
</div>
21+
</div>

‎src/pages/index.md.copy

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Welcome to Risk First!
3+
hide_table_of_contents: true
4+
---
5+
6+
import styles from './index.module.css';
7+
8+
import NewSplashTop from "../components/front/NewSplashTop";
9+
<!-- import UseCases from "../components/UseCases";
10+
import Benefits from "../components/Benefits";
11+
import Parts from "../components/Parts";
12+
import WhatIsIt from "../components/WhatIsIt";
13+
14+
import UserShowcase from "../components/UserShowcase";
15+
import Conformance from "../components/Conformance";
16+
import Training from "../components/Training"
17+
import GetInvolved from "../components/GetInvolved" -->
18+
19+
20+
21+
<h1 className={styles.siteHeader}>Risk-First</h1>
22+
<p className={styles.lead}> Exploring the risks that ruin software projects </p>
23+
24+
<NewSplashTop />
25+
<!-- <WhatIsIt />
26+
<Benefits />
27+
<UseCases />
28+
<Parts />
29+
30+
31+
<UserShowcase />
32+
<Conformance />
33+
<Training />
34+
35+
<GetInvolved />
36+
-->
37+
38+
39+
<div className={styles.frontPageContent}>
40+
<BoxOut title="Start Here" image="/img/R1_logo_grue.svg">
41+
<TagList tag="Front" />
42+
</BoxOut>
43+
44+
<BoxOut title="Popular" image="/img/R1_logo_grue.svg">
45+
<TagList tag="Popular" />
46+
</BoxOut>
47+
48+
</div>
49+
50+
index.js

‎src/pages/index.module.css

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,6 @@
2222
justify-content: center;
2323
}
2424

25-
.siteHeader {
26-
font-family: Geomanist;
27-
font-weight: 600;
28-
color: rgb(245, 62, 121);
29-
font-size: 6rem;
30-
text-transform: uppercase;
31-
}
32-
33-
.lead {
34-
font-family: Geomanist;
35-
font-weight: 400;
36-
font-size: 1.5rem;
37-
}
3825

3926
.frontPageContent {
4027
display: flex;

0 commit comments

Comments
 (0)