commit 0241a75f59a5f4d4578e7ca395e27371bab69c4a
parent 7e3edb87689b6c967d8b77b0df291ac4d9d46b0f
Author: George Francis <georgedoescode@gmail.com>
Date: Wed, 8 Jul 2020 20:35:53 +0100
add squircle explosion
Diffstat:
6 files changed, 104 insertions(+), 14 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -2,6 +2,7 @@
import TheHeader from './components/TheHeader.vue';
import TheGenerator from './components/TheGenerator.vue';
import TheWaveBackground from './components/TheWaveBackground.vue';
+import TheSquircleExplosion from './components/TheSquircleExplosion.vue';
export default {
name: 'App',
@@ -9,6 +10,7 @@ export default {
TheHeader,
TheGenerator,
TheWaveBackground,
+ TheSquircleExplosion,
},
};
</script>
@@ -17,6 +19,7 @@ export default {
<div class="app">
<TheHeader class="app__header" />
<TheWaveBackground class="app__background" />
+ <TheSquircleExplosion />
<div class="app__content">
<TheGenerator />
<p class="about-text">
@@ -27,6 +30,12 @@ export default {
corrupti sit. Ipsa dicta tenetur dolores eligendi enim quisquam
adipisci magni! Commodi voluptates neque maiores est!
</p>
+ <p class="about-text">
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+ Aperiam laborum eos ipsum hic quod velit perferendis in quasi
+ officiis? Dicta, sint quae accusantium saepe quia itaque rerum
+ quod ratione libero.
+ </p>
</div>
</div>
</template>
@@ -63,24 +72,22 @@ export default {
.generator {
grid-row: 1;
grid-column: 2;
- margin-bottom: var(--spacing-8);
+ margin-bottom: var(--spacing-9);
+}
+
+.squircle-explosion {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 540px;
}
.about-text {
- grid-row: 2;
grid-column: -1 / 1;
font-size: var(--font-size-3);
line-height: 1.75;
width: 50%;
-}
-
-.app__bb {
- position: absolute;
- top: 2rem;
- left: 0;
- width: 100%;
- opacity: 0.1;
-
- /* z-index: -1; */
+ margin-bottom: var(--spacing-5);
}
</style>
diff --git a/src/assets/img/squircle-01.svg b/src/assets/img/squircle-01.svg
@@ -0,0 +1 @@
+<svg data-v-48b4e325="" id="squircleSVG" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="#1f2933"><polygon data-v-48b4e325="" points="100,0,99.8748694630452,56.21069869923991,99.49789545402116,66.76251786992444,98.86420797922456,73.73043487425795,97.96526050854104,78.9958180671364,96.78810706900782,83.21091377392018,95.3142086664429,86.68488669449243,93.51751515352032,89.589716250565,91.36134787851631,92.03090601471254,88.79315601205725,94.07749859493309,85.73520788711693,95.77668171210088,82.06676856007053,97.16160743246651,77.5861836199898,98.25587585758605,71.91681925855985,99.07623310340361,64.2083106420158,99.63424144856097,51.57176188978359,99.93731575000014,-41.33747417785771,99.98933837110386,-59.91236540143983,99.79096574441616,-69.0403656415356,99.33967916183349,-75.40461421337857,98.6295882522757,-80.31777138478631,97.65095401016369,-84.29265872549145,96.38934654423143,-87.58642958573144,94.82427330456424,-90.3469604030225,92.9269738503016,-92.66694763678717,90.65680728023437,-94.60794169707476,87.95509160146621,-96.21241384966255,84.73395081327104,-97.5103626868381,80.85437385797786,-98.52316375262944,76.07769767433962,-99.26591030001552,69.93791520806151,-99.74886798853046,61.29106223158385,-99.97837174111993,45.15676803346763,-99.95734210719316,-49.15357727776138,-99.6855138323485,-63.0215932485416,-99.15941534549681,-71.09927804411129,-98.37209574919012,-76.95905122935235,-97.31255275155681,-81.56114888391453,-95.96475742709191,-85.31696439409117,-94.3060791045238,-88.44283216433146,-92.30474583054637,-91.0668261270096,-89.91564350615042,-93.27078647764476,-87.07304113787112,-95.10976329075878,-83.6771340434635,-96.62205886053856,-79.56676553553856,-97.83483910984813,-74.45643751705515,-98.76745085543615,-67.75876598754147,-99.43345652771303,-57.86983789309485,-99.84190055433606,-33.3623100313435,-99.9980813838869,54.38770732886563,-99.90397700317317,65.71687596167463,-99.5583987427852,72.97941220850346,-98.95689917624047,78.40911585721996,-98.09141874006421,82.73347427020717,-96.94960990294669,86.28807477358554,-95.51371261589152,89.25671641092312,-93.75874574670216,91.75103615297759,-91.64957603585192,93.84360296965649,-89.13601401940218,95.58379430972468,-86.14417551409363,97.00620937547701,-82.56011907862491,98.13545821710262,-78.19555923824679,98.98902930640386,-72.70472277575925,99.57906056168089,-65.33031421962527,99.91344010118115,-53.68913529873352" transform="translate(100 100)"></polygon></svg>
+\ No newline at end of file
diff --git a/src/assets/img/squircle-02.svg b/src/assets/img/squircle-02.svg
@@ -0,0 +1 @@
+<svg data-v-48b4e325="" id="squircleSVG" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="#1f2933"><polygon data-v-48b4e325="" points="100,0,99.27677927811736,3.5454818566787756,97.12408186127406,9.611657851849277,93.5925133577962,17.089723889666082,88.76546747466554,25.49180484895216,82.75774984648432,34.456967278274625,75.71375102448377,43.6768704120858,67.80528234171975,52.873214710749174,59.22924838646564,61.79025474827987,50.205428901495594,70.19307523351286,40.97482730862196,77.8683693793623,31.799429039587878,84.62631998061269,22.965130998207652,90.30288613844093,14.792164123168755,94.76210579786107,7.666319572879081,97.89817621231157,2.1519045692329066,99.63715896739879,-0.5969072846227469,99.93820925899423,-5.131453342519781,98.79426684054228,-11.67519782187892,96.23217626195229,-19.465399343181645,92.31223094638852,-28.066190892683192,87.12716206159963,-37.136046427432326,80.80062158825602,-46.37676195332798,73.485242905343,-55.51704643226443,65.36040756701813,-64.30726604023538,56.62991554926173,-72.51866831372578,47.51987359879037,-79.94458409782568,38.27734229560862,-86.40248101350365,29.170772611820396,-91.73628646421335,20.494478710372736,-95.8186452972399,12.582984596132018,-98.55290370783213,5.854902933028711,-99.87468381465197,0.9963073609829133,-99.75296075340205,-1.6289726712183445,-98.19058906944977,-6.880493434435817,-95.22425409557094,-13.843550303252075,-90.92385051837094,-21.909676785824058,-85.3913170615005,-30.680321851896014,-78.75898582945351,-39.82953046668402,-71.18754132246588,-49.06795076482095,-62.86373465802664,-58.130888487602384,-53.99807778498447,-66.77476972897767,-44.82288287256339,-74.77711410881605,-35.591291817644574,-81.93806880285229,-26.578570368922012,-88.08258646352957,-18.088575402623754,-93.06275665602442,-10.47345053741033,-96.76000118962149,-4.196736343029235,-99.08695005302664,-0.17229287851046268,-99.98887809957985,2.9286739567630544,-99.44462545461492,8.771109841408409,-97.46695729449061,16.10492161278658,-94.10234654984006,24.41362183831618,-89.43018941096611,33.32651691267118,-83.56149077383515,42.53046879397815,-76.63708787660553,51.74403882795785,-68.82551998249993,60.70885519939432,-60.320708852341795,69.18741305019658,-51.339707255814794,76.96364044913693,-42.12094241725546,83.84468966969453,-32.92373120742905,89.66319904485016,-24.030662222622997,94.27960868986915,-15.75667147298539,97.58427812910405,-8.476204615338395,99.49924416582459,-2.717215682514804" transform="translate(100 100)"></polygon></svg>
+\ No newline at end of file
diff --git a/src/assets/img/squircle-03.svg b/src/assets/img/squircle-03.svg
@@ -0,0 +1 @@
+<svg data-v-48b4e325="" id="squircleSVG" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="#1f2933"><polygon data-v-48b4e325="" points="100,0,99.68648898800205,23.582334363791354,98.74556622871997,36.304180059151555,97.17596233137199,46.56715844158473,94.97521302728322,55.36149081758184,92.13908130768387,63.07034138116534,88.66062226037036,69.8830944630685,84.52871854988177,75.9051513196734,79.72577352471085,81.19917048023362,74.22397040302154,85.80381779611956,67.97890777507676,89.74341651511418,60.9180036974395,93.0333637610859,52.91724383267269,95.6833654358495,43.74759265322681,97.69945218668303,32.92078657172782,99.0852649801416,19.000984224324892,99.84287240298558,-10.910713014108289,99.97326452180573,-27.672447006714933,99.47660201860094,-39.49087525100662,98.35225767279134,-49.26448810780366,96.59865618543022,-57.714260222824485,94.21288891415821,-65.1467561800911,91.19004412149529,-71.72010805724484,87.52213965836397,-77.52439035273304,83.19645361965362,-82.613864008714,78.19287793615595,-87.02225437634125,72.47957481249688,-90.77084097119142,66.00545479385299,-93.87309146759381,58.686129682704525,-96.33746927572282,50.37474003641673,-98.16919879810891,40.791034563475385,-99.37139376120169,29.297239665604497,-99.94576869638287,13.617619456466597,-99.89305536106777,-16.844981796251886,-99.21318889610794,-31.416083754104,-97.90529107010929,-42.51107095320533,-95.96744819062445,-51.8510888488611,-93.39625082719067,-59.981128504769984,-90.18602275524395,-67.1503084351661,-86.32760452427479,-73.49175168719064,-81.80644833463954,-79.08279465372573,-76.59957310455616,-83.97054925678441,-70.67049800994477,-88.18446862767746,-63.96029571255857,-91.74317405462105,-56.37042318052836,-94.65843845230249,-47.725636747396685,-96.93763080021172,-37.67810033932169,-98.58526412262589,-25.3669939399162,-99.60398482532452,-6.373882414709889,-99.99518849313911,21.710958716054698,-99.75936427910584,34.89501667843115,-98.8962203691181,45.386720733802285,-97.40460878624553,54.33611002435887,-95.28223864399843,62.16673008918121,-92.5251348025849,69.08360543475578,-89.12675431224254,75.19958398499182,-85.07660070724243,80.581329093027,-80.35804593889173,85.26983434957765,-74.94481485085599,89.29084595520932,-68.79504561394508,92.66065888500002,-61.840573199959906,95.38955585574188,-53.96573469746225,97.48394135561901,-44.95951572050423,98.94770025720615,-34.38253736032717,99.78306352632377,-21.018375463913657" transform="translate(100 100)"></polygon></svg>
+\ No newline at end of file
diff --git a/src/components/TheSquircleExplosion.vue b/src/components/TheSquircleExplosion.vue
@@ -0,0 +1,79 @@
+<script>
+import Squircle1 from '@/assets/img/squircle-01.svg';
+import Squircle2 from '@/assets/img/squircle-02.svg';
+import Squircle3 from '@/assets/img/squircle-03.svg';
+
+export default {
+ name: 'TheSquircleExplosion',
+ components: {
+ Squircle1,
+ Squircle2,
+ Squircle3,
+ },
+};
+</script>
+
+<template>
+ <div class="squircle-explosion">
+ <Squircle1 class="squircle-explosion__squircle" />
+ <Squircle2 class="squircle-explosion__squircle" />
+ <Squircle3 class="squircle-explosion__squircle" />
+ <Squircle1 class="squircle-explosion__squircle" />
+ <Squircle2 class="squircle-explosion__squircle" />
+ </div>
+</template>
+
+<style>
+.squircle-explosion {
+ position: relative;
+}
+
+.squircle-explosion__squircle {
+ position: absolute;
+ width: 64px;
+ height: 64px;
+ fill: var(--grey-100);
+}
+
+.squircle-explosion__squircle:nth-of-type(1) {
+ top: var(--spacing-10);
+ left: var(--spacing-7);
+ transform: rotate(32deg);
+}
+
+.squircle-explosion__squircle:nth-of-type(2) {
+ top: var(--spacing-11);
+ right: var(--spacing-5);
+ transform: rotate(32deg);
+}
+
+.squircle-explosion__squircle:nth-of-type(3) {
+ width: 48px;
+ height: 48px;
+ top: var(--spacing-13);
+ left: var(--spacing-9);
+ transform: rotate(54deg);
+}
+
+.squircle-explosion__squircle:nth-of-type(4) {
+ width: 32px;
+ height: 32px;
+ top: var(--spacing-13);
+ right: var(--spacing-8);
+ transform: rotate(128deg);
+}
+
+.squircle-explosion__squircle:nth-of-type(5) {
+ width: 24px;
+ height: 24px;
+ top: var(--spacing-9);
+ right: var(--spacing-12);
+ transform: rotate(128deg);
+}
+
+@media only screen and (max-width: 56rem) {
+ .squircle-explosion {
+ display: none;
+ }
+}
+</style>
diff --git a/src/components/test.svg b/src/components/test.svg
@@ -1 +0,0 @@
-<svg data-v-48b4e325="" id="squircleSVG" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="#1f2933"><polygon data-v-48b4e325="" points="50,0,49.9374347315226,28.105349349619956,49.74894772701058,33.38125893496222,49.43210398961228,36.865217437128976,48.98263025427052,39.4979090335682,48.39405353450391,41.60545688696009,47.65710433322145,43.34244334724622,46.75875757676016,44.7948581252825,45.680673939258156,46.01545300735627,44.396578006028626,47.038749297466545,42.867603943558464,47.88834085605044,41.033384280035264,48.580803716233255,38.7930918099949,49.127937928793024,35.95840962927993,49.538116551701805,32.1041553210079,49.817120724280485,25.785880944891794,49.96865787500007,-20.668737088928854,49.99466918555193,-29.956182700719914,49.89548287220808,-34.5201828207678,49.669839580916744,-37.70230710668928,49.31479412613785,-40.158885692393156,48.825477005081844,-42.146329362745725,48.194673272115715,-43.79321479286572,47.41213665228212,-45.17348020151125,46.4634869251508,-46.333473818393585,45.32840364011719,-47.30397084853738,43.977545800733104,-48.10620692483128,42.36697540663552,-48.75518134341905,40.42718692898893,-49.26158187631472,38.03884883716981,-49.63295515000776,34.968957604030756,-49.87443399426523,30.645531115791925,-49.989185870559965,22.578384016733814,-49.97867105359658,-24.57678863888069,-49.84275691617425,-31.5107966242708,-49.579707672748405,-35.54963902205564,-49.18604787459506,-38.47952561467618,-48.656276375778404,-40.78057444195726,-47.982378713545955,-42.658482197045586,-47.1530395522619,-44.22141608216573,-46.15237291527318,-45.5334130635048,-44.95782175307521,-46.63539323882238,-43.53652056893556,-47.55488164537939,-41.83856702173175,-48.31102943026928,-39.78338276776928,-48.91741955492407,-37.228218758527575,-49.383725427718076,-33.87938299377073,-49.71672826385652,-28.934918946547423,-49.92095027716803,-16.68115501567175,-49.99904069194345,27.193853664432815,-49.951988501586584,32.858437980837316,-49.7791993713926,36.48970610425173,-49.478449588120235,39.20455792860998,-49.04570937003211,41.366737135103584,-48.474804951473345,43.14403738679277,-47.75685630794576,44.62835820546156,-46.87937287335108,45.875518076488795,-45.82478801792596,46.921801484828244,-44.56800700970109,47.79189715486234,-43.072087757046816,48.50310468773851,-41.280059539312454,49.06772910855131,-39.09777961912339,49.49451465320193,-36.352361387879625,49.789530280840445,-32.66515710981263,49.956720050590576,-26.84456764936676" transform="translate(100 100)"></polygon></svg>
-\ No newline at end of file
