Simple Shapes renders crisp, scalable geometric shapes as inline SVGs that fill the full width and height of your element. Choose from eight shapes - Circle, Square, Triangle, Star, Diamond, Hexagon, Cross, and Arrow - and style them with fill colors, borders, opacity, drop shadows, rotation, and continuous spin animations. Unlike image-based approaches, shapes stay perfectly sharp at any size and can be controlled dynamically through exposed states, events, and element actions.
Link to Editor:
https://bubble.io/page?id=stein-plugins&tab=Design&name=simple-shapes&ai_generated=true&type=pageLink to Demo:
https://stein-plugins.bubbleapps.io/version-test/simple-shapes/1774487308909x578935158111235600FeaturesShapesEight built-in shapes that scale to fill your element bounds: Circle, Square, Triangle, Star, Diamond, Hexagon, Cross, and Arrow. Shapes render as crisp inline SVGs at any size.
StylingFill color · Border color and width · Shape opacity · Drop shadow with configurable color, x/y offset, and blur radius
Star & Cross OptionsAdjustable number of star points (3-12) · Star inner radius ratio for controlling point depth · Cross arm thickness
Rotation & SpinStatic rotation angle · Continuous spin animation with adjustable speed · Clockwise or counter-clockwise direction · Start, stop, and toggle spin via element actions
InteractivityClick event on the shape · Disable mode to silently block clicks · Exposed spinning state for conditional logic
States Exposedis_spinning - Yes when the shape is actively spinning, No when stopped
Events Triggeredshape_clicked - Fires when the shape is clicked (suppressed when disabled)
Element ActionsStart Spin - Begins continuous spin animation ·
Stop Spin - Stops spinning and returns to the static rotation angle ·
Toggle Spin - Starts spinning if stopped, stops if spinning
Built on Bubble
