stanwmusic

GSAP - Rocket

rocket SVG modified from freepik

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Embed Flutter WhatsApp

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<main>
	
	<button>
		<ion-icon name="logo-facebook"></ion-icon>
	</button>
	<button>
		<ion-icon name="logo-twitter"></ion-icon>
	</button>
	<button>
		<ion-icon name="logo-instagram"></ion-icon>

stanwmusic

<div class="body-clone" data-pasta="spaghetti">

	<nav class="menu">
		<div class="menu__link">
			<svg class="menu__link__shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.35 75.4">
				<g id="spaghetti">
					<path id="spa-1" class="main-1" d="M44.17,66.83a16.14,16.14,0,0,1-9.53-3.16,13.18,13.18,0,0,0-15.69,0A16,16,0,0,1,2,65a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.39,1.39,0,0,1,.65.16,13.2,13.2,0,0,0,14-1.08,16,16,0,0,1,19.06,0,13.18,13.18,0,0,0,15.69,0,16,16,0,0,1,19.06,0A13.2,13.2,0,0,0,85,61.6a1.39,1.39,0,0,1,.65-.16,1.58,1.58,0,0,1,1.42,1A2,2,0,0,1,86.33,65a16,16,0,0,1-16.94-1.32,13.18,13.18,0,0,0-15.69,0A16.12,16.12,0,0,1,44.17,66.83Z" />
					<path id="spa-2" class="main-2" d="M44.17,42.43a16.14,16.14,0,0,1-9.53-3.16,13.18,13.18,0,0,0-15.69,0A16,16,0,0,1,2,40.59a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.52,1.52,0,0,1,.65.16,13.22,13.22,0,0,0,14-1.07,16,16,0,0,1,19.06,0,13.18,13.18,0,0,0,15.69,0,16,16,0,0,1,19.06,0A13.22,13.22,0,0,0,85,37.2a1.52,1.52,0,0,1,.65-.16,1.58,1.58,0,0,1,1.42,1,

stanwmusic

<div class="moon">
  <span class="crater"></span>
  <span class="crater"></span>
  <span class="crater"></span>
  <span class="crater"></span>
</div>
<div class="ground">
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>

stanwmusic

svg.record-player(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105.25 105.25')
  g(transform='translate(310.848 60.185)')
    g.frame
      rect.frame__shine(width='95.25' height='95.25' x='-305.848' y='-55.185' ry='4.276' fill-rule='evenodd')
      path.frame__base(d='M-288.915-55.185v95.25h74.04a4.267 4.267 0 004.276-4.276v-86.697a4.267 4.267 0 00-4.276-4.277z' fill-rule='evenodd')
    circle.record-base(cx='-258.223' cy='-7.56' r='39.688' fill-rule='evenodd' fill='red')
    g.knob(transform='matrix(-.10538 .05103 -.05305 -.10674 -308.635 40.311)')
      ellipse.knob__base(ry='55.325' rx='56.661' cx='-151.007' cy='79.914')
      path.knob__shine(d='M-94.346 79.914a56.661 55.325 0 01-8.12 28.538l-48.541-28.538z')
      circle.knob__top(r='41.961' cy='79.914' cx='-151.007')

stanwmusic

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#00bc9b" />
                <stop offset="100%" stop-color="#5eaefd" />
            </linearGradient>
            <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#5eaefd" />
                <stop offset="100%" stop-color="#00bc9b" />
            </linearGradient>

stanwmusic

CSS Coffee Machine (Bio recharger)

I love coffee. Do you? Inspired by: http://drbl.in/hKAm. I used box-reflect for the reflection http://caniuse.com/#feat=css-reflections

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Advanced CSS

Using CSS Grid, mix-blend-modes, and clip paths in order to create interested and unique designs.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Active Table of Contents

Table of contents currently browsing section highlighting using IntersectionObserver.

A Pen by Stan Williams on CodePen.

License.