California Career Pathways (CLASP)

Masuga Design developed an interactive tool with a CMS back-end to search, filter, and compare career initiatives. The strengths and weaknesses of each initiative are represented by dynamic, color-coded SVG hexagons generated from data in the CMS. Users can save initiatives to a "Comparison" page, where they can be filtered and the results saved directly to PDF files.

Cacareerpathways Gomasuga Work


  • Craft CMS Development
  • Complex Dynamic SVG Creation
  • Front-end HTML/CSS/JS
  • Responsive Design


The California Career Pathways (CLASP) interactive tool allows users to search, filter, and compare career initiatives to create career "pathways" in seeking employment skills.

Comparisons. Custom collections of initiatives can be created and then instantly filtered by any of the six elements. The comparisons can be saved directly as PDF files.

Dynamic SVG Creation. Every hexagon image on the site is a dynamically created SVG image based on data from the content management system. This saved the creation of thousands of possible images. If the client ever decides to change one of the element colors, we only need to update a couple style rules, as opposed to regenerating thousands of images.

Other Projects