raveal - Radially reveal an element

  •        88

Radially reveal an element. CSS clip-path property is pretty awesome, but for some reason clip-path: circle(cx, cy, r); is not working properly in latest Chrome. The workaround is to use an SVG clipPath with clip-path: url(...), update the SVG path, then set the clip-path property again. Also, Chrome and Firefox behave quite differently when handling the positions of clipPaths.




Related Projects

no-more-secrets - A command line tool that recreates the famous data decryption effect seen in the 1992 movie Sneakers

  •    C

This project provides a command line tool called nms that recreates the famous data decryption effect seen on screen in the 1992 hacker movie Sneakers. For reference, you can see this effect at 0:35 in this movie clip. This command works on piped data. Pipe any ASCII or UTF-8 text to nms, and it will apply the hollywood effect, initially showing encrypted data, then starting a decryption sequence to reveal the original plaintext characters.

radial-menu - Radial HTML menu inspired by Path for iOS and Android.

  •    Javascript

Radial HTML menu inspired by Path for iOS and Android.

Radial Keyboard


A simple radial keyboard for XNA

RadialChartImageGenerator - Radial Bar Chart Generator for Apple Watch -

  •    Javascript

A simple tool that generates images for animating radial or circular progress charts for the Apple Watch and WatchKit. The charts are referred to as rings, dials, radials or circles. Clearly, Apple likes radial progress charts which are used in their activity monitor health watch app (Apple Health & Fitness Watch App).

volume-meter - Simple example of implementing a clip-detecting volume meter in Web Audio.

  •    Javascript

I whipped this app up to show a basic volume meter on live audio input. It does both clip detection and RMS volume. A "volume" meter can mean many things; if you want to do clip detection, you really need to access every sample. If you don't need clip detection, I might suggest using an Analyser and getByteTimeDomainData, since it will likely have lower CPU overhead. Note that it is CRITICALLY IMPORTANT to disassociate visual rendering (in the requestAnimationFrame loop) from the onaudioprocess function - you do NOT want to trigger a relayout from inside your audio handler, or it may glitch or cause other issues.

xray-rails - A development tool that reveals your UI's bones

  •    Ruby

The dev tools available to web developers in modern browsers are great. Many of us can't remember what life was like before "Inspect Element". But what we see in the compiled output sent to our browser is often the wrong level of detail - what about visualizing the higher level components of your UI? Controllers, view templates, partials, JS templates, etc. Xray is the missing link between the browser and your app code. Press cmd+shift+x (Mac) or ctrl+shift+x to reveal an overlay of the files that rendered your UI, and click anything to open the file in your editor.


  •    Javascript

Reveal is a jQuery plugin for dead simple modals that comes with some sexy base CSS and can be implemented programatically or with the new HTML5 custom data attributes (data-attribute). Note: This version of Reveal has been deprecated and will no longer be developed or supported. For the most recent code, check out the responsive version of Reveal included in Foundation, our rapid prototyping and production framework.

blooming-menu.js - :cherry_blossom: AwesomeMenu made with CSS

  •    Javascript

A configurable and animated radial menu. BloomingMenu is a port of AwesomeMenu for the web. You can install through npm and use browserify to make it run on the browser.

Encapsulated PostScript Clip Art Library

  •    Perl

Huge collection of cliparts in Encapsulated PostScript format derived from Open Clip Art Library. Includes more than 6,500 clip arts freely available without restrictions for free use and distribution. Released as Public Domain.

ZKRevealingTableViewCell - A Sparrow-style Implementation of Swipe-To-Reveal

  •    Objective-C

Sparrow for iOS has a different kind of swipe to reveal; its version of the control is that the content view pans with your finger or optionally could swipe. This Swipe-To-Reveal implementation will pan with your finger and can swipe. It works left, right, or left and right.

JSSlidingViewController - An easy-to-use "slide-to-reveal" view controller container with great touch performance

  •    Objective-C

An easy way to add "slide-to-reveal" style navigation to an iPhone, iPad, or iPod Touch app. JSSlidingViewController is an easy way to add "slide-to-reveal" style navigation to your app. This is similar to the kind of navigation found in Facebook.app, Path.app, and many others. It's a subclass of UIViewController that uses the view controller containment methods available in iOS 5.0 or later.

direction-reveal - Direction aware content reveals via hover or tab on an element.

  •    CSS

This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction. The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects. The script is an ES6(ES2015) module but a compiled version is included in the build as index.js. You can also copy scripts/direction-reveal.js into your own site if your build process can accomodate ES6 modules, Babel and Browserify are used in the demo site.

MaterialPowerMenu - A demo of the power menu with Reveal and other animations

  •    Java

Some days ago, I saw a gif on Google+ demonstating a concept of Android Power menu in material design, it contained various Circular Reveal animations introduced in Lollipop and various other beautiful animations. I was able to replicate the concept using basic xml animations and Circular Reveal APIs. This repository is the demo of the original concept. Material Power Menu is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.



Two WPF controls A rotating progress/working wheel. Three styles are provided - Internet Explorer, Firefox and Mac OS An Analog/Radial or circular gauge for displaying values using a needle and scale. Useful for Instrumentation/dashboard applications. The example appl...

canvas-gauges - HTML5 Canvas Gauge

  •    Javascript

This is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base. If you only need the exact type of the gauge it can be installed using the appropriate npm tag. Currently the following gauges are supported: linear, radial.

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

M-Pin - Two Factor Authentication For Web sites

  •    Java

M-Pin Strong Authentication System enables true two-factor authentication for web sites and applications, based on the open source M-Pin Authentication Server and M-Pin Managed Service. The M-Pin™ Managed Service is a highly available, fault tolerant software as a service that issues cryptographic secrets to M-Pin Authentication Servers and Clients.

Empty Clip

  •    C++

Empty Clip is a top-down, 2D Action RPG. It draws heavily from games such as Crimsonland, Diablo, Alien Swarm, Grand Theft Auto II, and more. There is a campaign, adventure, and survival mode.

Digital Media Processing Project 1: Image Processor


Homework for "Digital Media Processing". Features Include: Curve Adjustment Tool Region Growing Segmetation Threshold Segmentation Guassian/Butterworth High/Low pass filters Laplacian Sharpen Sobel Filter Guassian Noise FFT spectrum chart Histogram and histogram equalization Clip