{ "name": "Rive Library", "description": "Ready-made Rive animations for teaching and projects, with working code for plain HTML, React and AI coding tools.", "baseUrl": "https://floridagames.github.io/rive-library/", "repo": "FloridaGames/rive-library", "branch": "main", "runtime": "2.42.1", "generated": "2026-10-01T13:44:48.768Z", "samples": [ { "id": "logo-eu", "title": "EU logo (European Commission)", "summary": "The European Commission logo builds itself up: stripes fly in, the flag unfolds, twelve stars pop in.", "description": "The Berlaymont logo of the European Commission as an interactive Rive animation. On load the grey stripes fly in from the sides, the blue flag unfolds and the twelve stars pop in one by one, clockwise. A highlight makes the flag grow, light up and jump. Click or tap the logo to play the highlight; the durations, the size and the jump height are adjustable.", "category": "logo", "tags": [ "eu", "europe", "european commission", "eu council", "brand", "entrance", "highlight", "interactive", "lobby game" ], "file": "logo-eu.riv", "poster": "logo-eu.svg", "artboard": "Logo", "stateMachine": "Logo", "width": 460, "height": 226, "displayWidth": 320, "background": "#ffffff", "controls": [ { "name": "entree", "type": "trigger", "label": "Play entrance", "description": "Replays the entrance animation. It also plays once by itself when the file loads." }, { "name": "highlight", "type": "trigger", "label": "Play highlight", "description": "A short attention move: the flag grows, lights up and jumps, in front of the stripes." }, { "name": "entreeDuur", "type": "number", "label": "Entrance duration", "unit": "s", "default": 2.1, "min": 0.7, "max": 4, "step": 0.1, "preview": "entree", "snaps": [ 0.7, 0.9, 1.1, 1.4, 1.7, 2.1, 2.6, 3.2, 4 ], "description": "Length of the entrance in seconds. The file snaps to the nearest of 0.7, 0.9, 1.1, 1.4, 1.7, 2.1, 2.6, 3.2 or 4." }, { "name": "highlightDuur", "type": "number", "label": "Highlight duration", "unit": "s", "default": 1.1, "min": 0.4, "max": 2.7, "step": 0.1, "preview": "highlight", "snaps": [ 0.4, 0.6, 0.8, 1.1, 1.5, 2, 2.7 ], "description": "Length of the highlight in seconds. Snaps to the nearest of 0.4, 0.6, 0.8, 1.1, 1.5, 2 or 2.7." }, { "name": "highlightGrootte", "type": "number", "label": "Highlight size", "unit": "%", "default": 132, "min": 100, "max": 200, "step": 1, "preview": "highlight", "description": "How much it grows during the highlight, in percent (100 = no growth). Stepless." }, { "name": "highlightHoogte", "type": "number", "label": "Highlight jump", "unit": "px", "default": 26, "min": 0, "max": 90, "step": 1, "preview": "highlight", "description": "How far it jumps up during the highlight, in artboard pixels (0 = no jump). Stepless." }, { "name": "aangeraakt", "type": "boolean", "internal": true, "label": "Touched", "description": "Set by the file's own click listener, so clicking or tapping the logo plays the highlight. Leave it alone." } ], "replayTrigger": "entree", "hoverTrigger": "highlight", "notes": [ "Plays its entrance by itself on load; fire `entree` to replay it.", "Clicking or tapping the logo plays the highlight; that listener is built into the file.", "To draw attention now and then, fire `highlight` at random intervals (for example every 1 to 5 minutes) and skip it while the tab is hidden.", "The stripes are light grey, so on white they are subtle; on a dark background they stand out more." ], "author": "Stijlbreuk", "source": "rive-showcase: tools/gen-logo.py (built from svg/logo-eu.svg)", "license": "Logo of the European Commission. Use it in line with the Commission's visual identity rules, for example in teaching material about the EU.", "added": "2026-10-01", "size": 38268, "path": "samples/logo-eu/", "url": "https://floridagames.github.io/rive-library/samples/logo-eu/logo-eu.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/logo-eu/logo-eu.svg", "readme": "https://floridagames.github.io/rive-library/samples/logo-eu/README.md", "example": "https://floridagames.github.io/rive-library/samples/logo-eu/example.html", "page": "https://floridagames.github.io/rive-library/#/s/logo-eu" }, { "id": "logo-tiu", "title": "Tilburg University logo", "summary": "The TiU logo assembles itself: letters rise, the tree grows, the eight diamonds pop in.", "description": "The Tilburg University logo as an interactive Rive animation. On load the letters rise towards the centre (Tilburg from the left, University from the right), the tree grows from the ground, the two figures slide in and the eight diamonds pop in clockwise. A highlight makes the emblem grow and jump while the diamonds light up golden. Click or tap the logo to play the highlight; the durations, the size and the jump height are adjustable.", "category": "logo", "tags": [ "tiu", "tilburg university", "university", "brand", "entrance", "highlight", "interactive" ], "file": "logo-tiu.riv", "poster": "logo-tiu.svg", "artboard": "TiU", "stateMachine": "TiU", "width": 674, "height": 301, "displayWidth": 360, "background": "#ffffff", "controls": [ { "name": "entree", "type": "trigger", "label": "Play entrance", "description": "Replays the entrance animation. It also plays once by itself when the file loads." }, { "name": "highlight", "type": "trigger", "label": "Play highlight", "description": "A short attention move: the emblem grows and jumps in front of the letters, and the diamonds light up golden." }, { "name": "entreeDuur", "type": "number", "label": "Entrance duration", "unit": "s", "default": 2.1, "min": 0.7, "max": 4, "step": 0.1, "preview": "entree", "snaps": [ 0.7, 0.9, 1.1, 1.4, 1.7, 2.1, 2.6, 3.2, 4 ], "description": "Length of the entrance in seconds. The file snaps to the nearest of 0.7, 0.9, 1.1, 1.4, 1.7, 2.1, 2.6, 3.2 or 4." }, { "name": "highlightDuur", "type": "number", "label": "Highlight duration", "unit": "s", "default": 1.1, "min": 0.4, "max": 2.7, "step": 0.1, "preview": "highlight", "snaps": [ 0.4, 0.6, 0.8, 1.1, 1.5, 2, 2.7 ], "description": "Length of the highlight in seconds. Snaps to the nearest of 0.4, 0.6, 0.8, 1.1, 1.5, 2 or 2.7." }, { "name": "highlightGrootte", "type": "number", "label": "Highlight size", "unit": "%", "default": 132, "min": 100, "max": 200, "step": 1, "preview": "highlight", "description": "How much it grows during the highlight, in percent (100 = no growth). Stepless." }, { "name": "highlightHoogte", "type": "number", "label": "Highlight jump", "unit": "px", "default": 26, "min": 0, "max": 90, "step": 1, "preview": "highlight", "description": "How far it jumps up during the highlight, in artboard pixels (0 = no jump). Stepless." }, { "name": "aangeraakt", "type": "boolean", "internal": true, "label": "Touched", "description": "Set by the file's own click listener, so clicking or tapping the logo plays the highlight. Leave it alone." } ], "replayTrigger": "entree", "hoverTrigger": "highlight", "notes": [ "Plays its entrance by itself on load; fire `entree` to replay it.", "Clicking or tapping the logo plays the highlight; that listener is built into the file.", "The artboard is taller than the drawing, so the emblem has room to grow. Leave that space in your layout.", "Looks best on a light background: the letters are dark blue." ], "author": "Stijlbreuk", "source": "rive-showcase: tools/gen-logo-tiu.py (built from svg/logo-tiu.svg)", "license": "Logo of Tilburg University. Use it in Tilburg University teaching and projects, in line with the TiU brand guidelines.", "added": "2026-10-01", "size": 109531, "path": "samples/logo-tiu/", "url": "https://floridagames.github.io/rive-library/samples/logo-tiu/logo-tiu.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/logo-tiu/logo-tiu.svg", "readme": "https://floridagames.github.io/rive-library/samples/logo-tiu/README.md", "example": "https://floridagames.github.io/rive-library/samples/logo-tiu/example.html", "page": "https://floridagames.github.io/rive-library/#/s/logo-tiu" }, { "id": "eu-council-vote", "title": "EU Council vote", "summary": "The Council of the EU round a table, all 27 member states. Hold a vote: country by country the seat lights up while it votes, then shows yes, no or abstain.", "description": "The Council of the EU as a vector illustration, 27 members round a table, one per member state. \"Hold a vote\" plays a whole round like the real thing: everyone back to none, then country by country in protocol order (clockwise round the table) the seat lights up while it votes, gold rings ripple out, the flag lifts and waves, and then its vote lands: the flag settles at 1.6 times its size, the table rim turns green, red or amber and a badge with a check, cross or dash pops in. At the end the outcome under qualified majority. From code, every country is an enum named after its two-letter code in lower case: none, voting, yes, no or abstain. Every person, chair, table segment and flag is a named group in the file (vlag-BE, figuur-BE, tafeldeel-BE), ready for more animation in the Rive editor.", "category": "illustration", "tags": [ "eu", "council", "council of the eu", "vote", "voting", "ballot", "yes", "no", "abstain", "member states", "round table", "qualified majority", "politics", "austria", "belgium", "bulgaria", "croatia", "cyprus", "czechia", "denmark", "estonia", "finland", "france", "germany", "greece", "hungary", "ireland", "italy", "latvia", "lithuania", "luxembourg", "malta", "netherlands", "poland", "portugal", "romania", "slovakia", "slovenia", "spain", "sweden", "vector", "vote round", "roll call", "simulation" ], "file": "eu-council-vote.riv", "poster": "eu-council-vote.webp", "artboard": "CouncilVote", "stateMachine": "CouncilVote", "width": 1212.44, "height": 1248.04, "displayWidth": 600, "background": "#ffffff", "controls": [ { "name": "at", "type": "enum", "label": "Austria", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Austria votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "be", "type": "enum", "label": "Belgium", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Belgium votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "bg", "type": "enum", "label": "Bulgaria", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Bulgaria votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "hr", "type": "enum", "label": "Croatia", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Croatia votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "cy", "type": "enum", "label": "Cyprus", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Cyprus votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "cz", "type": "enum", "label": "Czechia", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Czechia votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "dk", "type": "enum", "label": "Denmark", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Denmark votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "ee", "type": "enum", "label": "Estonia", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Estonia votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "fi", "type": "enum", "label": "Finland", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Finland votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "fr", "type": "enum", "label": "France", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How France votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "de", "type": "enum", "label": "Germany", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Germany votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "gr", "type": "enum", "label": "Greece", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Greece votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "hu", "type": "enum", "label": "Hungary", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Hungary votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "ie", "type": "enum", "label": "Ireland", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Ireland votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "it", "type": "enum", "label": "Italy", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Italy votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "lv", "type": "enum", "label": "Latvia", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Latvia votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "lt", "type": "enum", "label": "Lithuania", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Lithuania votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "lu", "type": "enum", "label": "Luxembourg", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Luxembourg votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "mt", "type": "enum", "label": "Malta", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Malta votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "nl", "type": "enum", "label": "Netherlands", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Netherlands votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "pl", "type": "enum", "label": "Poland", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Poland votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "pt", "type": "enum", "label": "Portugal", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Portugal votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "ro", "type": "enum", "label": "Romania", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Romania votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "sk", "type": "enum", "label": "Slovakia", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Slovakia votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "si", "type": "enum", "label": "Slovenia", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Slovenia votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "es", "type": "enum", "label": "Spain", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Spain votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." }, { "name": "se", "type": "enum", "label": "Sweden", "default": "none", "values": [ "none", "voting", "yes", "no", "abstain" ], "description": "How Sweden votes: none (no highlight), voting (the moment of voting: the seat pulses until the vote shows), yes, no or abstain." } ], "preset": { "be": "yes", "bg": "no", "de": "yes", "es": "yes", "fr": "no", "it": "abstain", "nl": "yes", "pl": "no", "se": "yes", "sk": "yes" }, "notes": [ "Set a vote with `vm.enum(\"de\").value = \"yes\"`. The values are `none`, `voting`, `yes`, `no` and `abstain`; any other string is ignored.", "`voting` is the moment of voting: the flag lifts and waves, the member pulses, gold rings ripple out of the seat and the badge shows three dots. Set the actual vote after it, for example 0.8 s later.", "\"Hold a vote\" on this page plays a whole round like the real Council: everyone back to none, then country by country in protocol order (BE, BG, CZ ... FI, SE), which is clockwise round this table. The HTML and React code include the same round as a `holdVote()` function.", "At the end the page shows the outcome under the qualified majority: at least 15 of the 27 states (55%) voting yes, representing at least 65% of the EU population. Abstaining counts as not voting yes.", "The vector source is in the repository (sources/eu-council-vote/eu-court.svg), with every person, chair, table segment and flag as a named group." ], "author": "Stijlbreuk", "source": "sources/eu-council-vote/ in this repository: eu-court.svg (from EU-court_27_leden.ai) and generate.py", "license": "For teaching and projects about the EU. The figures are fictional.", "added": "2026-10-01", "round": { "label": "Hold a vote", "reset": "none", "pending": "voting", "outcomes": { "yes": 0.6, "no": 0.25, "abstain": 0.15 }, "order": [ "be", "bg", "cz", "dk", "de", "ee", "ie", "gr", "es", "fr", "hr", "it", "cy", "lv", "lt", "lu", "hu", "mt", "nl", "at", "pl", "pt", "ro", "si", "sk", "fi", "se" ], "start": 700, "think": 1000, "pause": 250, "majority": { "states": 0.55, "population": 0.65, "blocking": 4 }, "population": { "de": 83.45, "fr": 68.4, "it": 58.99, "es": 48.62, "pl": 36.62, "ro": 19.06, "nl": 17.94, "be": 11.83, "cz": 10.9, "se": 10.55, "pt": 10.64, "gr": 10.4, "hu": 9.58, "at": 9.16, "bg": 6.45, "dk": 5.96, "fi": 5.6, "sk": 5.42, "ie": 5.27, "hr": 3.86, "lt": 2.89, "si": 2.12, "lv": 1.87, "ee": 1.37, "cy": 0.93, "lu": 0.67, "mt": 0.56 }, "populationNote": "Population in millions, 1 January 2024 (Eurostat, rounded)." }, "size": 2061213, "path": "samples/eu-council-vote/", "url": "https://floridagames.github.io/rive-library/samples/eu-council-vote/eu-council-vote.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/eu-council-vote/eu-council-vote.webp", "readme": "https://floridagames.github.io/rive-library/samples/eu-council-vote/README.md", "example": "https://floridagames.github.io/rive-library/samples/eu-council-vote/example.html", "page": "https://floridagames.github.io/rive-library/#/s/eu-council-vote" }, { "id": "icon-banknote", "title": "Banknote", "summary": "A line icon that draws itself in (Lucide \"banknote\"). Colour and stroke width are adjustable.", "description": "The Lucide \"banknote\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for a payment (\"betaling\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "banknote", "betaling", "draw-on", "stroke", "lobby game" ], "file": "icon-banknote.riv", "poster": "icon-banknote.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-banknote.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"banknote\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 719, "path": "samples/icon-banknote/", "url": "https://floridagames.github.io/rive-library/samples/icon-banknote/icon-banknote.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-banknote/icon-banknote.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-banknote/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-banknote/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-banknote" }, { "id": "icon-book-open", "title": "Book open", "summary": "A line icon that draws itself in (Lucide \"book-open\"). Colour and stroke width are adjustable.", "description": "The Lucide \"book-open\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the white paper (\"witboek\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "book-open", "witboek", "draw-on", "stroke", "lobby game" ], "file": "icon-book-open.riv", "poster": "icon-book-open.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-book-open.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"book-open\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 776, "path": "samples/icon-book-open/", "url": "https://floridagames.github.io/rive-library/samples/icon-book-open/icon-book-open.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-book-open/icon-book-open.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-book-open/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-book-open/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-book-open" }, { "id": "icon-briefcase", "title": "Briefcase", "summary": "A line icon that draws itself in (Lucide \"briefcase\"). Colour and stroke width are adjustable.", "description": "The Lucide \"briefcase\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the client (\"opdrachtgever\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "briefcase", "opdrachtgever", "draw-on", "stroke", "lobby game" ], "file": "icon-briefcase.riv", "poster": "icon-briefcase.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-briefcase.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"briefcase\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 673, "path": "samples/icon-briefcase/", "url": "https://floridagames.github.io/rive-library/samples/icon-briefcase/icon-briefcase.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-briefcase/icon-briefcase.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-briefcase/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-briefcase/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-briefcase" }, { "id": "icon-clock", "title": "Clock", "summary": "A line icon that draws itself in (Lucide \"clock\"). Colour and stroke width are adjustable.", "description": "The Lucide \"clock\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for time (\"klok\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "clock", "klok", "draw-on", "stroke", "lobby game" ], "file": "icon-clock.riv", "poster": "icon-clock.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-clock.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"clock\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 596, "path": "samples/icon-clock/", "url": "https://floridagames.github.io/rive-library/samples/icon-clock/icon-clock.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-clock/icon-clock.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-clock/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-clock/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-clock" }, { "id": "icon-eye", "title": "Eye", "summary": "A line icon that draws itself in (Lucide \"eye\"). Colour and stroke width are adjustable.", "description": "The Lucide \"eye\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for processing (\"verwerking\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "eye", "verwerking", "draw-on", "stroke", "lobby game" ], "file": "icon-eye.riv", "poster": "icon-eye.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-eye.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"eye\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 742, "path": "samples/icon-eye/", "url": "https://floridagames.github.io/rive-library/samples/icon-eye/icon-eye.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-eye/icon-eye.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-eye/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-eye/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-eye" }, { "id": "icon-file-text", "title": "File text", "summary": "A line icon that draws itself in (Lucide \"file-text\"). Colour and stroke width are adjustable.", "description": "The Lucide \"file-text\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for a proposal (\"voorstel\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "file-text", "voorstel", "draw-on", "stroke", "lobby game" ], "file": "icon-file-text.riv", "poster": "icon-file-text.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-file-text.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"file-text\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 961, "path": "samples/icon-file-text/", "url": "https://floridagames.github.io/rive-library/samples/icon-file-text/icon-file-text.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-file-text/icon-file-text.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-file-text/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-file-text/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-file-text" }, { "id": "icon-footprints", "title": "Footprints", "summary": "A line icon that draws itself in (Lucide \"footprints\"). Colour and stroke width are adjustable.", "description": "The Lucide \"footprints\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for a meeting (\"ontmoeting\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "footprints", "ontmoeting", "draw-on", "stroke", "lobby game" ], "file": "icon-footprints.riv", "poster": "icon-footprints.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-footprints.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"footprints\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 963, "path": "samples/icon-footprints/", "url": "https://floridagames.github.io/rive-library/samples/icon-footprints/icon-footprints.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-footprints/icon-footprints.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-footprints/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-footprints/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-footprints" }, { "id": "icon-handshake", "title": "Handshake", "summary": "A line icon that draws itself in (Lucide \"handshake\"). Colour and stroke width are adjustable.", "description": "The Lucide \"handshake\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for a coalition (\"coalitie\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "handshake", "coalitie", "draw-on", "stroke", "lobby game" ], "file": "icon-handshake.riv", "poster": "icon-handshake.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-handshake.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"handshake\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 1298, "path": "samples/icon-handshake/", "url": "https://floridagames.github.io/rive-library/samples/icon-handshake/icon-handshake.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-handshake/icon-handshake.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-handshake/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-handshake/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-handshake" }, { "id": "icon-hourglass", "title": "Hourglass", "summary": "A line icon that draws itself in (Lucide \"hourglass\"). Colour and stroke width are adjustable.", "description": "The Lucide \"hourglass\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for waiting (\"wachten\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "hourglass", "wachten", "draw-on", "stroke", "lobby game" ], "file": "icon-hourglass.riv", "poster": "icon-hourglass.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-hourglass.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"hourglass\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 752, "path": "samples/icon-hourglass/", "url": "https://floridagames.github.io/rive-library/samples/icon-hourglass/icon-hourglass.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-hourglass/icon-hourglass.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-hourglass/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-hourglass/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-hourglass" }, { "id": "icon-landmark", "title": "Landmark", "summary": "A line icon that draws itself in (Lucide \"landmark\"). Colour and stroke width are adjustable.", "description": "The Lucide \"landmark\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the Council (\"raad\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "landmark", "raad", "draw-on", "stroke", "lobby game" ], "file": "icon-landmark.riv", "poster": "icon-landmark.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-landmark.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"landmark\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 814, "path": "samples/icon-landmark/", "url": "https://floridagames.github.io/rive-library/samples/icon-landmark/icon-landmark.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-landmark/icon-landmark.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-landmark/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-landmark/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-landmark" }, { "id": "icon-newspaper", "title": "Newspaper", "summary": "A line icon that draws itself in (Lucide \"newspaper\"). Colour and stroke width are adjustable.", "description": "The Lucide \"newspaper\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the news (\"krant\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "newspaper", "krant", "draw-on", "stroke", "lobby game" ], "file": "icon-newspaper.riv", "poster": "icon-newspaper.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-newspaper.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"newspaper\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 923, "path": "samples/icon-newspaper/", "url": "https://floridagames.github.io/rive-library/samples/icon-newspaper/icon-newspaper.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-newspaper/icon-newspaper.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-newspaper/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-newspaper/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-newspaper" }, { "id": "icon-scale", "title": "Scale", "summary": "A line icon that draws itself in (Lucide \"scale\"). Colour and stroke width are adjustable.", "description": "The Lucide \"scale\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for a compromise (\"compromis\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "scale", "compromis", "draw-on", "stroke", "lobby game" ], "file": "icon-scale.riv", "poster": "icon-scale.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-scale.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"scale\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 945, "path": "samples/icon-scale/", "url": "https://floridagames.github.io/rive-library/samples/icon-scale/icon-scale.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-scale/icon-scale.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-scale/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-scale/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-scale" }, { "id": "icon-shield-alert", "title": "Shield alert", "summary": "A line icon that draws itself in (Lucide \"shield-alert\"). Colour and stroke width are adjustable.", "description": "The Lucide \"shield-alert\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for something revealed (\"onthuld\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "shield-alert", "onthuld", "draw-on", "stroke", "lobby game" ], "file": "icon-shield-alert.riv", "poster": "icon-shield-alert.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-shield-alert.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"shield-alert\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 763, "path": "samples/icon-shield-alert/", "url": "https://floridagames.github.io/rive-library/samples/icon-shield-alert/icon-shield-alert.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-shield-alert/icon-shield-alert.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-shield-alert/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-shield-alert/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-shield-alert" }, { "id": "icon-shield-check", "title": "Shield check", "summary": "A line icon that draws itself in (Lucide \"shield-check\"). Colour and stroke width are adjustable.", "description": "The Lucide \"shield-check\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for credibility (\"geloofwaardigheid\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "shield-check", "geloofwaardigheid", "draw-on", "stroke", "lobby game" ], "file": "icon-shield-check.riv", "poster": "icon-shield-check.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-shield-check.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"shield-check\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 867, "path": "samples/icon-shield-check/", "url": "https://floridagames.github.io/rive-library/samples/icon-shield-check/icon-shield-check.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-shield-check/icon-shield-check.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-shield-check/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-shield-check/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-shield-check" }, { "id": "icon-users", "title": "Users", "summary": "A line icon that draws itself in (Lucide \"users\"). Colour and stroke width are adjustable.", "description": "The Lucide \"users\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the players (\"spelers\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "users", "spelers", "draw-on", "stroke", "lobby game" ], "file": "icon-users.riv", "poster": "icon-users.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-users.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"users\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 838, "path": "samples/icon-users/", "url": "https://floridagames.github.io/rive-library/samples/icon-users/icon-users.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-users/icon-users.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-users/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-users/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-users" }, { "id": "icon-vote", "title": "Vote", "summary": "A line icon that draws itself in (Lucide \"vote\"). Colour and stroke width are adjustable.", "description": "The Lucide \"vote\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the vote (\"stemming\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "vote", "stemming", "draw-on", "stroke", "lobby game" ], "file": "icon-vote.riv", "poster": "icon-vote.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-vote.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"vote\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 730, "path": "samples/icon-vote/", "url": "https://floridagames.github.io/rive-library/samples/icon-vote/icon-vote.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-vote/icon-vote.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-vote/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-vote/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-vote" }, { "id": "icon-wallet", "title": "Wallet", "summary": "A line icon that draws itself in (Lucide \"wallet\"). Colour and stroke width are adjustable.", "description": "The Lucide \"wallet\" icon as a Rive file whose strokes draw themselves in. In the EU Lobby Game it stands for the budget (\"budget\"). The file holds only the drawing and three controls: draw progress, stroke colour and stroke width. There is no timeline inside: your page animates the draw progress from 0 to 1, which keeps duration, delay and easing in your own code. All icons in this set share the same artboard, controls and code, so swapping one for another is a matter of changing the file name.", "category": "icon", "collection": "Lobby Game icons", "tags": [ "icon", "line icon", "lucide", "wallet", "budget", "draw-on", "stroke", "lobby game" ], "file": "icon-wallet.riv", "poster": "icon-wallet.svg", "artboard": "Icoon", "stateMachine": "Icoon", "width": 240, "height": 240, "displayWidth": 64, "background": "#ffffff", "controls": [ { "name": "tekenen", "type": "number", "label": "Draw progress", "default": 1, "min": 0, "max": 1, "step": 0.01, "animated": true, "description": "0 = nothing visible, 1 = the whole icon. The file has no timeline: animate this from 0 to 1 yourself (see the draw-on code)." }, { "name": "kleur", "type": "color", "label": "Stroke colour", "default": "#0e2879", "description": "The stroke colour. Set it with `.rgb(r, g, b)`; a canvas does not inherit the CSS `color`." }, { "name": "dikte", "type": "number", "label": "Stroke width", "default": 20, "min": 10, "max": 35, "step": 1, "description": "Stroke width in artboard units. The artboard is 240 wide, ten times Lucide's 24, so 20 equals Lucide's standard 2 px stroke." } ], "recipe": { "type": "draw-on", "property": "tekenen", "duration": 700 }, "notes": [ "Stays fully drawn until your code animates `tekenen`; the snippets below draw it in on load and again on click.", "Strokes are real Rive strokes with round caps, trimmed synchronously: every part of the icon draws at the same time, so icons with more paths are not slower.", "The static SVG (icon-wallet.svg) is the same drawing; show it as a fallback until the canvas is ready." ], "author": "Stijlbreuk", "source": "eu-lobby-game: rive-iconen/maak-icoon.py (Lucide \"wallet\" via Iconify)", "license": "ISC. Icon shapes from Lucide (lucide.dev), © Lucide Icons and Contributors; Rive conversion by Stijlbreuk.", "added": "2026-10-01", "size": 1031, "path": "samples/icon-wallet/", "url": "https://floridagames.github.io/rive-library/samples/icon-wallet/icon-wallet.riv", "posterUrl": "https://floridagames.github.io/rive-library/samples/icon-wallet/icon-wallet.svg", "readme": "https://floridagames.github.io/rive-library/samples/icon-wallet/README.md", "example": "https://floridagames.github.io/rive-library/samples/icon-wallet/example.html", "page": "https://floridagames.github.io/rive-library/#/s/icon-wallet" } ] }