diff options
Diffstat (limited to 'themes/blowfish/exampleSite/content/docs/shortcodes')
15 files changed, 4943 insertions, 0 deletions
diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/abstract.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/abstract.jpg Binary files differnew file mode 100644 index 0000000..bb951a6 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/abstract.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/background.svg b/themes/blowfish/exampleSite/content/docs/shortcodes/background.svg new file mode 100644 index 0000000..a3dc3e7 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/background.svg @@ -0,0 +1,574 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative" + width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322"> + <defs> + <pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6" + patternUnits="userSpaceOnUse"> + <g transform="scale(1.35)"> + <g> + <line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488" + y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751" + y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751" + y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751" + y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512" + y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512" + y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512" + y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488" + y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488" + y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488" + y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787" + y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213" + y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213" + y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213" + y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213" + y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213" + y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213" + y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787" + y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787" + y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787" + y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191" + y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881" + y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881" + y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881" + y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808" + y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808" + y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808" + y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191" + y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191" + y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191" + y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665" + y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335" + y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335" + y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335" + y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335" + y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335" + y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335" + y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665" + y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665" + y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665" + y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188" + y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281" + y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281" + y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281" + y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281" + y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281" + y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281" + y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188" + y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188" + y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188" + y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814" + y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968" + y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968" + y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968" + y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968" + y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968" + y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968" + y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814" + y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814" + y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814" + y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317" + y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607" + y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539" + y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539" + y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539" + y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393" + y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393" + y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393" + y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607" + y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607" + y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607" + y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515" + y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485" + y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485" + y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485" + y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485" + y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485" + y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485" + y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515" + y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515" + y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515" + y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788" + y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214" + y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214" + y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214" + y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212" + y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212" + y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212" + y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788" + y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788" + y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788" + y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <animateTransform attributeName="transform" type="translate" values="0 0;-256 256" + keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform> + </g> + <g> + <line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417" + y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585" + y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585" + y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585" + y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582" + y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582" + y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582" + y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417" + y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417" + y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417" + y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353" + y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647" + y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647" + y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647" + y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647" + y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647" + y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647" + y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353" + y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353" + y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353" + y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353" + y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512" + y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449" + y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449" + y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449" + y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488" + y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488" + y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488" + y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512" + y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512" + y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512" + y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335" + y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567" + y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567" + y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567" + y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567" + y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567" + y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567" + y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335" + y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335" + y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335" + y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721" + y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279" + y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279" + y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279" + y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789" + y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789" + y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789" + y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721" + y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721" + y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721" + y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653" + y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347" + y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347" + y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347" + y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347" + y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347" + y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347" + y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653" + y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653" + y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653" + y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469" + y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454" + y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454" + y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454" + y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454" + y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454" + y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454" + y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469" + y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469" + y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469" + y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469" + y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989" + y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404" + y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404" + y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404" + y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404" + y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404" + y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404" + y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989" + y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989" + y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989" + y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771" + y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223" + y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223" + y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223" + y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223" + y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223" + y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223" + y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771" + y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771" + y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771" + y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <animateTransform attributeName="transform" type="translate" values="0 0;-256 256" + keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform> + </g> + <g> + <line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793" + y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204" + y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204" + y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204" + y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207" + y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207" + y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207" + y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793" + y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793" + y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793" + y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918" + y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808" + y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808" + y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808" + y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822" + y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822" + y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822" + y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918" + y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918" + y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918" + y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999" + y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727" + y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727" + y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727" + y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727" + y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727" + y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727" + y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999" + y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999" + y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999" + y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line> + <line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679" + y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932" + y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932" + y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932" + y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321" + y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321" + y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321" + y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679" + y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679" + y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679" + y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746" + y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425" + y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425" + y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425" + y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254" + y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254" + y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254" + y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746" + y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746" + y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746" + y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037" + y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744" + y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744" + y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744" + y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005" + y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005" + y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005" + y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037" + y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037" + y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037" + y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995" + y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line> + <line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738" + y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626" + y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626" + y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626" + y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262" + y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262" + y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262" + y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738" + y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738" + y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738" + y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284" + y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716" + y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716" + y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716" + y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716" + y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716" + y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716" + y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284" + y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284" + y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284" + y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282" + y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303" + y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303" + y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303" + y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303" + y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303" + y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303" + y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282" + y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282" + y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282" + y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973" + y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line> + <animateTransform attributeName="transform" type="translate" values="0 0;-256 256" + keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform> + </g> + </g> + </pattern> + </defs> + <rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect> +</svg>
\ No newline at end of file diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/featured.svg b/themes/blowfish/exampleSite/content/docs/shortcodes/featured.svg new file mode 100644 index 0000000..cb3807e --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/featured.svg @@ -0,0 +1,1308 @@ +<svg height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" + viewBox="0 0 600 600"> + <rect width="600" height="600" fill="transparent"></rect> + <mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse"> + <rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect> + </mask> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 0) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 0) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 0) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 0) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 0) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 0) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 60) rotate(90)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 60) rotate(90)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 60) rotate(90)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 60) rotate(90)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 60) rotate(90)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 120) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 120) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 120) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 120) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 120) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 120) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 180) rotate(0)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 180) rotate(0)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 180) rotate(0)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 180) rotate(0)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 180) rotate(0)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 240) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 240) rotate(90)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 240) rotate(90)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 240) rotate(90)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 240) rotate(90)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 240) rotate(90)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 300) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 300) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 300) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 300) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 300) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 300) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 360) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 360) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 360) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 360) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 360) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 420) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 420) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 420) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 420) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 420) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 420) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 480) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 480) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 480) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 480) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 480) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(0, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(0, 540) rotate(0)" fill="#caf0f8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(0, 540) rotate(0)" fill="#caf0f8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(0, 540) rotate(0)" fill="#caf0f8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(0, 540) rotate(0)" fill="#caf0f8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(0, 540) rotate(0)" fill="#caf0f8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 0) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 0) rotate(0)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 0) rotate(0)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 0) rotate(0)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 0) rotate(0)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 0) rotate(0)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 60) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 60) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 60) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 60) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 60) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 120) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 120) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 120) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 120) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 120) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 120) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 180) rotate(0)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 180) rotate(0)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 180) rotate(0)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 180) rotate(0)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 180) rotate(0)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 240) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 240) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 240) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 240) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 240) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 240) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 300) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 300) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 300) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 300) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 300) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 300) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 360) rotate(90)" fill="#03045e" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 360) rotate(90)" fill="#03045e" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 360) rotate(90)" fill="#03045e" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 360) rotate(90)" fill="#03045e" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 360) rotate(90)" fill="#03045e" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 420) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 420) rotate(90)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 420) rotate(90)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 420) rotate(90)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 420) rotate(90)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 420) rotate(90)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 480) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 480) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 480) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 480) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 480) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(60, 540) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(60, 540) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(60, 540) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(60, 540) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(60, 540) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(60, 540) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 0) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 0) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 0) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 0) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 0) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 0) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 60) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 60) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 60) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 60) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 60) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 120) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 120) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 120) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 120) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 120) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 120) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 180) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 180) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 180) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 180) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 180) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 240) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 240) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 240) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 240) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 240) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 240) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 300) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 300) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 300) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 300) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 300) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 300) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 360) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 360) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 360) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 360) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 360) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 420) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 420) rotate(0)" fill="#03045e" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 420) rotate(0)" fill="#03045e" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 420) rotate(0)" fill="#03045e" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 420) rotate(0)" fill="#03045e" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 420) rotate(0)" fill="#03045e" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 480) rotate(90)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 480) rotate(90)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 480) rotate(90)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 480) rotate(90)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 480) rotate(90)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(120, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(120, 540) rotate(0)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(120, 540) rotate(0)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(120, 540) rotate(0)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(120, 540) rotate(0)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(120, 540) rotate(0)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 0) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 0) rotate(0)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 0) rotate(0)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 0) rotate(0)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 0) rotate(0)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 0) rotate(0)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 60) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 60) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 60) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 60) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 60) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 120) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 120) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 120) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 120) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 120) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 120) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 180) rotate(0)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 180) rotate(0)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 180) rotate(0)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 180) rotate(0)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 180) rotate(0)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 240) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 240) rotate(0)" fill="#03045e" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 240) rotate(0)" fill="#03045e" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 240) rotate(0)" fill="#03045e" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 240) rotate(0)" fill="#03045e" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 240) rotate(0)" fill="#03045e" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 300) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 300) rotate(0)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 300) rotate(0)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 300) rotate(0)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 300) rotate(0)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 300) rotate(0)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 360) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 360) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 360) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 360) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 360) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 420) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 420) rotate(90)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 420) rotate(90)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 420) rotate(90)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 420) rotate(90)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 420) rotate(90)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 480) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 480) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 480) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 480) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 480) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(180, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(180, 540) rotate(0)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(180, 540) rotate(0)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(180, 540) rotate(0)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(180, 540) rotate(0)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(180, 540) rotate(0)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 0) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 0) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 0) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 0) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 0) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 0) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 60) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 60) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 60) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 60) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 60) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 60) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 120) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 120) rotate(0)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 120) rotate(0)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 120) rotate(0)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 120) rotate(0)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 120) rotate(0)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 180) rotate(0)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 180) rotate(0)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 180) rotate(0)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 180) rotate(0)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 180) rotate(0)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 240) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 240) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 240) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 240) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 240) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 240) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 300) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 300) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 300) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 300) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 300) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 300) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 360) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 360) rotate(0)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 360) rotate(0)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 360) rotate(0)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 360) rotate(0)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 360) rotate(0)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 420) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 420) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 420) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 420) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 420) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 420) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 480) rotate(90)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 480) rotate(90)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 480) rotate(90)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 480) rotate(90)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 480) rotate(90)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(240, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(240, 540) rotate(0)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(240, 540) rotate(0)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(240, 540) rotate(0)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(240, 540) rotate(0)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(240, 540) rotate(0)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 0) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 0) rotate(90)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 0) rotate(90)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 0) rotate(90)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 0) rotate(90)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 0) rotate(90)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 60) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 60) rotate(0)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 60) rotate(0)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 60) rotate(0)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 60) rotate(0)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 60) rotate(0)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 120) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 120) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 120) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 120) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 120) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 120) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 180) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 180) rotate(90)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 180) rotate(90)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 180) rotate(90)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 180) rotate(90)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 180) rotate(90)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 240) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 240) rotate(0)" fill="#03045e" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 240) rotate(0)" fill="#03045e" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 240) rotate(0)" fill="#03045e" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 240) rotate(0)" fill="#03045e" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 240) rotate(0)" fill="#03045e" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 300) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 300) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 300) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 300) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 300) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 300) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 360) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 360) rotate(0)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 360) rotate(0)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 360) rotate(0)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 360) rotate(0)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 360) rotate(0)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 420) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 420) rotate(90)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 420) rotate(90)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 420) rotate(90)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 420) rotate(90)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 420) rotate(90)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 480) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 480) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 480) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 480) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 480) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 480) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(300, 540) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(300, 540) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(300, 540) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(300, 540) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(300, 540) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(300, 540) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 0) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 0) rotate(90)" fill="#00b4d8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 0) rotate(90)" fill="#00b4d8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 0) rotate(90)" fill="#00b4d8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 0) rotate(90)" fill="#00b4d8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 0) rotate(90)" fill="#00b4d8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 60) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 60) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 60) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 60) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 60) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 60) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 120) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 120) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 120) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 120) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 120) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 120) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 180) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 180) rotate(90)" fill="#03045e" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 180) rotate(90)" fill="#03045e" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 180) rotate(90)" fill="#03045e" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 180) rotate(90)" fill="#03045e" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 180) rotate(90)" fill="#03045e" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 240) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 240) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 240) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 240) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 240) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 240) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 300) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 300) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 300) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 300) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 300) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 300) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 360) rotate(90)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 360) rotate(90)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 360) rotate(90)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 360) rotate(90)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 360) rotate(90)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 420) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 420) rotate(0)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 420) rotate(0)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 420) rotate(0)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 420) rotate(0)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 420) rotate(0)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 480) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 480) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 480) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 480) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 480) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(360, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(360, 540) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(360, 540) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(360, 540) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(360, 540) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(360, 540) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 0) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 0) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 0) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 0) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 0) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 0) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 60) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 60) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 60) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 60) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 60) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 120) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 120) rotate(90)" fill="#caf0f8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 120) rotate(90)" fill="#caf0f8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 120) rotate(90)" fill="#caf0f8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 120) rotate(90)" fill="#caf0f8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 120) rotate(90)" fill="#caf0f8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 180) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 180) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 180) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 180) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 180) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 240) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 240) rotate(90)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 240) rotate(90)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 240) rotate(90)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 240) rotate(90)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 240) rotate(90)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 300) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 300) rotate(0)" fill="#caf0f8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 300) rotate(0)" fill="#caf0f8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 300) rotate(0)" fill="#caf0f8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 300) rotate(0)" fill="#caf0f8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 300) rotate(0)" fill="#caf0f8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 360) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 360) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 360) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 360) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 360) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 420) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 420) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 420) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 420) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 420) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 420) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 480) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 480) rotate(0)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 480) rotate(0)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 480) rotate(0)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 480) rotate(0)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 480) rotate(0)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(420, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(420, 540) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(420, 540) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(420, 540) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(420, 540) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(420, 540) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 0) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 0) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 0) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 0) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 0) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 0) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 60) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 60) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 60) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 60) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 60) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 120) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 120) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 120) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 120) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 120) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 120) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 180) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 180) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 180) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 180) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 180) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 240) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 240) rotate(0)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 240) rotate(0)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 240) rotate(0)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 240) rotate(0)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 240) rotate(0)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 300) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 300) rotate(90)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 300) rotate(90)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 300) rotate(90)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 300) rotate(90)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 300) rotate(90)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 360) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 360) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 360) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 360) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 360) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 360) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 420) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 420) rotate(0)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 420) rotate(0)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 420) rotate(0)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 420) rotate(0)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 420) rotate(0)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 480) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 480) rotate(90)" fill="#caf0f8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 480) rotate(90)" fill="#caf0f8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 480) rotate(90)" fill="#caf0f8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 480) rotate(90)" fill="#caf0f8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 480) rotate(90)" fill="#caf0f8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(480, 540) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(480, 540) rotate(90)" fill="#03045e" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(480, 540) rotate(90)" fill="#03045e" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(480, 540) rotate(90)" fill="#03045e" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(480, 540) rotate(90)" fill="#03045e" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(480, 540) rotate(90)" fill="#03045e" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 0) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 0) rotate(90)" fill="#0096c7" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 0) rotate(90)" fill="#0096c7" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 0) rotate(90)" fill="#0096c7" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 0) rotate(90)" fill="#0096c7" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 0) rotate(90)" fill="#0096c7" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 60) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 60) rotate(90)" fill="#023e8a" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 60) rotate(90)" fill="#023e8a" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 60) rotate(90)" fill="#023e8a" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 60) rotate(90)" fill="#023e8a" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 60) rotate(90)" fill="#023e8a" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 120) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 120) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 120) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 120) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 120) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 120) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 180) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 180) rotate(0)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 180) rotate(0)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 180) rotate(0)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 180) rotate(0)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 180) rotate(0)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 240) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 240) rotate(90)" fill="#ade8f4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 240) rotate(90)" fill="#ade8f4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 240) rotate(90)" fill="#ade8f4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 240) rotate(90)" fill="#ade8f4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 240) rotate(90)" fill="#ade8f4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 300) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 300) rotate(90)" fill="#0077b6" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 300) rotate(90)" fill="#0077b6" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 300) rotate(90)" fill="#0077b6" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 300) rotate(90)" fill="#0077b6" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 300) rotate(90)" fill="#0077b6" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 360) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 360) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 360) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 360) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 360) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 360) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 420) rotate(90)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 420) rotate(90)" fill="#caf0f8" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 420) rotate(90)" fill="#caf0f8" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 420) rotate(90)" fill="#caf0f8" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 420) rotate(90)" fill="#caf0f8" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 420) rotate(90)" fill="#caf0f8" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 480) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 480) rotate(0)" fill="#90e0ef" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 480) rotate(0)" fill="#90e0ef" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 480) rotate(0)" fill="#90e0ef" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 480) rotate(0)" fill="#90e0ef" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 480) rotate(0)" fill="#90e0ef" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> + <g name="doubleStripes" mask="url(#mask)" mix-blend-mode="multiply"> + <rect transform="translate(540, 540) rotate(0)" width="60" height="120" fill="none"></rect> + <path transform="translate(540, 540) rotate(0)" fill="#48cae4" + d="M48.0004 120.462H52.0004L52.0004 0.461672L48.0004 0.461672L48.0004 120.462Z"></path> + <path transform="translate(540, 540) rotate(0)" fill="#48cae4" + d="M38.0004 0.461671L38.0004 120.462H42.0004L42.0004 0.461671L38.0004 0.461671Z"></path> + <path transform="translate(540, 540) rotate(0)" fill="#48cae4" + d="M28.0004 0.461671L32.0004 0.461671L32.0004 120.462H28.0004L28.0004 0.461671Z"></path> + <path transform="translate(540, 540) rotate(0)" fill="#48cae4" + d="M18.0004 0.46167L18.0004 120.462H22.0004L22.0004 0.461671L18.0004 0.46167Z"></path> + <path transform="translate(540, 540) rotate(0)" fill="#48cae4" + d="M8.00037 0.46167L8.00037 120.462H12.0004L12.0004 0.46167L8.00037 0.46167Z"></path> + </g> +</svg>
\ No newline at end of file diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/01.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/01.jpg Binary files differnew file mode 100644 index 0000000..ff40ba6 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/01.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/02.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/02.jpg Binary files differnew file mode 100644 index 0000000..0a8a6a4 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/02.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/03.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/03.jpg Binary files differnew file mode 100644 index 0000000..daa5e93 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/03.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/04.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/04.jpg Binary files differnew file mode 100644 index 0000000..ab56bc4 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/04.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/05.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/05.jpg Binary files differnew file mode 100644 index 0000000..8d844dc --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/05.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/06.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/06.jpg Binary files differnew file mode 100644 index 0000000..6b4b4eb --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/06.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/07.jpg b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/07.jpg Binary files differnew file mode 100644 index 0000000..a3eda93 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/gallery/07.jpg diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/index.it.md b/themes/blowfish/exampleSite/content/docs/shortcodes/index.it.md new file mode 100644 index 0000000..701f18e --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/index.it.md @@ -0,0 +1,754 @@ +--- +title: "Shortcodes" +date: 2020-08-11 +draft: false +description: "All the shortcodes available in Blowfish." +slug: "shortcodes" +tags: ["shortcodes", "mermaid", "icon", "lead", "docs"] +series: ["Documentation"] +series_order: 8 +--- + +In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Blowfish adds a few extras for additional functionality. + +## Alert + +`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icon` | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.) | +| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +<!-- prettier-ignore-end --> + +The input is written in Markdown so you can format it however you please. + +**Example 1:** No params + +```md +{{</* alert */>}} +**Warning!** This action is destructive! +{{</* /alert */>}} +``` + +{{< alert >}} +**Warning!** This action is destructive! +{{< /alert >}} + +**Example 2:** Unnamed param + +```md +{{</* alert "twitter" */>}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{</* /alert */>}} +``` + +{{< alert "twitter" >}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{< /alert >}} + +**Example 3:** Named params + +```md +{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}} +This is an error! +{{</* /alert */>}} +``` + +{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}} +This is an error! +{{< /alert >}} + +<br/><br/><br/> + +## Article + +`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.* + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | -------------------------------------------------------- | +| `link` | **Required.** the `.RelPermalink` to the target article. | +<!-- prettier-ignore-end --> + +**Example:** + +```md +{{</* article link="/it/docs/welcome/" */>}} +``` + +{{< article link="/it/docs/welcome/" >}} + +<br/><br/><br/> + +## Badge + +`badge` outputs a styled badge component which is useful for displaying metadata. + +**Example:** + +```md +{{</* badge */>}} +New article! +{{</* /badge */>}} +``` + +{{< badge >}} +New article! +{{< /badge >}} + +<br/><br/><br/> + +## Button + +`button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link. + +**Example:** + +```md +{{</* button href="#button" target="_self" */>}} +Call to action +{{</* /button */>}} +``` + +{{< button href="#button" target="_self" >}} +Call to action +{{< /button >}} + +<br/><br/><br/> + +## Carousel + +`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------- | +| `images` | **Required.** A regex string to match image names or URLs. | +| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. | +| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) | +<!-- prettier-ignore-end --> + +**Example 1:** 16:9 aspect ratio and verbose list of images + +```md +{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}} +``` + +{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}} + +**Example 2:** 21:9 aspect ratio and regex-ed list of images + +```md +{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}} +``` + +{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}} + +<br/><br/><br/> + +## Chart + +`chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest. + +Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types. + +**Example:** + +```js +{{</* chart */>}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{</* /chart */>}} +``` + +<!-- prettier-ignore-start --> +{{< chart >}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{< /chart >}} +<!-- prettier-ignore-end --> + +You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page. + +<br/><br/><br/> + +## Figure + +Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits. + +When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo. + +The `figure` shortcode accepts six parameters: + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. | +| `alt` | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image. | +| `caption` | Markdown for the image caption, which will be displayed below the image. | +| `class` | Additional CSS classes to apply to the image. | +| `href` | URL that the image should be linked to. | +| `target` | The target attribute for the `href` URL. | +| `nozoom` | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link. | +| `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure). | +<!-- prettier-ignore-end --> + +Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest: + +```md + +``` + +**Example:** + +```md +{{</* figure + src="abstract.jpg" + alt="Abstract purple artwork" + caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" + */>}} + +<!-- OR --> + + +``` + +{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} + +<br/><br/><br/> + +## Gallery + +`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts. + +In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid. + +**Example 1: normal gallery** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} + +<br/><br/><br/> + + +**Example 2: responsive gallery** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{< /gallery >}} + +<br/><br/><br/> + +## GitHub Card + +`github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------------------------- | +| `repo` | [String] github repo in the format of `username/repo` | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* github repo="nunocoracao/blowfish" */>}} +``` + +{{< github repo="nunocoracao/blowfish" >}} + +<br/><br/><br/> + +## GitLab Card + +`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). +It displays realtime stats about it, such as the number of stars and forks it has. +Unlike `github` it can't display the main programming language of a project. +Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | ----------------------------------------------------------------------- | +| `projectID` | [String] gitlab numeric ProjectID | +| `baseURL` | [String] optional gitlab instance URL, default is `https://gitlab.com/` | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* gitlab projectID="278964" */>}} +``` + +{{< gitlab projectID="278964" >}} + +<br/><br/><br/> + +## Icon + +`icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size. + +**Example:** + +```md +{{</* icon "github" */>}} +``` + +**Output:** {{< icon "github" >}} + +Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons. + +Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension. + +Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}). + +<br/><br/><br/> + +## KaTeX + +The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax. + +To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported. + +Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters. + +**Example:** + +```md +{{</* katex */>}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) +``` + +{{< katex >}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) + +Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples. + +<br/><br/><br/> + + +## Keyword + + +The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties. + + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | --------------------------------------- | +| `icon` | Optional icon to be used in the keyword | +<!-- prettier-ignore-end --> + +The input is written in Markdown so you can format it however you please. + +**Example1 :** + +```md +{{</* keyword */>}} Super skill {{</* /keyword */>}} +``` + +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +**Example2 :** + +```md +{{</* keywordList */>}} +{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}} +{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}} +{{</* /keywordList */>}} + +{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}} +``` + +{{< keywordList >}} +{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} +{{< keyword icon="code" >}} **Important** skill {{< /keyword >}} +{{< /keywordList >}} +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +<br/><br/><br/> + +## Lead + +`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode. + +**Example:** + +```md +{{</* lead */>}} +When life gives you lemons, make lemonade. +{{</* /lead */>}} +``` + +{{< lead >}} +When life gives you lemons, make lemonade. +{{< /lead >}} + +<br/><br/><br/> + +## List + +`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `limit` | **Required.** the number of recent articles to display. | +| `title` | Optional title for the list, default is `Recent` | +| `cardView` | Optional card view enabled for the list, default is `false` | +| `where` | The variable to be used for the query of articles e.g. `Type` | +| `value` | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` | + +{{< alert >}} +The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use. +{{</ alert >}} + +<!-- prettier-ignore-end --> + +**Example #1:** + +```md +{{</* list limit=2 */>}} +``` + +{{< list limit=2 >}} + +**Example #2:** + +```md +{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}} +``` + +{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}} + +<br/><br/><br/> + +## LTR/RTL + +`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally. + +**Example:** + +```md +- This is an markdown list. +- Its per default a LTR direction +{{%/* rtl */%}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{%/* /rtl */%}} +``` + +- This is an markdown list. +- Its per default a LTR direction +{{% rtl %}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{% /rtl %}} + +<br/><br/><br/> + +## Markdown Importer + +This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ------------------------------------------------------- | +| `url` | **Required** URL to an externally hosted markdown file. | + + +<!-- prettier-ignore-end --> + + +**Example:** + +```md +{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}} + +``` + +{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}} + + +<br/><br/> + +## Mermaid + +`mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats. + +Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest. + +Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types. + +**Example:** + +```md +{{</* mermaid */>}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{</* /mermaid */>}} +``` + +{{< mermaid >}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{< /mermaid >}} + +You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page. + +<br/><br/><br/> + +## Swatches + +`swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each. + +**Example** + +```md +{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}} +``` + +**Output** +{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} + +<br/><br/><br/> + +## Timeline + +The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties. + + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | -------------------------------------------- | +| `icon` | the icon to be used in the timeline visuals. | +| `header` | header for each entry | +| `badge` | text to place within the top right badge | +| `subheader` | entry's subheader | + +<!-- prettier-ignore-end --> + +**Example:** + +```md +{{</* timeline */>}} + +{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</* /timelineItem */>}} + + +{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</* /timelineItem */>}} + +{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}} +With other shortcodes +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +{{</* /timelineItem */>}} + +{{</* /timeline */>}} +``` + + +{{< timeline >}} + +{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</ timelineItem >}} + + +{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</ timelineItem >}} + +{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} +With other shortcodes +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} +{{</ timelineItem >}} + +{{</ timeline >}} + + +<br/><br/><br/> + +## TypeIt + +[TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML. + +Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `tag` | [String] `html` tag that will be used to render the strings. | +| `classList` | [String] List of `css` classes to apply to the `html` element. | +| `initialString` | [String] Initial string that will appear written and will be replaced. | +| `speed` | [number] Typing speed, measured in milliseconds between each step. | +| `lifeLike` | [boolean] Makes the typing pace irregular, as if a real person is doing it. | +| `startDelay` | [number] The amount of time before the plugin begins typing after being initialized. | +| `breakLines` | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false). | +| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` | +| `loop` | [boolean] Whether your strings will continuously loop after completing | + +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* typeit */>}} +Lorem ipsum dolor sit amet +{{</* /typeit */>}} +``` + +{{< typeit >}} +Lorem ipsum dolor sit amet +{{< /typeit >}} + +**Example 2:** + +```md +{{</* typeit + tag=h1 + lifeLike=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h1 + lifeLike=true +>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{< /typeit >}} + +**Example 3:** + +```md +{{</* typeit + tag=h3 + speed=50 + breakLines=false + loop=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h3 + speed=50 + breakLines=false + loop=true +>}} +"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) +"I'm gonna make him an offer he can't refuse." The Godfather (1972) +"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) +{{< /typeit >}} + + +<br/><br/><br/> + +## Youtube Lite + +A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------- | +| `id` | [String] Youtube video id to embed. | +| `label` | [String] Label for the video | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}} + +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}} diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/index.ja.md b/themes/blowfish/exampleSite/content/docs/shortcodes/index.ja.md new file mode 100644 index 0000000..a4153bf --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/index.ja.md @@ -0,0 +1,754 @@ +--- +title: "Shortcodes" +date: 2020-08-11 +draft: false +description: "All the shortcodes available in Blowfish." +slug: "shortcodes" +tags: ["shortcodes", "mermaid", "icon", "lead", "docs"] +series: ["Documentation"] +series_order: 8 +--- + +In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Blowfish adds a few extras for additional functionality. + +## Alert + +`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icon` | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.) | +| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +<!-- prettier-ignore-end --> + +The input is written in Markdown so you can format it however you please. + +**Example 1:** No params + +```md +{{</* alert */>}} +**Warning!** This action is destructive! +{{</* /alert */>}} +``` + +{{< alert >}} +**Warning!** This action is destructive! +{{< /alert >}} + +**Example 2:** Unnamed param + +```md +{{</* alert "twitter" */>}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{</* /alert */>}} +``` + +{{< alert "twitter" >}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{< /alert >}} + +**Example 3:** Named params + +```md +{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}} +This is an error! +{{</* /alert */>}} +``` + +{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}} +This is an error! +{{< /alert >}} + +<br/><br/><br/> + +## Article + +`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.* + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | -------------------------------------------------------- | +| `link` | **Required.** the `.RelPermalink` to the target article. | +<!-- prettier-ignore-end --> + +**Example:** + +```md +{{</* article link="/ja/docs/welcome/" */>}} +``` + +{{< article link="/ja/docs/welcome/" >}} + +<br/><br/><br/> + +## Badge + +`badge` outputs a styled badge component which is useful for displaying metadata. + +**Example:** + +```md +{{</* badge */>}} +New article! +{{</* /badge */>}} +``` + +{{< badge >}} +New article! +{{< /badge >}} + +<br/><br/><br/> + +## Button + +`button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link. + +**Example:** + +```md +{{</* button href="#button" target="_self" */>}} +Call to action +{{</* /button */>}} +``` + +{{< button href="#button" target="_self" >}} +Call to action +{{< /button >}} + +<br/><br/><br/> + +## Carousel + +`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------- | +| `images` | **Required.** A regex string to match image names or URLs. | +| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. | +| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) | +<!-- prettier-ignore-end --> + +**Example 1:** 16:9 aspect ratio and verbose list of images + +```md +{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}} +``` + +{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}} + +**Example 2:** 21:9 aspect ratio and regex-ed list of images + +```md +{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}} +``` + +{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}} + +<br/><br/><br/> + +## Chart + +`chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest. + +Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types. + +**Example:** + +```js +{{</* chart */>}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{</* /chart */>}} +``` + +<!-- prettier-ignore-start --> +{{< chart >}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{< /chart >}} +<!-- prettier-ignore-end --> + +You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page. + +<br/><br/><br/> + +## Figure + +Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits. + +When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo. + +The `figure` shortcode accepts six parameters: + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. | +| `alt` | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image. | +| `caption` | Markdown for the image caption, which will be displayed below the image. | +| `class` | Additional CSS classes to apply to the image. | +| `href` | URL that the image should be linked to. | +| `target` | The target attribute for the `href` URL. | +| `nozoom` | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link. | +| `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure). | +<!-- prettier-ignore-end --> + +Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest: + +```md + +``` + +**Example:** + +```md +{{</* figure + src="abstract.jpg" + alt="Abstract purple artwork" + caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" + */>}} + +<!-- OR --> + + +``` + +{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} + +<br/><br/><br/> + +## Gallery + +`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts. + +In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid. + +**Example 1: normal gallery** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} + +<br/><br/><br/> + + +**Example 2: responsive gallery** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{< /gallery >}} + +<br/><br/><br/> + +## GitHub Card + +`github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------------------------- | +| `repo` | [String] github repo in the format of `username/repo` | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* github repo="nunocoracao/blowfish" */>}} +``` + +{{< github repo="nunocoracao/blowfish" >}} + +<br/><br/><br/> + +## GitLab Card + +`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). +It displays realtime stats about it, such as the number of stars and forks it has. +Unlike `github` it can't display the main programming language of a project. +Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | ----------------------------------------------------------------------- | +| `projectID` | [String] gitlab numeric ProjectID | +| `baseURL` | [String] optional gitlab instance URL, default is `https://gitlab.com/` | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* gitlab projectID="278964" */>}} +``` + +{{< gitlab projectID="278964" >}} + +<br/><br/><br/> + +## Icon + +`icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size. + +**Example:** + +```md +{{</* icon "github" */>}} +``` + +**Output:** {{< icon "github" >}} + +Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons. + +Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension. + +Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}). + +<br/><br/><br/> + +## KaTeX + +The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax. + +To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported. + +Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters. + +**Example:** + +```md +{{</* katex */>}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) +``` + +{{< katex >}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) + +Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples. + +<br/><br/><br/> + + +## Keyword + + +The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties. + + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | --------------------------------------- | +| `icon` | Optional icon to be used in the keyword | +<!-- prettier-ignore-end --> + +The input is written in Markdown so you can format it however you please. + +**Example1 :** + +```md +{{</* keyword */>}} Super skill {{</* /keyword */>}} +``` + +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +**Example2 :** + +```md +{{</* keywordList */>}} +{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}} +{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}} +{{</* /keywordList */>}} + +{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}} +``` + +{{< keywordList >}} +{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} +{{< keyword icon="code" >}} **Important** skill {{< /keyword >}} +{{< /keywordList >}} +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +<br/><br/><br/> + +## Lead + +`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode. + +**Example:** + +```md +{{</* lead */>}} +When life gives you lemons, make lemonade. +{{</* /lead */>}} +``` + +{{< lead >}} +When life gives you lemons, make lemonade. +{{< /lead >}} + +<br/><br/><br/> + +## List + +`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `limit` | **Required.** the number of recent articles to display. | +| `title` | Optional title for the list, default is `Recent` | +| `cardView` | Optional card view enabled for the list, default is `false` | +| `where` | The variable to be used for the query of articles e.g. `Type` | +| `value` | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` | + +{{< alert >}} +The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use. +{{</ alert >}} + +<!-- prettier-ignore-end --> + +**Example #1:** + +```md +{{</* list limit=2 */>}} +``` + +{{< list limit=2 >}} + +**Example #2:** + +```md +{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}} +``` + +{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}} + +<br/><br/><br/> + +## LTR/RTL + +`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally. + +**Example:** + +```md +- This is an markdown list. +- Its per default a LTR direction +{{%/* rtl */%}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{%/* /rtl */%}} +``` + +- This is an markdown list. +- Its per default a LTR direction +{{% rtl %}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{% /rtl %}} + +<br/><br/><br/> + +## Markdown Importer + +This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ------------------------------------------------------- | +| `url` | **Required** URL to an externally hosted markdown file. | + + +<!-- prettier-ignore-end --> + + +**Example:** + +```md +{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}} + +``` + +{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}} + + +<br/><br/> + +## Mermaid + +`mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats. + +Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest. + +Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types. + +**Example:** + +```md +{{</* mermaid */>}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{</* /mermaid */>}} +``` + +{{< mermaid >}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{< /mermaid >}} + +You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page. + +<br/><br/><br/> + +## Swatches + +`swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each. + +**Example** + +```md +{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}} +``` + +**Output** +{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} + +<br/><br/><br/> + +## Timeline + +The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties. + + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | -------------------------------------------- | +| `icon` | the icon to be used in the timeline visuals. | +| `header` | header for each entry | +| `badge` | text to place within the top right badge | +| `subheader` | entry's subheader | + +<!-- prettier-ignore-end --> + +**Example:** + +```md +{{</* timeline */>}} + +{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</* /timelineItem */>}} + + +{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</* /timelineItem */>}} + +{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}} +With other shortcodes +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +{{</* /timelineItem */>}} + +{{</* /timeline */>}} +``` + + +{{< timeline >}} + +{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</ timelineItem >}} + + +{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</ timelineItem >}} + +{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} +With other shortcodes +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} +{{</ timelineItem >}} + +{{</ timeline >}} + + +<br/><br/><br/> + +## TypeIt + +[TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML. + +Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `tag` | [String] `html` tag that will be used to render the strings. | +| `classList` | [String] List of `css` classes to apply to the `html` element. | +| `initialString` | [String] Initial string that will appear written and will be replaced. | +| `speed` | [number] Typing speed, measured in milliseconds between each step. | +| `lifeLike` | [boolean] Makes the typing pace irregular, as if a real person is doing it. | +| `startDelay` | [number] The amount of time before the plugin begins typing after being initialized. | +| `breakLines` | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false). | +| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` | +| `loop` | [boolean] Whether your strings will continuously loop after completing | + +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* typeit */>}} +Lorem ipsum dolor sit amet +{{</* /typeit */>}} +``` + +{{< typeit >}} +Lorem ipsum dolor sit amet +{{< /typeit >}} + +**Example 2:** + +```md +{{</* typeit + tag=h1 + lifeLike=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h1 + lifeLike=true +>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{< /typeit >}} + +**Example 3:** + +```md +{{</* typeit + tag=h3 + speed=50 + breakLines=false + loop=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h3 + speed=50 + breakLines=false + loop=true +>}} +"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) +"I'm gonna make him an offer he can't refuse." The Godfather (1972) +"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) +{{< /typeit >}} + + +<br/><br/><br/> + +## Youtube Lite + +A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------- | +| `id` | [String] Youtube video id to embed. | +| `label` | [String] Label for the video | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}} + +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}} diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/index.md b/themes/blowfish/exampleSite/content/docs/shortcodes/index.md new file mode 100644 index 0000000..d15f955 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/index.md @@ -0,0 +1,776 @@ +--- +title: "Shortcodes" +date: 2020-08-11 +draft: false +description: "All the shortcodes available in Blowfish." +slug: "shortcodes" +tags: ["shortcodes", "mermaid", "icon", "lead", "docs"] +series: ["Documentation"] +series_order: 8 +--- + +In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Blowfish adds a few extras for additional functionality. + +## Alert + +`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icon` | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.) | +| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . | +<!-- prettier-ignore-end --> + +The input is written in Markdown so you can format it however you please. + +**Example 1:** No params + +```md +{{</* alert */>}} +**Warning!** This action is destructive! +{{</* /alert */>}} +``` + +{{< alert >}} +**Warning!** This action is destructive! +{{< /alert >}} + +**Example 2:** Unnamed param + +```md +{{</* alert "twitter" */>}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{</* /alert */>}} +``` + +{{< alert "twitter" >}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{< /alert >}} + +**Example 3:** Named params + +```md +{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}} +This is an error! +{{</* /alert */>}} +``` + +{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}} +This is an error! +{{< /alert >}} + +<br/><br/><br/> + +## Article + +`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.* + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | -------------------------------------------------------- | +| `link` | **Required.** the `.RelPermalink` to the target article. | +<!-- prettier-ignore-end --> + +**Example:** + +```md +{{</* article link="/docs/welcome/" */>}} +``` + +{{< article link="/docs/welcome/" >}} + +<br/><br/><br/> + +## Badge + +`badge` outputs a styled badge component which is useful for displaying metadata. + +**Example:** + +```md +{{</* badge */>}} +New article! +{{</* /badge */>}} +``` + +{{< badge >}} +New article! +{{< /badge >}} + +<br/><br/><br/> + +## Button + +`button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link. + +**Example:** + +```md +{{</* button href="#button" target="_self" */>}} +Call to action +{{</* /button */>}} +``` + +{{< button href="#button" target="_self" >}} +Call to action +{{< /button >}} + +<br/><br/><br/> + +## Carousel + +`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------- | +| `images` | **Required.** A regex string to match image names or URLs. | +| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. | +| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) | +<!-- prettier-ignore-end --> + +**Example 1:** 16:9 aspect ratio and verbose list of images + +```md +{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}} +``` + +{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}} + +**Example 2:** 21:9 aspect ratio and regex-ed list of images + +```md +{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}} +``` + +{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}} + +<br/><br/><br/> + +## Chart + +`chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest. + +Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types. + +**Example:** + +```js +{{</* chart */>}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{</* /chart */>}} +``` + +<!-- prettier-ignore-start --> +{{< chart >}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{< /chart >}} +<!-- prettier-ignore-end --> + +You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page. + +<br/><br/><br/> + +## Figure + +Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits. + +When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo. + +The `figure` shortcode accepts six parameters: + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. | +| `alt` | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image. | +| `caption` | Markdown for the image caption, which will be displayed below the image. | +| `class` | Additional CSS classes to apply to the image. | +| `href` | URL that the image should be linked to. | +| `target` | The target attribute for the `href` URL. | +| `nozoom` | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link. | +| `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure). | +<!-- prettier-ignore-end --> + +Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest: + +```md + +``` + +**Example:** + +```md +{{</* figure + src="abstract.jpg" + alt="Abstract purple artwork" + caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" + */>}} + +<!-- OR --> + + +``` + +{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} + +<br/><br/><br/> + +## Gallery + +`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts. + +In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid. + +**Example 1: normal gallery** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} + +<br/><br/><br/> + + +**Example 2: responsive gallery** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{< /gallery >}} + +<br/><br/><br/> + +## GitHub Card + +`github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ----------------------------------------------------- | +| `repo` | [String] github repo in the format of `username/repo` | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* github repo="nunocoracao/blowfish" */>}} +``` + +{{< github repo="nunocoracao/blowfish" >}} + +<br/><br/><br/> + +## GitLab Card + +`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). +It displays realtime stats about it, such as the number of stars and forks it has. +Unlike `github` it can't display the main programming language of a project. +Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | ----------------------------------------------------------------------- | +| `projectID` | [String] gitlab numeric ProjectID | +| `baseURL` | [String] optional gitlab instance URL, default is `https://gitlab.com/` | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* gitlab projectID="278964" */>}} +``` + +{{< gitlab projectID="278964" >}} + +<br/><br/><br/> + +## Icon + +`icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size. + +**Example:** + +```md +{{</* icon "github" */>}} +``` + +**Output:** {{< icon "github" >}} + +Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons. + +Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension. + +Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}). + +<br/><br/><br/> + +## KaTeX + +The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax. + +To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported. + +Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters. + +**Example:** + +```md +{{</* katex */>}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) +``` + +{{< katex >}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) + +Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples. + +<br/><br/><br/> + + +## Keyword + + +The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties. + + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | --------------------------------------- | +| `icon` | Optional icon to be used in the keyword | +<!-- prettier-ignore-end --> + +The input is written in Markdown so you can format it however you please. + +**Example1 :** + +```md +{{</* keyword */>}} Super skill {{</* /keyword */>}} +``` + +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +**Example2 :** + +```md +{{</* keywordList */>}} +{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}} +{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}} +{{</* /keywordList */>}} + +{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}} +``` + +{{< keywordList >}} +{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} +{{< keyword icon="code" >}} **Important** skill {{< /keyword >}} +{{< /keywordList >}} +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +<br/><br/><br/> + +## Lead + +`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode. + +**Example:** + +```md +{{</* lead */>}} +When life gives you lemons, make lemonade. +{{</* /lead */>}} +``` + +{{< lead >}} +When life gives you lemons, make lemonade. +{{< /lead >}} + +<br/><br/><br/> + +## List + +`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `limit` | **Required.** the number of recent articles to display. | +| `title` | Optional title for the list, default is `Recent` | +| `cardView` | Optional card view enabled for the list, default is `false` | +| `where` | The variable to be used for the query of articles e.g. `Type` | +| `value` | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` | + +{{< alert >}} +The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use. +{{</ alert >}} + +<!-- prettier-ignore-end --> + +**Example #1:** + +```md +{{</* list limit=2 */>}} +``` + +{{< list limit=2 >}} + +**Example #2:** + +```md +{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}} +``` + +{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}} + +<br/><br/><br/> + +## LTR/RTL + +`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally. + +**Example:** + +```md +- This is an markdown list. +- Its per default a LTR direction +{{%/* rtl */%}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{%/* /rtl */%}} +``` + +- This is an markdown list. +- Its per default a LTR direction +{{% rtl %}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{% /rtl %}} + +<br/><br/><br/> + +## Markdown Importer + +This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | ------------------------------------------------------- | +| `url` | **Required** URL to an externally hosted markdown file. | + + +<!-- prettier-ignore-end --> + + +**Example:** + +```md +{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}} + +``` + +{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}} + + +<br/><br/> + +## Mermaid + +`mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats. + +Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest. + +Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types. + +**Example:** + +```md +{{</* mermaid */>}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{</* /mermaid */>}} +``` + +{{< mermaid >}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{< /mermaid >}} + +You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page. + +<br/><br/><br/> + +## Swatches + +`swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each. + +**Example** + +```md +{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}} +``` + +**Output** +{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} + +<br/><br/><br/> + +## Timeline + +The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties. + + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ----------- | -------------------------------------------- | +| `icon` | the icon to be used in the timeline visuals. | +| `header` | header for each entry | +| `badge` | text to place within the top right badge | +| `subheader` | entry's subheader | + +<!-- prettier-ignore-end --> + +**Example:** + +```md +{{</* timeline */>}} + +{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</* /timelineItem */>}} + + +{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</* /timelineItem */>}} + +{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}} +With other shortcodes +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +{{</* /timelineItem */>}} + +{{</* /timeline */>}} +``` + + +{{< timeline >}} + +{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</ timelineItem >}} + + +{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</ timelineItem >}} + +{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} +With other shortcodes +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} +{{</ timelineItem >}} + +{{</ timeline >}} + + +<br/><br/><br/> + +## TypeIt + +[TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML. + +Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `tag` | [String] `html` tag that will be used to render the strings. | +| `classList` | [String] List of `css` classes to apply to the `html` element. | +| `initialString` | [String] Initial string that will appear written and will be replaced. | +| `speed` | [number] Typing speed, measured in milliseconds between each step. | +| `lifeLike` | [boolean] Makes the typing pace irregular, as if a real person is doing it. | +| `startDelay` | [number] The amount of time before the plugin begins typing after being initialized. | +| `breakLines` | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false). | +| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` | +| `loop` | [boolean] Whether your strings will continuously loop after completing | + +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* typeit */>}} +Lorem ipsum dolor sit amet +{{</* /typeit */>}} +``` + +{{< typeit >}} +Lorem ipsum dolor sit amet +{{< /typeit >}} + +**Example 2:** + +```md +{{</* typeit + tag=h1 + lifeLike=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h1 + lifeLike=true +>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{< /typeit >}} + +**Example 3:** + +```md +{{</* typeit + tag=h3 + speed=50 + breakLines=false + loop=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h3 + speed=50 + breakLines=false + loop=true +>}} +"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) +"I'm gonna make him an offer he can't refuse." The Godfather (1972) +"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) +{{< /typeit >}} + + +<br/><br/><br/> + +## Youtube Lite + +A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient. + +<!-- prettier-ignore-start --> +| Parameter | Description | +| --------- | -------------------------------------------- | +| `id` | [String] Youtube video id to embed. | +| `label` | [String] Label for the video | +| `params` | [String] Extras parameters for video playing | +<!-- prettier-ignore-end --> + +**Example 1:** + +```md +{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}} +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}} + +**Example 2:** + +You can use all of Youtube's [player parameters](https://developers.google.com/youtube/player_parameters#Parameters) for the `params` variable, as demonstrated below: + +> This video will start after 130 seconds (2m10) + +```md +{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130" */>}} +``` + +> This video will not have UI controls, will start playing at 130 seconds and will stop 10 seconds later. + +To concatenate multiple options as shown below, you need to add the `&` character between them. + +```md +{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" */>}} +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}} + +More informations can be found on the [youtubeLite GitHub repo](https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters) and Youtube's [player parameters](https://developers.google.com/youtube/player_parameters#Parameters) page. diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/index.zh-cn.md b/themes/blowfish/exampleSite/content/docs/shortcodes/index.zh-cn.md new file mode 100644 index 0000000..effc725 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/index.zh-cn.md @@ -0,0 +1,753 @@ +--- +title: "简码" +date: 2020-08-11 +draft: false +description: "所有 Blowfish 中可用的简码" +slug: "shortcodes" +tags: ["简码", "mermaid", "图标", "lead", "docs"] +series: ["部署教程"] +series_order: 8 +--- + +除了所有[默认 Hugo 简码](https://gohugo.io/content-management/shortcodes/) 之外，Blowfish 还添加了一些额外的功能。 + +## Alert + +`alert` 可以将其中内容输出为文章中的风格化消息框。它对于吸引读者注意您不想让读者错过的重要信息很有用。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icon` | **可选** 显示在左侧的图标。<br>**默认：** `exclaimation triangle icon` (查看[图标简码](#icon)，了解有关使用图标的更多详细信息。) | +| `iconColor` | **可选** 基本 CSS 样式中图标的颜色。<br>可以是十六进制值 (`#FFFFFF`) 或颜色名称 (`white`)<br>默认情况下由当前配色方案决定。 | +| `cardColor` | **可选** 基本 CSS 样式中卡片背景的颜色。<br>可以是十六进制值 (`#FFFFFF`) 或颜色名称 (`white`)<br>默认情况下由当前配色方案决定。 | +| `textColor` | **可选** 基本 CSS 样式中文本的颜色。<br>可以是十六进制值 (`#FFFFFF`) 或颜色名称 (`white`)<br>默认情况下由当前配色方案决定。 | +<!-- prettier-ignore-end --> + +输入内容是用 Markdown 语言编写的，因此您可以根据需要设置其格式。 + +**例1:** 无参数 + +```md +{{</* alert */>}} +**警告！**此操作具有破坏性！ +{{</* /alert */>}} +``` + +{{< alert >}} +**警告！**此操作具有破坏性！ +{{< /alert >}} + +**例2:** 未命名参数 + +```md +{{</* alert "twitter" */>}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{</* /alert */>}} +``` + +{{< alert "twitter" >}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{< /alert >}} + +**例3:** 命名参数 + +```md +{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}} +This is an error! +{{</* /alert */>}} +``` + +{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}} +This is an error! +{{< /alert >}} + +<br/><br/><br/> + +## Article + +`Article` 将把一篇文章嵌入到一个 markdown 文件中。 参数中的 `link`应该是要嵌入的文件的 `.RelPermalink`。请注意，如果简码引用其父级文件，则它不会显示任何内容。 *注意：如果您在 Blowfish（即 /blowfish/）等子文件夹中运行网站，请在链接中包含该路径。* + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| --------- | -------------------------------------------------------- | +| `link` | **必填** 要嵌入文章的 `.RelPermalink` | +<!-- prettier-ignore-end --> + +**例如：** + +```md +{{</* article link="/zh-cn/docs/welcome/" */>}} +``` + +{{< article link="/zh-cn/docs/welcome/" >}} + +<br/><br/><br/> + +## Badge + +`badge` 输出一个美观的徽章组件，该组件对于显示元数据很有用。 + +**例如：** + +```md +{{</* badge */>}} +New article! +{{</* /badge */>}} +``` + +{{< badge >}} +New article! +{{< /badge >}} + +<br/><br/><br/> + +## Button + +`button` 输出一个样式化的按钮组件，可用于突出显示主要操作。它有两个可选参数 `href` 和 `target` ，可用于指定链接的 URL 或目标文档。 + +**例如：** + +```md +{{</* button href="#button" target="_self" */>}} +Call to action +{{</* /button */>}} +``` + +{{< button href="#button" target="_self" >}} +Call to action +{{< /button >}} + +<br/><br/><br/> + +## Carousel + +`carousel` 用于生成可交互且具有视觉吸引力的方式展示多个图像的画廊。这允许用户滑动浏览多个图像，同时仅占用单个图像的垂直空间。 所有图像均使用父组件的完整宽度并使用预定义的宽高比 `16:9` 、 `21:9` 或 `32:9` 之一显示。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| ------------- | ----------------------------------------------------------------------------------------------------------------- | +| `images` | **必填** 用于匹配图像名称的正则表达式或 URL。 | +| `aspectRatio` | **可选** 画廊的纵横比。`16-9` 、`21-9` 或`32-9` 。默认设置为`16-9` 。 | +| `interval` | **可选** 自动滚动的时间间隔，以毫秒为单位指定。默认为`2000`（2 秒）。 | +<!-- prettier-ignore-end --> + +**例1:** 16:9 宽高比和 URL 图像列表 + +```md +{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}} +``` + +{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}} + +**例2:** 21:9 宽高比和正则表达式图像列表 + +```md +{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}} +``` + +{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}} + +<br/><br/><br/> + +## Chart + +`chart` 使用 Chart.js 库将图表嵌入到使用简单结构化数据的文章中。它支持多种[不同的图表样式](https://www.chartjs.org/docs/latest/samples/)，并且所有内容都可以在简码中进行配置。只需在简码中提供图表参数，Chart.js 将完成剩下的工作。 + +有关语法和支持的图表类型的详细信息，请参阅 [Chart.js 官方文档](https://www.chartjs.org/docs/latest/general/)。 + +**例如：** + +```js +{{</* chart */>}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{</* /chart */>}} +``` + +<!-- prettier-ignore-start --> +{{< chart >}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{< /chart >}} +<!-- prettier-ignore-end --> + +您可以在 [图表示例]({{< ref "charts" >}}) 页面上查看一些更多 Chart.js 示例。 + +<br/><br/><br/> + +## Figure + +Blowfish 包含一个 `figure` 简码，用于将图像添加到内容中。该简码取代了基本的 Hugo 功能，且性能更好。 + +当提供的图像是页面资源时，将使用 Hugo Pipes 对其进行优化并缩放，以提供适合不同设备分辨率的图像。如果提供了静态资产或外部图像的 URL，它将按原样包含在内，而无需 Hugo 进行任何图像处理。 + +`figure` 简码接受六个参数： + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | **必填** 图像的本地路径/文件名或 URL。当提供路径和文件名时，主题将尝试使用以下查找顺序来查找图像：首先，作为与页面绑定的[页面资源](https://gohugo.io/content-management/page-resources/)；然后是 `assets/` 目录中的文件；最后是，`static/`目录中的文件。 | +| `alt` | 图像的[替代文本描述](https://moz.com/learn/seo/alt-text)。 | +| `caption` | Markdown 格式的图像标题，将显示在图像下方。 | +| `class` | 应用于图像的其他 CSS 类。 | +| `href` | 图像应链接到的 URL。 | +| `target` | `href` URL 的目标属性。 | +| `nozoom` | `nozoom=true` 会禁用图像`缩放`功能。与 `href` 结合使用十分有用。 | +| `default` | 用于恢复默认 Hugo `figure` 行为的特殊参数。只需提供`default=true`，然后使用正常的 [Hugo 简码语法](https://gohugo.io/content-management/shortcodes/#figure)。 | +<!-- prettier-ignore-end --> + +Blowfish 还支持使用标准 Markdown 语法自动转换图像。只需使用以下格式，主题将自动处理： + +```md + +``` + +**例如：** + +```md +{{</* figure + src="abstract.jpg" + alt="Abstract purple artwork" + caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" + */>}} + +<!-- OR --> + + +``` + +{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} + +<br/><br/><br/> + +## Gallery + +`gallery` 允许您以响应式一次展示多个图像，并具有更加多样化和有趣的布局的图库。 + +为了将图像添加到图库中，请为每个图像使用`img`标签并添加`class ="grid-wXX"`，以便图库能够识别每个图像的列宽。默认情况下可用的宽度从 10% 开始，以 5% 的增量一直达到 100%。例如，要将宽度设置为 65%，请将类设置为`grid-w65`。此外，还可以使用 33% 和 66% 的宽度来构建 3 列的画廊。您还可以利用 Tailwind 的响应指示器来构建响应网格。 + +**例1: 普通图库** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} + +<br/><br/><br/> + + +**例2: 响应式图库** + +```md +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{</* /gallery */>}} +``` + +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> + <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" /> +{{< /gallery >}} + +<br/><br/><br/> + +## GitHub 卡片 + +`github` 允许您快速链接到 github Repo，同时显示和更新有关它的实时统计信息，例如它的 star 和 fork 数。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| --------- | ----------------------------------------------------- | +| `repo` | [String] 格式为 `username/repo` 的 github repo | +<!-- prettier-ignore-end --> + +**例1:** + +```md +{{</* github repo="nunocoracao/blowfish" */>}} +``` + +{{< github repo="nunocoracao/blowfish" >}} + +<br/><br/><br/> + +## GitLab 卡片 + +`gitlab` 允许您快速链接 GitLab 项目（GitLab 的 Repo）。 +显示有关的实时统计数据，例如它拥有的 star 和 fork 的数量。 +与 `github` 不同，它无法显示项目的主要编程语言。 +最后，只要 `api/v4/projects/` 可用，就可以提供自定义 GitLab 实例 URL，从而使此简码能够显示大多数自托管/企业组织。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| ----------- | ----------------------------------------------------------------------- | +| `projectID` | [String] gitlab 数字项目ID | +| `baseURL` | [String] 可选 gitlab 实例 URL，默认为 `https://gitlab.com/` | +<!-- prettier-ignore-end --> + +**例1:** + +```md +{{</* gitlab projectID="278964" */>}} +``` + +{{< gitlab projectID="278964" >}} + +<br/><br/><br/> + +## 图标 + +`icon` 输出一个 SVG 图标并以图标名称作为其唯一参数。图标会自动缩放以匹配当前文本大小。 + +**例如：** + +```md +{{</* icon "github" */>}} +``` + +**Output:** {{< icon "github" >}} + +图标使用 Hugo Pipeline 填充，这使得它们非常灵活。 Blowfish 包含许多用于社交、链接和其他内置图标。参考 [图标示例]({{< ref "samples/icons" >}}) 页面以获取支持的图标的完整列表。 + +可以通过在项目的 `assets/icons/` 目录中提供您自己的图标来添加自定义图标。然后可以使用不带 `.svg` 扩展名的 SVG 文件名在简码中引用该图标。 + +还可以通过调用 [iconpartial]({{< ref "partials#icon" >}}) 在 partials 中使用图标。 + +<br/><br/><br/> + +## KaTeX + +`katex` 简码可用于使用 KaTeX 包向文章内容添加数学表达式。有关可用语法，请参阅[支持的 TeX 函数](https://katex.org/docs/supported.html) 的在线参考。 + +要在文章中加入数学表达式，只需将简码放在任意位置即可。每篇文章只需加入一次，KaTeX 将自动呈现该页面上的任何标记。支持内联和块表示法。 + +可以通过将表达式包装在 `\\(` 和 `\\)` 分隔符中来生成内联表示法。或者，可以使用 `$$` 分隔符生成块符号。 + +**例如：** + +```md +{{</* katex */>}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) +``` + +{{< katex >}} +\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) + +查看 [数学符号示例]({{< ref "mathematical-notation" >}}) 页面以获取更多示例。 + +<br/><br/><br/> + + +## 重点突出 + + +`keyword` 组件可用于在视觉上突出显示某些重要的单词或短语，例如专业技能等。 `keywordList` 简码可用于将多个 `keyword` 组合在一起。每个组件可以具有以下参数。 + + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| --------- | --------------------------------------- | +| `icon` | **可选** 关键字中使用的图标 | +<!-- prettier-ignore-end --> + +输入内容是用 Markdown 编写的，因此您可以根据需要设置其格式。 + +**例1 :** + +```md +{{</* keyword */>}} Super skill {{</* /keyword */>}} +``` + +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +**例2 :** + +```md +{{</* keywordList */>}} +{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}} +{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}} +{{</* /keywordList */>}} + +{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}} +``` + +{{< keywordList >}} +{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} +{{< keyword icon="code" >}} **Important** skill {{< /keyword >}} +{{< /keywordList >}} +{{< keyword >}} *Standalone* skill {{< /keyword >}} + +<br/><br/><br/> + +## Lead + +`lead` 用于强调文章的开头。它可以用来设计介绍的样式，或者指出一条重要的信息。只需将任何 Markdown 内容包装在 `lead` 简码中即可。 + +**例如：** + +```md +{{</* lead */>}} +When life gives you lemons, make lemonade. +{{</* /lead */>}} +``` + +{{< lead >}} +When life gives you lemons, make lemonade. +{{< /lead >}} + +<br/><br/><br/> + +## 列表 + +`List` 将显示最近文章的列表。此简码需要一个限制值来约束列表。此外，它还支持输入 `where` 和 `value` ，以便按参数过滤文章。请注意，此简码不会显示其父页面，但会计入限制值。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `limit` | **必填** 要显示的最近文章数量。 | +| `title` | **可选** 列表标题，默认为 `Recent` | +| `cardView` | **可选** 列表启用卡片视图，默认为 `false` | +| `where` | 用于筛选文章的变量，例如 `Type` | +| `value` | 需要与 `where` 中定义的参数匹配的值，以进行文章查询，例如对于 `where` == `Type`，可以找到文章 `sample` | + +{{< alert >}} +`where` 和 `value` 值用于简码中进行以下格式的查询 `where .Site.RegularPages $where $value` 。检查 [Hugo 文档](https://gohugo.io/variables/page/) 以了解有关可用参数的更多信息。 +{{</ alert >}} + +<!-- prettier-ignore-end --> + +**例 1:** + +```md +{{</* list limit=2 */>}} +``` + +{{< list limit=2 >}} + +**例 2:** + +```md +{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}} +``` + +{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}} + +<br/><br/><br/> + +## 文字书写方向 + +`ltr` 和 `rtl` 允许您混排内容。许多从左往右书写语言的用户希望在文章中包含部分从右往左的书写内容。使用此简码可以让您做到这一点，并利用 `%` 作为简码中最外层的标识符 [Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown)，其中任何 markdown 内容都会正常渲染。 + +**例如：** + +```md +- This is an markdown list. +- Its per default a LTR direction +{{%/* rtl */%}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{%/* /rtl */%}} +``` + +- This is an markdown list. +- Its per default a LTR direction +{{% rtl %}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{% /rtl %}} + +<br/><br/><br/> + +## Markdown 导入 + +此简码允许您从外部源导入 Markdown 文件。这对于包含来自其他仓库或网站的内容非常有用，而无需复制和粘贴内容。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| --------- | ------------------------------------------------------- | +| `url` | **必填** 外部托管 Markdown 文件的 URL。 | + + +<!-- prettier-ignore-end --> + + +**例如：** + +```md +{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}} + +``` + +{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}} + + +<br/><br/> + +## Mermaid + +`mermaid` 允许您使用文本绘制可视化的图表。底层使用 Mermaid，并支持各种图表、图表和其他输出格式。 + +只需在 `mermaid` 简码中编写您的 Mermaid 语法，然后让插件完成其余的工作。 + +有关语法和支持的图表类型的详细信息，请参阅[官方 Mermaid 文档](https://mermaid-js.github.io/)。 + +**例如：** + +```md +{{</* mermaid */>}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{</* /mermaid */>}} +``` + +{{< mermaid >}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{< /mermaid >}} + +您可以在[图表和流程图示例]({{< ref "diagrams-flowcharts" >}}) 页面上看到一些其他 Mermaid 示例。 + +<br/><br/><br/> + +## 色板 + +`swatches` 输出一组最多三种不同的颜色来展示颜色元素的调色板。该简码采用每种颜色的 `HEX` 码并为每种颜色创建预览。 + +**例** + +```md +{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}} +``` + +**输出** +{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} + +<br/><br/><br/> + +## 时间线 + +`timeline` 创建了一个可视化时间线，用于展示专业经验、项目成就等。 `timeline` 简码依赖于 `timelineItem` 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| ----------- | -------------------------------------------- | +| `icon` | 要在时间线中使用的图标。 | +| `header` | 每个条目的标题 | +| `badge` | 放置在右上角徽章内的文本 | +| `subheader` | 每个条目的副标题 | + +<!-- prettier-ignore-end --> + +**例如：** + +```md +{{</* timeline */>}} + +{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</* /timelineItem */>}} + + +{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</* /timelineItem */>}} + +{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}} +With other shortcodes +{{</* gallery */>}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{</* /gallery */>}} +{{</* /timelineItem */>}} + +{{</* /timeline */>}} +``` + + +{{< timeline >}} + +{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{</ timelineItem >}} + + +{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} +With html code +<ul> + <li>Coffee</li> + <li>Tea</li> + <li>Milk</li> +</ul> +{{</ timelineItem >}} + +{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} +With other shortcodes +{{< gallery >}} + <img src="gallery/01.jpg" class="grid-w33" /> + <img src="gallery/02.jpg" class="grid-w33" /> + <img src="gallery/03.jpg" class="grid-w33" /> + <img src="gallery/04.jpg" class="grid-w33" /> + <img src="gallery/05.jpg" class="grid-w33" /> + <img src="gallery/06.jpg" class="grid-w33" /> + <img src="gallery/07.jpg" class="grid-w33" /> +{{< /gallery >}} +{{</ timelineItem >}} + +{{</ timeline >}} + + +<br/><br/><br/> + +## TypeIt + +[TypeIt](https://www.typeitjs.com) 是用于创建打字机效果的最通用的 JavaScript 工具。通过简单的配置，它允许您键入单个或多个断行、删除和相互替换的字符串，甚至可以处理包含复杂 HTML 的字符串。 + +Blowfish 使用简码实现 TypeIt 功能的子集。在 `typeit` 简码中编写文本，并使用以下参数来配置您想要的行为。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `tag` | [String] 将用于呈现字符串的 `html` 标签。 | +| `classList` | [String] 应用于 `html` 元素的 `css` 类列表。 | +| `initialString` | [String] 将显示为先写入并将被替换的初始字符串。 | +| `speed` | [number] 每步之间的打字速度，以毫秒为单位。 | +| `lifeLike` | [boolean] 使打字速度不规律，就像真人在打字一样。 | +| `startDelay` | [number] 插件在初始化后到开始输入的延迟时间。 | +| `breakLines` | [boolean] 将多个字符串换行输出 (true)，或者将它们删除并替换 (false)。 | +| `waitUntilVisible` | [boolean] 决定脚本在网站加载时启动还是在目标元素可见时启动。默认为 `true` | +| `loop` | [boolean] 字符串动画是否会循环 | + +<!-- prettier-ignore-end --> + +**例1:** + +```md +{{</* typeit */>}} +Lorem ipsum dolor sit amet +{{</* /typeit */>}} +``` + +{{< typeit >}} +Lorem ipsum dolor sit amet +{{< /typeit >}} + +**例2:** + +```md +{{</* typeit + tag=h1 + lifeLike=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h1 + lifeLike=true +>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{< /typeit >}} + +**例3:** + +```md +{{</* typeit + tag=h3 + speed=50 + breakLines=false + loop=true +*/>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{</* /typeit */>}} +``` + +{{< typeit + tag=h3 + speed=50 + breakLines=false + loop=true +>}} +"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) +"I'm gonna make him an offer he can't refuse." The Godfather (1972) +"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) +{{< /typeit >}} + + +<br/><br/><br/> + +## Youtube 嵌入播放器 + +使用 [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) 库嵌入 YouTube 视频的简码。该库是 YouTube 嵌入播放器的轻量级替代品，其设计速度更快、更高效。 + +<!-- prettier-ignore-start --> +| 参数 | 功能 | +| --------- | ----------------------------------- | +| `id` | [String] 要嵌入的 YouTube 视频 ID。 | +| `label` | [String] 视频的标签 | +<!-- prettier-ignore-end --> + +**例1:** + +```md +{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}} + +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}} diff --git a/themes/blowfish/exampleSite/content/docs/shortcodes/old.svg b/themes/blowfish/exampleSite/content/docs/shortcodes/old.svg new file mode 100644 index 0000000..0a282d3 --- /dev/null +++ b/themes/blowfish/exampleSite/content/docs/shortcodes/old.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative" width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322"> + <defs> + <pattern id="pid-0.5239578789186163" x="0" y="0" width="1057.28" height="1057.28" patternUnits="userSpaceOnUse"> + <g transform="scale(4.13)"><defs> + <filter id="pat-0.28056686700481603" x="-100%" y="-100%" width="300%" height="300%" color-interpolation-filters="sRGB"> + <feGaussianBlur in="SourceGraphic" stdDeviation="7.16"></feGaussianBlur> + <feComponentTransfer result="cutoff"> + <feFuncA type="linear" slope="60" intercept="-40"></feFuncA> + </feComponentTransfer> + </filter> + </defs><g style="isolation:isolate" filter="url(#pat-0.28056686700481603)"><g> + <circle cx="-117.47820145411958" cy="65.73704682775116" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="138.52179854588042" cy="65.73704682775116" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="394.5217985458804" cy="65.73704682775116" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="-117.47820145411958" cy="321.73704682775116" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="138.52179854588042" cy="321.73704682775116" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="394.5217985458804" cy="321.73704682775116" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="-117.47820145411958" cy="577.7370468277511" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="138.52179854588042" cy="577.7370468277511" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="394.5217985458804" cy="577.7370468277511" r="21.556106316222454" fill="#93dbe9"></circle> <circle cx="-162.6386709099624" cy="209.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="93.3613290900376" cy="209.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="349.3613290900376" cy="209.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="-162.6386709099624" cy="465.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="93.3613290900376" cy="465.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="349.3613290900376" cy="465.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="-162.6386709099624" cy="721.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="93.3613290900376" cy="721.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="349.3613290900376" cy="721.5394904805088" r="24.52697043691995" fill="#93dbe9"></circle> <circle cx="-147.3740595647397" cy="152.91068748943633" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="108.6259404352603" cy="152.91068748943633" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="364.6259404352603" cy="152.91068748943633" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="-147.3740595647397" cy="408.9106874894363" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="108.6259404352603" cy="408.9106874894363" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="364.6259404352603" cy="408.9106874894363" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="-147.3740595647397" cy="664.9106874894363" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="108.6259404352603" cy="664.9106874894363" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="364.6259404352603" cy="664.9106874894363" r="21.51015200476747" fill="#93dbe9"></circle> <circle cx="-192.59175861041996" cy="77.18554993301422" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="63.40824138958004" cy="77.18554993301422" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="319.40824138958004" cy="77.18554993301422" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="-192.59175861041996" cy="333.1855499330142" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="63.40824138958004" cy="333.1855499330142" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="319.40824138958004" cy="333.1855499330142" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="-192.59175861041996" cy="589.1855499330143" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="63.40824138958004" cy="589.1855499330143" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="319.40824138958004" cy="589.1855499330143" r="23.208103474280268" fill="#93dbe9"></circle> <circle cx="-79.42006978738306" cy="200.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="176.57993021261694" cy="200.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="432.57993021261694" cy="200.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="-79.42006978738306" cy="456.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="176.57993021261694" cy="456.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="432.57993021261694" cy="456.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="-79.42006978738306" cy="712.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="176.57993021261694" cy="712.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="432.57993021261694" cy="712.4069752375559" r="15.486005317165144" fill="#93dbe9"></circle> <circle cx="-121.43762123242561" cy="56.491324829246764" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="134.5623787675744" cy="56.491324829246764" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="390.5623787675744" cy="56.491324829246764" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="-121.43762123242561" cy="312.49132482924676" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="134.5623787675744" cy="312.49132482924676" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="390.5623787675744" cy="312.49132482924676" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="-121.43762123242561" cy="568.4913248292468" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="134.5623787675744" cy="568.4913248292468" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="390.5623787675744" cy="568.4913248292468" r="16.92789159610261" fill="#93dbe9"></circle> <circle cx="-124.1064600063192" cy="-1.0185254570748157" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="131.8935399936808" cy="-1.0185254570748157" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="387.8935399936808" cy="-1.0185254570748157" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="-124.1064600063192" cy="254.98147454292518" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="131.8935399936808" cy="254.98147454292518" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="387.8935399936808" cy="254.98147454292518" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="-124.1064600063192" cy="510.9814745429252" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="131.8935399936808" cy="510.9814745429252" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="387.8935399936808" cy="510.9814745429252" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="-124.1064600063192" cy="766.9814745429252" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="131.8935399936808" cy="766.9814745429252" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="387.8935399936808" cy="766.9814745429252" r="19.31322175704015" fill="#93dbe9"></circle> <circle cx="-21.244314001210284" cy="208.8537117408486" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="234.75568599878972" cy="208.8537117408486" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="490.7556859987897" cy="208.8537117408486" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="-21.244314001210284" cy="464.8537117408486" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="234.75568599878972" cy="464.8537117408486" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="490.7556859987897" cy="464.8537117408486" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="-21.244314001210284" cy="720.8537117408487" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="234.75568599878972" cy="720.8537117408487" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="490.7556859987897" cy="720.8537117408487" r="19.38062164223214" fill="#93dbe9"></circle> <circle cx="-73.58340786990397" cy="46.052044235642995" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="182.41659213009603" cy="46.052044235642995" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="438.41659213009603" cy="46.052044235642995" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="-73.58340786990397" cy="302.052044235643" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="182.41659213009603" cy="302.052044235643" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="438.41659213009603" cy="302.052044235643" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="-73.58340786990397" cy="558.052044235643" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="182.41659213009603" cy="558.052044235643" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="438.41659213009603" cy="558.052044235643" r="20.673550696223536" fill="#93dbe9"></circle> <circle cx="-235.5810408715102" cy="20.118819451294087" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="20.418959128489803" cy="20.118819451294087" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="276.4189591284898" cy="20.118819451294087" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="-235.5810408715102" cy="276.1188194512941" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="20.418959128489803" cy="276.1188194512941" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="276.4189591284898" cy="276.1188194512941" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="-235.5810408715102" cy="532.118819451294" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="20.418959128489803" cy="532.118819451294" r="18.093898081946833" fill="#93dbe9"></circle> <circle cx="276.4189591284898" cy="532.118819451294" r="18.093898081946833" fill="#93dbe9"></circle> + <animateTransform attributeName="transform" type="translate" dur="50s" repeatCount="indefinite" keyTimes="0;1" values="0 0;0 -256"></animateTransform> + </g><g> + <circle cx="-29.282070824233358" cy="206.7475764076192" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="226.71792917576664" cy="206.7475764076192" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="482.71792917576664" cy="206.7475764076192" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="-29.282070824233358" cy="462.7475764076192" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="226.71792917576664" cy="462.7475764076192" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="482.71792917576664" cy="462.7475764076192" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="-29.282070824233358" cy="718.7475764076191" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="226.71792917576664" cy="718.7475764076191" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="482.71792917576664" cy="718.7475764076191" r="16.356569130544052" fill="#689cc5"></circle> <circle cx="-119.77106789599327" cy="147.59310623269687" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="136.22893210400673" cy="147.59310623269687" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="392.22893210400673" cy="147.59310623269687" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="-119.77106789599327" cy="403.59310623269687" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="136.22893210400673" cy="403.59310623269687" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="392.22893210400673" cy="403.59310623269687" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="-119.77106789599327" cy="659.5931062326969" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="136.22893210400673" cy="659.5931062326969" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="392.22893210400673" cy="659.5931062326969" r="21.16585478989172" fill="#689cc5"></circle> <circle cx="-99.1950458914921" cy="90.60520911712854" r="18.26347402711" fill="#689cc5"></circle> <circle cx="156.8049541085079" cy="90.60520911712854" r="18.26347402711" fill="#689cc5"></circle> <circle cx="412.8049541085079" cy="90.60520911712854" r="18.26347402711" fill="#689cc5"></circle> <circle cx="-99.1950458914921" cy="346.60520911712854" r="18.26347402711" fill="#689cc5"></circle> <circle cx="156.8049541085079" cy="346.60520911712854" r="18.26347402711" fill="#689cc5"></circle> <circle cx="412.8049541085079" cy="346.60520911712854" r="18.26347402711" fill="#689cc5"></circle> <circle cx="-99.1950458914921" cy="602.6052091171285" r="18.26347402711" fill="#689cc5"></circle> <circle cx="156.8049541085079" cy="602.6052091171285" r="18.26347402711" fill="#689cc5"></circle> <circle cx="412.8049541085079" cy="602.6052091171285" r="18.26347402711" fill="#689cc5"></circle> <circle cx="-190.20831840016888" cy="133.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="65.79168159983112" cy="133.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="321.7916815998311" cy="133.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="-190.20831840016888" cy="389.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="65.79168159983112" cy="389.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="321.7916815998311" cy="389.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="-190.20831840016888" cy="645.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="65.79168159983112" cy="645.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="321.7916815998311" cy="645.6427033026721" r="16.438060855095472" fill="#689cc5"></circle> <circle cx="-75.36598803253361" cy="227.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="180.6340119674664" cy="227.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="436.6340119674664" cy="227.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="-75.36598803253361" cy="483.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="180.6340119674664" cy="483.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="436.6340119674664" cy="483.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="-75.36598803253361" cy="739.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="180.6340119674664" cy="739.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="436.6340119674664" cy="739.1713073994291" r="24.488501941495453" fill="#689cc5"></circle> <circle cx="-52.0535694396504" cy="-12.529192687286525" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="203.9464305603496" cy="-12.529192687286525" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="459.9464305603496" cy="-12.529192687286525" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="-52.0535694396504" cy="243.47080731271348" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="203.9464305603496" cy="243.47080731271348" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="459.9464305603496" cy="243.47080731271348" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="-52.0535694396504" cy="499.4708073127135" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="203.9464305603496" cy="499.4708073127135" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="459.9464305603496" cy="499.4708073127135" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="-52.0535694396504" cy="755.4708073127135" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="203.9464305603496" cy="755.4708073127135" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="459.9464305603496" cy="755.4708073127135" r="18.640227929932493" fill="#689cc5"></circle> <circle cx="-220.14348290460032" cy="191.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="35.85651709539968" cy="191.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="291.8565170953997" cy="191.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="-220.14348290460032" cy="447.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="35.85651709539968" cy="447.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="291.8565170953997" cy="447.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="-220.14348290460032" cy="703.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="35.85651709539968" cy="703.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="291.8565170953997" cy="703.8952058807937" r="23.91873320216284" fill="#689cc5"></circle> <circle cx="-231.6065597301291" cy="190.42535954902957" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="24.393440269870894" cy="190.42535954902957" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="280.3934402698709" cy="190.42535954902957" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="-231.6065597301291" cy="446.42535954902957" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="24.393440269870894" cy="446.42535954902957" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="280.3934402698709" cy="446.42535954902957" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="-231.6065597301291" cy="702.4253595490295" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="24.393440269870894" cy="702.4253595490295" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="280.3934402698709" cy="702.4253595490295" r="21.519691844377377" fill="#689cc5"></circle> <circle cx="-214.73478283259084" cy="40.797321809168466" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="41.26521716740916" cy="40.797321809168466" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="297.26521716740916" cy="40.797321809168466" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="-214.73478283259084" cy="296.79732180916847" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="41.26521716740916" cy="296.79732180916847" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="297.26521716740916" cy="296.79732180916847" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="-214.73478283259084" cy="552.7973218091685" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="41.26521716740916" cy="552.7973218091685" r="21.495146663419995" fill="#689cc5"></circle> <circle cx="297.26521716740916" cy="552.7973218091685" r="21.495146663419995" fill="#689cc5"></circle> + <animateTransform attributeName="transform" type="translate" dur="25s" repeatCount="indefinite" keyTimes="0;1" values="0 0;0 -256"></animateTransform> + </g><g> + <circle cx="-61.818625426475705" cy="223.73093714877814" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="194.1813745735243" cy="223.73093714877814" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="450.1813745735243" cy="223.73093714877814" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="-61.818625426475705" cy="479.73093714877814" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="194.1813745735243" cy="479.73093714877814" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="450.1813745735243" cy="479.73093714877814" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="-61.818625426475705" cy="735.7309371487781" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="194.1813745735243" cy="735.7309371487781" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="450.1813745735243" cy="735.7309371487781" r="19.489813297125778" fill="#5e6fa3"></circle> <circle cx="-130.99287817390075" cy="32.266904580826974" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="125.00712182609925" cy="32.266904580826974" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="381.00712182609925" cy="32.266904580826974" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="-130.99287817390075" cy="288.266904580827" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="125.00712182609925" cy="288.266904580827" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="381.00712182609925" cy="288.266904580827" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="-130.99287817390075" cy="544.266904580827" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="125.00712182609925" cy="544.266904580827" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="381.00712182609925" cy="544.266904580827" r="20.250598288605616" fill="#5e6fa3"></circle> <circle cx="-114.9408654122559" cy="20.45342899050013" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="141.0591345877441" cy="20.45342899050013" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="397.0591345877441" cy="20.45342899050013" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="-114.9408654122559" cy="276.45342899050013" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="141.0591345877441" cy="276.45342899050013" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="397.0591345877441" cy="276.45342899050013" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="-114.9408654122559" cy="532.4534289905001" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="141.0591345877441" cy="532.4534289905001" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="397.0591345877441" cy="532.4534289905001" r="18.103831625412525" fill="#5e6fa3"></circle> <circle cx="-104.80705775206593" cy="44.91882464484638" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="151.19294224793407" cy="44.91882464484638" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="407.19294224793407" cy="44.91882464484638" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="-104.80705775206593" cy="300.9188246448464" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="151.19294224793407" cy="300.9188246448464" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="407.19294224793407" cy="300.9188246448464" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="-104.80705775206593" cy="556.9188246448464" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="151.19294224793407" cy="556.9188246448464" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="407.19294224793407" cy="556.9188246448464" r="21.639796724165027" fill="#5e6fa3"></circle> <circle cx="-237.85345336121185" cy="132.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="18.146546638788152" cy="132.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="274.14654663878815" cy="132.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="-237.85345336121185" cy="388.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="18.146546638788152" cy="388.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="274.14654663878815" cy="388.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="-237.85345336121185" cy="644.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="18.146546638788152" cy="644.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="274.14654663878815" cy="644.1180245261114" r="13.548894974734658" fill="#5e6fa3"></circle> <circle cx="-114.10644418384612" cy="143.46034115303564" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="141.89355581615388" cy="143.46034115303564" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="397.8935558161539" cy="143.46034115303564" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="-114.10644418384612" cy="399.46034115303564" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="141.89355581615388" cy="399.46034115303564" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="397.8935558161539" cy="399.46034115303564" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="-114.10644418384612" cy="655.4603411530356" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="141.89355581615388" cy="655.4603411530356" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="397.8935558161539" cy="655.4603411530356" r="19.363930365828462" fill="#5e6fa3"></circle> <circle cx="-230.3861303270993" cy="236.39233726891996" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="25.613869672900705" cy="236.39233726891996" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="281.6138696729007" cy="236.39233726891996" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="-230.3861303270993" cy="492.39233726891996" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="25.613869672900705" cy="492.39233726891996" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="281.6138696729007" cy="492.39233726891996" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="-230.3861303270993" cy="748.39233726892" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="25.613869672900705" cy="748.39233726892" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="281.6138696729007" cy="748.39233726892" r="17.183996158558365" fill="#5e6fa3"></circle> <circle cx="-29.934329401216075" cy="168.68404986470233" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="226.06567059878392" cy="168.68404986470233" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="482.0656705987839" cy="168.68404986470233" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="-29.934329401216075" cy="424.68404986470233" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="226.06567059878392" cy="424.68404986470233" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="482.0656705987839" cy="424.68404986470233" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="-29.934329401216075" cy="680.6840498647023" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="226.06567059878392" cy="680.6840498647023" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="482.0656705987839" cy="680.6840498647023" r="24.47018283078528" fill="#5e6fa3"></circle> <circle cx="-19.652054236618767" cy="30.21589021686492" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="236.34794576338123" cy="30.21589021686492" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="492.34794576338123" cy="30.21589021686492" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="-19.652054236618767" cy="286.2158902168649" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="236.34794576338123" cy="286.2158902168649" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="492.34794576338123" cy="286.2158902168649" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="-19.652054236618767" cy="542.2158902168649" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="236.34794576338123" cy="542.2158902168649" r="18.720578292290323" fill="#5e6fa3"></circle> <circle cx="492.34794576338123" cy="542.2158902168649" r="18.720578292290323" fill="#5e6fa3"></circle> + <animateTransform attributeName="transform" type="translate" dur="16.666666666666668s" repeatCount="indefinite" keyTimes="0;1" values="0 0;0 -256"></animateTransform> + </g></g></g> + </pattern> + </defs> + <rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.5239578789186163)"></rect> + </svg>
\ No newline at end of file |
