ykob/shape-overlays

Stars
401
Rank 107,179 (Top 3 %)
Language
HTML
Created about 7 years ago
Updated almost 7 years ago

ykob/shape-overlays

ykob

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Multi-layered SVG shape overlays with adjustable values for a variety of effects. By Yoichi Kobayashi.

Shape Overlays

Multi-layered SVG shape overlays with adjustable values for a variety of effects. By Yoichi Kobayashi.

Article on Codrops

Credits

glsl-easings by glslify.

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Yoichi Kobayashi: Twitter, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2017

sketch-threejs

Interactive sketches made with three.js.

fullscreen-slider

This asset controls sections in a page. It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.

scroll-manager

Scroll Manager is utility class that controls smooth scroll and showing some elements by scroll event.

glsl-dissolve

it's dissolve effects for the 2D cross fade made with glsl.

glsl-bloom

test of a glsl bloom effect. it is not used THREE.EffectComposer.

tplh.net-2019

I explored what my identity was and tried to express it as much as possible using whatever technology I have now.

sketch-threejs-v2

Interactive sketches made with three.js. Created by Yoichi Kobayashi.

pjax

It's a utility JavaScript asset that manages asynchronous page transition on a website.

sphere-to-plane

this is WebGL demo that is moving vertices from sphere geometry to plane geometry.

sketch-webcam

Interactive demos with webcam, tensorflow.js models, three.js and Vue-CLI.

study-threejs-lighting

It's a study record of 3D graphic lighting with the shaders that I created by quoting from three.js.

glsl-util

Private GLSL utility functions created by @ykob

imago

glsl-glitch

it is test of glitch at WebGL fragment shader.

js-util

Private JavaScript utility functions created by @ykob.

glsl-force

glsl-school-2016

2016年10月開講の短期集中GLSLスクールに関するレポートと、講習を受けて作成したデモを置いています。

gulpfile

The asset to develop a website with Gulp.

particle-picture

drawing a picture with particles and move it.

glsl-matrix

it is foundational matrix function made with glsl.

demofiles

it is my basic files for three.js demo.

panorama360

Three.jsと全天球写真を組み合わせて作成した、360度パノラマビュー。

components

they are components what can be used general purpose on website.

particle-spherical

球状に移動するパーティクル。

new-year-2017

2016年はたいへんお世話になりました。2017年もよろしくおねがいします。

learn-vuejs

learn-typescript

svg-draw-path

Drawing line animation with SVG.

wp-theme

learn-react-hook-form

study-mediapipe-web

scss-utility

Utility SCSS classes based on Emmet.

tplh.net

learn-unity

vue-form

collision-2d

2Dの衝突判定テスト。

audio-visualizer-2d

learn-nextjs

vite-three-2023

particle-2023

I create demos with various particle effects.

sketch-canvas2d

it's my personal sketch that is used canvas2d.

sketch-webcam-v2

new-year-2016

2015年中はお世話になりました。2016年もよろしくお願いします。

force3.js

JavaScript class for calculating acceleration.

learn-svg

js-wheel

ykob.github.io

vue-ui

learn-webgl