Use wordmark on website

docs/images/gradient.svg

···
+<svg width="666" height="426" viewBox="0 0 666 426" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="666" height="426" fill="white"/>
+<rect width="666" height="426" fill="url(#paint0_linear_125_52)" fill-opacity="0.4"/>
+<rect width="666" height="426" fill="url(#paint1_radial_125_52)" fill-opacity="0.4"/>
+<rect width="666" height="426" fill="url(#paint2_radial_125_52)" fill-opacity="0.7"/>
+<rect width="666" height="426" fill="url(#paint3_radial_125_52)" fill-opacity="0.7"/>
+<rect width="666" height="426" fill="url(#paint4_radial_125_52)" fill-opacity="0.7"/>
+<rect width="666" height="426" fill="url(#paint5_radial_125_52)" fill-opacity="0.7"/>
+<rect width="666" height="426" fill="url(#paint6_radial_125_52)" fill-opacity="0.7"/>
+<rect width="666" height="426" fill="url(#paint7_radial_125_52)" fill-opacity="0.7"/>
+<defs>
+<linearGradient id="paint0_linear_125_52" x1="333" y1="0" x2="333" y2="426" gradientUnits="userSpaceOnUse">
+<stop stop-color="#52BF8B"/>
+<stop offset="1" stop-color="#056336"/>
+</linearGradient>
+<radialGradient id="paint1_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(333 213) rotate(114.265) scale(278.615 435.581)">
+<stop stop-color="#B9FF82"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+<radialGradient id="paint2_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(102.5 353.5) rotate(14.1781) scale(244.962 382.968)">
+<stop stop-color="#00FF94"/>
+<stop offset="1" stop-color="#24FF00" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(600 144.5) rotate(65.9183) scale(268.357 419.543)">
+<stop stop-color="#00FF94" stop-opacity="0.37"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</radialGradient>
+<radialGradient id="paint4_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(94.5 58.5) rotate(40.6339) scale(190.411 297.684)">
+<stop stop-color="#80FF00" stop-opacity="0.37"/>
+<stop offset="1" stop-color="#9EFF00" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(582.5 405.5) rotate(-147.008) scale(409.538 640.263)">
+<stop stop-color="#FFB800" stop-opacity="0.37"/>
+<stop offset="1" stop-color="#9EFF00" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(319.5 55) rotate(124.663) scale(334.948 523.652)">
+<stop stop-color="#FFB800" stop-opacity="0.37"/>
+<stop offset="1" stop-color="#9EFF00" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_125_52" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(319.5 55) rotate(124.663) scale(334.948 523.652)">
+<stop stop-color="#FFB800" stop-opacity="0.37"/>
+<stop offset="1" stop-color="#9EFF00" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

