Ryan Malloy rsp2k
| <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"> | |
| </svg> |
| svg(class="toggle-scene" xmlns='http://www.w3.org/2000/svg' preserveaspectratio='xMinYMin' viewBox='0 0 197.451 481.081') | |
| defs | |
| marker#e(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') | |
| marker#d(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') | |
| marker#c(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') | |
| marker#b(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') |
An animated entrance sequence for widgets where everything rolls in including the numbers. Design based on a Dribbble shot by Mateusz Nieckarz.
A Pen by Jon Kantner on CodePen.
| <span class="arrow arrow--instruction"> | |
| <span>hold to flip coin</span> | |
| <svg viewBox="0 0 97 52" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| fill-rule="evenodd" | |
| clip-rule="evenodd" | |
| d="M74.568 0.553803C74.0753 0.881909 73.6295 1.4678 73.3713 2.12401C73.1367 2.70991 72.3858 4.67856 71.6584 6.50658C70.9544 8.35803 69.4526 11.8031 68.3498 14.1936C66.1441 19.0214 65.839 20.2167 66.543 21.576C67.4581 23.3337 69.4527 23.9196 71.3064 22.9821C72.4797 22.3728 74.8965 19.5839 76.9615 16.4435C78.8387 13.5843 78.8387 13.6077 78.1113 18.3418C77.3369 23.4275 76.4687 26.2866 74.5915 30.0364C73.254 32.7316 71.8461 34.6299 69.218 37.3485C65.9563 40.6999 62.2254 42.9732 57.4385 44.4965C53.8718 45.6449 52.3935 45.8324 47.2546 45.8324C43.3594 45.8324 42.1158 45.7386 39.9805 45.2933C32.2604 43.7466 25.3382 40.9577 19.4015 36.9735C15.0839 34.0909 12.5028 31.7004 9.80427 27.9975C6.80073 23.9196 4.36038 17.2403 3.72682 11.475C3.37485 8.1471 3.1402 7.32683 2.43624 7.13934C0.77 |
Animated logo for a project I'm working on. Uses multiple DOM elements so that I can apply an inner box shadow to get a slight highlight on the top edges of each piece. The entire logo is rotated along the x and y axes and the body has perspective to give the entire experience depth.
To achieve a smooth gradient through all pieces, each element has the same radial gradient with a unique background-position applied. Opening and closing the logo spins the outer rings in and out of the center.
A Pen by Filip Zrnzevic on CodePen.
An interactive card featuring a mesmerizing glow effect that invites you to enter a portal. Once activated, you are unexpectedly sucked into the matrix, traveling through a digital tunnel filled with floating code snippets and particles, immersing you in a journey through cyberspace
A Pen by Matt Cannon on CodePen.