docs/images/wordmark.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="196" fill="none"><g fill="#124514" filter="url(#a)"><path d="M32.576 87.92c-1.792-.427-3.456-1.237-4.992-2.432-1.536-1.195-2.73-2.347-3.584-3.456l3.84-6.4c4.01-6.485 7.68-10.837 11.008-13.056 3.328-2.219 6.87-3.328 10.624-3.328 3.328 0 6.23.853 8.704 2.56 2.475 1.707 4.352 4.01 5.632 6.912 1.365 2.901 2.048 6.144 2.048 9.728v15.616c0 6.229.768 10.837 2.304 13.824 1.621 2.901 4.096 4.352 7.424 4.352 4.267 0 7.424-2.304 9.472-6.912 2.048-4.608 3.072-10.88 3.072-18.816v-7.68c.768-.256 1.621-.47 2.56-.64a18.652 18.652 0 0 1 3.072-.256c2.133 0 4.053.299 5.76.896v7.68c0 8.96.853 15.488 2.56 19.584 1.792 4.096 4.48 6.144 8.064 6.144 2.901 0 5.291-1.28 7.168-3.84 1.877-2.645 3.285-6.229 4.224-10.752.939-4.608 1.408-9.899 1.408-15.872V80.24c-4.181-1.536-7.253-3.584-9.216-6.144.341-2.56 1.067-4.95 2.176-7.168 1.195-2.304 2.645-4.139 4.352-5.504 1.707-1.45 3.413-2.176 5.12-2.176 2.731 0 4.949 2.048 6.656 6.144 1.707 4.096 2.56 9.387 2.56 15.872 0 8.277-.939 15.573-2.816 21.888-1.877 6.315-4.693 11.264-8.448 14.848-3.669 3.499-8.192 5.248-13.568 5.248-3.499 0-6.656-.896-9.472-2.688-2.816-1.792-5.077-4.352-6.784-7.68-2.048 3.243-4.693 5.803-7.936 7.68-3.243 1.792-6.87 2.688-10.88 2.688-6.485 0-11.52-2.432-15.104-7.296-3.584-4.864-5.376-11.691-5.376-20.48V80.624c0-2.901-.47-5.333-1.408-7.296-.853-2.048-2.304-3.072-4.352-3.072-1.024 0-2.39.597-4.096 1.792-1.707 1.11-3.883 3.712-6.528 7.808l-5.248 8.064Zm140.039 35.328c-5.205 0-9.6-1.749-13.184-5.248-3.584-3.584-5.376-9.429-5.376-17.536V76.016c-2.645 1.45-5.675 2.603-9.088 3.456-3.328.853-6.869 1.28-10.624 1.28-4.181 0-7.808-.555-10.88-1.664-2.304-.768-3.456-2.261-3.456-4.48 0-1.621.469-2.987 1.408-4.096.853-1.11 1.877-1.664 3.072-1.664.341 0 .64.043.896.128.256 0 .512.043.768.128 1.451.341 2.901.64 4.352.896 1.451.17 2.944.256 4.48.256 4.352 0 8.491-.981 12.416-2.944 4.011-2.048 6.784-4.523 8.32-7.424 1.792-.17 3.627.043 5.504.64 1.877.597 3.371 1.621 4.48 3.072v35.456c0 4.949.64 8.405 1.92 10.368 1.365 1.877 3.328 2.816 5.888 2.816 1.195 0 2.091.512 2.688 1.536.683 1.024 1.024 2.389 1.024 4.096a6.373 6.373 0 0 1-1.152 3.712c-.683 1.109-1.835 1.664-3.456 1.664Zm-12.032-83.84c-2.389 0-4.437-.853-6.144-2.56-1.707-1.707-2.56-3.755-2.56-6.144 0-2.475.811-4.523 2.432-6.144 1.707-1.707 3.797-2.56 6.272-2.56s4.523.853 6.144 2.56c1.707 1.621 2.56 3.67 2.56 6.144 0 2.39-.853 4.437-2.56 6.144-1.621 1.707-3.669 2.56-6.144 2.56Zm12.083 83.84c-1.109 0-2.005-.512-2.688-1.536-.683-1.024-1.024-2.347-1.024-3.968 0-3.669 1.536-5.504 4.608-5.504 2.731 0 5.76-1.664 9.088-4.992 3.328-3.413 7.211-8.875 11.648-16.384l13.696-23.168a27.14 27.14 0 0 1-.256-3.84c0-4.267.768-7.424 2.304-9.472 1.621-2.048 2.944-3.285 3.968-3.712 1.451-.341 2.987-.299 4.608.128 1.707.341 3.243.939 4.608 1.792 1.365.853 2.304 1.877 2.816 3.072-.341 1.536-.981 3.37-1.92 5.504-.939 2.133-2.432 4.992-4.48 8.576.597.939 1.365 1.877 2.304 2.816.939.939 2.091 1.963 3.456 3.072l9.728 7.936c3.499 2.816 6.101 5.76 7.808 8.832 1.792 2.987 2.688 6.357 2.688 10.112 0 4.523-1.28 8.533-3.84 12.032.427.939.64 2.048.64 3.328 0 1.621-.427 2.901-1.28 3.84-.768 1.024-1.877 1.536-3.328 1.536-1.365 0-2.688-.085-3.968-.256-1.28-.171-2.688-.384-4.224-.64-2.304.597-4.736.896-7.296.896-2.987 0-5.973-.469-8.96-1.408-2.987-.853-6.101-2.261-9.344-4.224-.171-4.523 1.536-7.851 5.12-9.984 4.693 3.072 9.131 4.608 13.312 4.608 3.584 0 6.443-.939 8.576-2.816 2.133-1.963 3.2-4.437 3.2-7.424 0-3.755-2.048-7.253-6.144-10.496l-9.728-7.68a44.327 44.327 0 0 1-4.608-4.224l-12.8 21.632c-4.693 7.936-9.216 13.611-13.568 17.024-4.267 3.328-9.173 4.992-14.72 4.992Z"/><path d="M235.592 121.67c.683 1.024 1.621 1.536 2.816 1.536 8.533 0 16.128-2.944 22.784-8.832 6.741-5.888 12.715-14.848 17.92-26.88v81.024a19.31 19.31 0 0 0 5.888.896c.939 0 1.92-.085 2.944-.256a23.004 23.004 0 0 0 2.816-.64v-72.96l-1.408-25.088v-8.704c-1.621-.853-3.456-1.45-5.504-1.792-1.963-.341-3.669-.299-5.12.128-4.693 12.544-9.173 22.656-13.44 30.336-4.181 7.595-8.405 13.141-12.672 16.64-4.181 3.499-8.704 5.248-13.568 5.248-1.365 0-2.475.469-3.328 1.408-.853.939-1.28 2.261-1.28 3.968 0 1.621.384 2.944 1.152 3.968Z"/><path d="M307.559 123.456c-5.401 0-10.247-1.451-14.536-4.352-4.21-2.992-7.546-7.072-10.009-12.24-2.383-5.168-3.574-11.016-3.574-17.544 0-6.528 1.231-12.33 3.694-17.408 2.462-5.077 5.798-9.067 10.008-11.968 4.289-2.992 9.095-4.488 14.417-4.488 5.322 0 10.088 1.496 14.298 4.488 4.21 2.901 7.506 6.89 9.889 11.968 2.463 5.077 3.694 10.88 3.694 17.408 0 6.528-1.231 12.376-3.694 17.544-2.383 5.168-5.679 9.248-9.889 12.24-4.13 2.901-8.896 4.352-14.298 4.352Zm-.119-11.696c5.084 0 9.135-2.04 12.153-6.12 3.098-4.08 4.647-9.52 4.647-16.32 0-6.619-1.549-11.968-4.647-16.048-3.018-4.08-7.03-6.12-12.034-6.12-5.004 0-9.095 2.085-12.272 6.256-3.098 4.08-4.647 9.475-4.647 16.184 0 6.619 1.509 11.968 4.528 16.048 3.098 4.08 7.188 6.12 12.272 6.12Z"/></g><defs><filter id="a" width="359.44" height="195.456" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2"/><feGaussianBlur stdDeviation="12"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_125_61"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_125_61" result="shape"/></filter></defs></svg>

docs/index.html

···
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <h1>Wisp</h1>
+  <img class="hero-wordmark" src="./images/wordmark.svg" alt="Wisp">
   <nav>
     <a href="https://github.com/lpil/wisp">GitHub</a>
   </nav>

docs/style.css

···
     radial-gradient(at 98% 0%, hsla(121, 69%, 81%, 1) 0px, transparent 50%);
 }
 
-h1 {
-  font-family: cursive, serif;
-  font-size: 8rem;
-  margin: 0;
-  padding: 0;
-  color: rgb(19, 61, 20);
-  margin: 2rem 1rem;
+.hero-wordmark {
+  width: 360px;
 }